NextJS 未正确使用变量从 GraphQL CMS 获取数据

Question

这是我第一次将 GraphQL 与 NextJS 结合使用。我想要做的是使用客户端 URL 中的

id

参数从后端获取数据。我按照文档创建了一个

graphql.js

。这是代码

import { ApolloClient, InMemoryCache, gql } from "@apollo/client";

const client = new ApolloClient({
    uri: 'https://ap-south-1.cdn.hygraph.com/content/<my_hash>/master',
    cache: new InMemoryCache(),
});

const GET_URDUS = gql`
    query GetUrdus {
    urdus {
        id
        letter
        }
    }
`;

export async function getUrdus() {
    const { data } = await client.query({
        query: GET_URDUS,
    });
    return data.urdus;    
}

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

export async function getUrduItems(id) {
    try {
        const { data } = await client.query({
            query: GET_URDU_ITEM,
            variables: { id }
        });
        return data.urdu;
    } catch(error) {
        console.error(error);
        throw new Error('Failed to fetch data');
    }
}

GET_URDUS

查询工作完全正常。问题出在

GET_URDU_ITEM

。我在另一个像这样的组件中使用

getUrduItems

函数。

"use client"
import { useSearchParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { getUrduItems } from "@/components/api/graphql";

const UrduDetails = ({params}) => {
    const { id } = params;
    console.log("ID from params:", id);
    const [urduItems, setUrduItems] = useState(null);

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

        fetchData()
    }, [id])

    if (!urduItems) {
        return <p>No data found</p>
    }

    return (
        <div className="flex flex-col m-10">
        {urduItems ? (
            <div className="flex flex-col">
                <h1 className="text-4xl">{urduItems.letter}</h1>
                <p className="text-lg">{urduItems.hindi}</p>
                <p className="text-lg">{urduItems.english}</p>
            </div>
        ): (
            <p>No data found.</p>
        )}
      </div>
    )
}

export default UrduDetails;

当我查看浏览器控制台时，我可以看到 ID 已从 URL 参数中正确获取。但是，当它向 API 发出请求时，服务器会返回 400 代码。这是它提出的要求

{"operationName":"GetUrduItems","variables":{"id":"<correct_id>"},"query":"query GetUrduItems($id: String!) {\n  urdu(where: {id: $id}) {\n    english\n    hindi\n    id\n    letter\n    __typename\n  }\n}"}

这是服务器发送的响应。

{"errors":[{"message":"[line: 2] expecting type 'ID' for variable 'id', 'String!' is given"}],"data":null,"extensions":{"requestId":"yCBAynBm_sbADM4B0BjSs"}}

我很确定问题出在前端发出请求的方式上。服务器未收到正确的 ID 变量。但是，我不知道如何解决这个问题。如有任何帮助，我们将不胜感激！

Answer 1

我明白了！确实是菜鸟错误。我使用

String

类型作为 id，而它应该是

ID

类型。这是

graphql.js

的更新代码：

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

其他一切都是一样的，现在我可以正确地从后端获取数据。这是更详细的解释： 在 GraphQL 参数化查询中使用 ID