SWR with graphql-request 如何在swr中添加变量？

Question

我想向我的 swr 添加变量，这些变量使用 graphql 请求获取。这是我的代码

import { request } from "graphql-request";
import useSWR from "swr";

const fetcher = (query, variables) => request(`https://graphql-pokemon.now.sh`, query, variables);

export default function Example() {
  const variables = { code: 14 };
  const { data, error } = useSWR(
    `query GET_DATA($code: String!) {
                getRegionsByCode(code: $code) {
                  code
                  name
                }
              }`,
    fetcher
  );

  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

但我不知道如何将 variables 添加到 swr fetcher 中，因为我知道 useSWR(String, fetcher) 字符串用于查询，而 fetcher 用于 fetch 函数，我可以在哪里放置变量？

Answer 1

您可以使用 Multiple Arguments，您可以使用数组作为 useSWR react hook 的 key 参数。

import React from "react";
import { request } from "graphql-request";
import useSWR from "swr";

const fetcher = (query, variables) => {
  console.log(query, variables);
  return request(`https://graphql-pokemon.now.sh`, query, variables);
};
export default function Example() {
  const variables = { code: 14 };
  const { data, error } = useSWR(
    [
      `query GET_DATA($code: String!) {
          getRegionsByCode(code: $code) {
            code
            name
          }
        }`,
      variables,
    ],
    fetcher
  );

  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

函数 fetcher 仍然接受相同的 2 个参数：query 和 variables。

Answer 2

的解决方案对我没有帮助，因为它导致了无限循环。

不要将对象传递给 useSWR 函数，因为它们在每次重新渲染时都会发生变化。直接传递变量：

const fetcher = (query, variables) => {
  console.log(query, variables);
  return request(`https://graphql-pokemon.now.sh`, query, variables);
};
export default function Example() {
  const { data, error } = useSWR(
    [
      `query GET_DATA($code: String!) {
          getRegionsByCode(code: $code) {
            code
            name
          }
        }`,
      14,
    ],
    (query, coder => fetcher(query, { code })
  );

  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

Answer 3

这里是SWR作者！

同意这是一个必须拥有的关键功能，这就是为什么自 v1.1.0 起，SWR 密钥将自动且稳定地序列化。所以你可以安全地这样做：

useSWR(['query ...', variables], fetcher)

虽然 variables 可以是 JavaScript 对象（可以嵌套，也可以是数组），并且不会导致任何不必要的重新渲染。此外，序列化过程是稳定的，因此以下键是相同的，没有额外的请求：

// Totally OK to do so, same resource!
useSWR(['query ...', { name: 'foo', id: 'bar' }], fetcher)
useSWR(['query ...', { id: 'bar', name: 'foo' }], fetcher)

你也可以直接传递一个对象作为键，它会被传递给 fetcher：

useSWR(
  {
    query: 'query ...',
    variables: { name: 'foo', id: 'bar' }
  },
  fetcher
)

您可以通过安装最新版本的 SWR 进行试用，如果有任何问题，请告诉我:)

SWR with graphql-request 如何在swr中添加变量？

SWR with graphql-request how to add variables in swr?

reactjs

graphql

react-hooks

swr