Next.js+GraphQL项目中获取对象label字段值的问题求助

问题根因 #

你遇到的问题由两点原因导致：

1. GraphQL Schema中countries字段定义为String!字符串类型，但你提交数据时直接将选择器返回的{value, label}对象传入，后端会自动将对象序列化为JSON字符串存储
2. 查询返回的countries是JSON字符串而非可直接访问属性的JS对象，直接渲染就会输出完整的JSON结构

解决方案 #

方案1：提交时仅存储国家label（推荐） #

该方案无需额外解析逻辑，存储和读取效率更高，适合仅需要展示国家名的场景：
修改create-post.js中的createNewPost方法，提交前替换countries为label值：

async function createNewPost() {
  if (!title || !content || !category || !countries || !createdAt) return
  const id = uuid() 
  const submitData = {
    ...post,
    id,
    // 仅存储国家label，符合Schema的String类型定义
    countries: post.countries.label
  }
  await API.graphql({
    query: createPost,
    variables: { input: submitData },
    authMode: "AMAZON_COGNITO_USER_POOLS"
  })
  router.push(`/posts/${id}`)
}

修改后my-posts.js中直接写{post.countries}即可正常展示国家名。

方案2：保留完整对象存储，读取时解析 #

如果业务需要同时保留国家的value和label值，可以不改提交逻辑，只修改读取时的渲染逻辑：
修改my-posts.js中国家字段的渲染代码，先将JSON字符串解析为JS对象再取label：

<h2 className="text-xl font-semibold">Author's Country: {
  post.countries ? JSON.parse(post.countries).label : ""
}</h2>

内容的提问来源于stack exchange，提问作者codingforthemoment