Closed2

(更新回数①最新更新3.29)【Next.js】ENUM取得と日本語化についての記録

hirohiro

何について書く?

  • GraphQLで取得したEnumを日本語化する方法

内容

まずはGraphQLからEnumを取得する方法。

  • クエリー書き方。
export const listEnums =  /* GraphQL */ `
query ListEnums(
  $enum: String!
) {
  enum: __type(name: $enum) {
    enumValues {
      name
    }
  }
}
  • Enum取得方法
const [ enumValues , addEnum ] = useState([])
  const getEnums = async () => {
    const result = (await API.graphql(
      graphqlOperation(listEnum, {enum: 'Enum'})
    )) as GraphQLResult
    addEnum(result.data.enum.enumValues.map(x => x.name))
  }
//-----------------
useEffect(() => {
    getEnums()
  },[])

本題の日本語化

  • 翻訳用のオブジェクトリテラル(連想配列)を作成して翻訳する。
export const enums = {
  "EnumA": "列挙型エー",
  "EnumB": "列挙型ビー",
}

//-----------------
//Formセレクトに選択肢だけ日本語化してみる。

<Select>
    {enumValues.map( enumValue => <option key={enumValue} value={enumValue}>{enums[enumValue]}</option> )}
</Select>

参考サイト

hirohiro

更新① 何について書く?

  • Enum取得方法に誤りがあったため修正内容を記載する(TypeScript)

内容

誤っていたところ

const [ enumValues , addEnum ] = useState([])
  const getEnums = async () => {
    const result = (await API.graphql(
      graphqlOperation(listEnum, {enum: 'Enum'})
    )) as GraphQLResult //←ここにEnumの型指定をしなくては下記のようエラーがでてビルド出来ない。
    addEnum(result.data.enum.enumValues.map(x => x.name))
  }
//-----------------
useEffect(() => {
    getEnums()
  },[])

正しい書き方は?

  • 自動生成される APIファイルに下記の様にEnumの型がある。
export type ListEnumsQuery = {
  enum?:  {
    __typename: "__Type",
    enumValues?:  Array< {
      __typename: "__EnumValue",
      name: string,
    } > | null,
  } | null,
};
  • その方をインポートして適用すれば問題なくビルドエラーが消える。
import { ListEnumsQuery  } from '../../API'
const [ enumValues , addEnum ] = useState([])
  const getEnums = async () => {
    const result = (await API.graphql(
      graphqlOperation(listEnum, {enum: 'Enum'})
    )) as GraphQLResult<ListEnumsQuery>
    addEnum(result.data.enum.enumValues.map(x => x.name))
  }
//-----------------
useEffect(() => {
    getEnums()
  },[])
このスクラップは2022/04/17にクローズされました