反應查詢 useQuery，GraphQL + fetch。 如何傳遞變量？

Question

我正在嘗試從我的Strapi GraphQl api獲取數據並對它們進行分頁。 為此，我需要傳遞變量。 我正在使用react-query並獲取 api 。

在這里，我聲明了我的變量和查詢。

const endpoint = "http://localhost:1337/graphql"
let limit: number = 10;
let start: number = 0;
export const QUERY = `
query fetchProducts ($limit: Int!, $start: Int!)  {
  products(limit: $limit, start: $start) {
    title
    price
    slug
    image {
      formats
    }
  }
}
`;

這是我獲取 function

  async function fetchData(endpoint: string, query: string, limit: number, start: number) {
    const res = await fetch(endpoint, {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({ query: query }),
    });
    const json = await res.json();
    const {
        data: { products },
    } = json;
    start += 10; //when refetching, it fetches another 10
    return products;
}

這是來自 react-query 的 useQuery 鈎子

const { data, status, refetch } = useQuery(["blog", limit, start], () => fetchData(endpoint, QUERY, limit, start), {
    keepPreviousData: true,
});

我收到錯誤：

未提供所需類型“Int！”的變量“$limit”

未提供所需類型“Int.”的變量“$start”。

所以我沒有正確傳遞變量。 我究竟做錯了什么？

Answer 1

從 react-query 特定的角度來看，它看起來不錯：

• 將所有變量作為查詢鍵的一部分
• 將它們正確傳遞給 queryFn

我不是 graphQL 專家，但是查看有關如何將 graphql 與fetch一起使用的示例博客文章，您需要在query旁邊傳遞variables作為fetch請求的body 。

就像是：

body: JSON.stringify({
  query: query,
  variables: { limit, start }
}),

我認為如果你使用 lightweigt 抽象，這會變得更容易一些，比如graphql-request ，這也是react-query 示例使用的。