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

Posted 2023-03-08

【中文标题】带有graphql-request的SWR如何在swr中添加变量？

【英文标题】：SWR with graphql-request how to add variables in swr?

【发布时间】：2021-04-05 09:50:43

【问题描述】：

我想向我的 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 用于获取函数，我可以将变量放在哪里？

【参考方案1】：

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

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 仍然接受相同的两个参数：query 和variables。

【讨论】：

SWR documentation here 不鼓励这样做，会导致不必要的重新渲染。

【参考方案2】：

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)

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

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

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

【参考方案3】：

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

不要将对象传递给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>;