带有graphql-request的SWR如何在swr中添加变量？

问题描述

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

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 函数，我可以将变量放在哪里？

解决方法

您可以使用 Multiple Arguments，您可以使用数组作为 key 反应钩子的 useSWR 参数。

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。