Closed2022/04/17にクローズ2

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

GraphQL

Next.js

hiro

何について書く？

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>

参考サイト

hiro

更新① 何について書く？

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にクローズされました