NextJS结合GraphQL CMS获取数据时变量类型不匹配问题

问题根源很明确：后端的urdu查询要求id参数类型为ID，但你的前端查询中把变量$id声明成了String!，导致类型校验失败返回400错误。

具体修改步骤： #

1. 修正GraphQL查询的变量类型
   打开graphql.js，将GET_URDU_ITEM中的变量类型从String!改为ID!：

   export const GET_URDU_ITEM = gql`
       query GetUrduItems($id: ID!) {
           urdu(where: { id: $id }) {
               english
               hindi
               id
               letter
           }
       }
   `;
   

   GraphQL的ID类型支持字符串形式的标识符（URL参数获取的id本身就是字符串），只要声明正确，后端会自动解析，无需额外转换变量值。

2. 修复组件中的语法错误
   你的UrduDetails组件里useEffect内部的fetchData函数存在语法错误（大括号位置错误），修正后才能正常执行：

   useEffect(() => {
       const fetchData = async () => {
           if(id) {
               try {
                   const data = await getUrduItems(id);
                   setUrduItems(data);
               } catch (error) {
                   console.error("Not found");
                   setUrduItems(null);
               } 
           }
       };
   
       fetchData()
   }, [id])
   

做完这两处修改后，重新请求API应该就能正常获取数据了。

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