reactjs Graphql urql每n秒重取一次

snz8szmq 于 2023-02-08 发布在 React

关注(0)|答案(1)|浏览(160)

我正在使用Typescript、React和graphql以及urql客户端库。
我的查询如下所示：

query objectId($id: Int!) {
  object(id: $id) {
      id
      name
      __typename
      }
  }

下面是我调用查询的方式：

const [{ data }] = useObjectIdQuery({ variables: { id }, pause: !id });

- 问题：**

我怎样才能每隔n秒重取一次而不重新加载页面？
我的后端读取JSON文件，它们会不断更新。现在我已经看了here的文档，也看了一些Stackoverflow和无名网站。
谢谢你。

reactjs

来源：https://stackoverflow.com/questions/73983092/graphql-urql-refetch-every-n-seconds

1条答案

按热度按时间

70gysomp1#

我发现文档中提供了一个函数，我自己创建了一个钩子，可以在整个项目中使用它进行任何查询，只是要小心查询参数，它必须是已经构建的graphql DocumentNode as参数。
您可以按如下方式为每个查询导入它们：

import { ObjecIdDocument } from "../../graphql";

graphql路径在您的情况下可能不同。
这是完整的Hook：

import { useEffect } from "react";
import { useQuery } from "urql";
import { DocumentNode } from "graphql";

const useRefreshingQuery = (variables: object, query: DocumentNode, delayInSec: number, pause: boolean) => {
    const [result, reexecuteQuery] = useQuery({
        query: query,
        variables: variables,
        pause: pause,
    });
    useEffect(() => {
        if (result.fetching) {
            return;
        }
        const timerId = setTimeout(() => {
            reexecuteQuery({ requestPolicy: "network-only" });
        }, delayInSec * 1000);

        return () => clearTimeout(timerId);
    }, [result.fetching, reexecuteQuery, variables]);
    return result;
};

export default useRefreshingQuery;

您可以像这样使用Hook：

import { ObjecIdDocument } from "../../graphql"; 

const result = useRefreshingQuery({ id: UID }, ObjectIdDocument, 10, !UID);

赞(0）回复(0）举报 2023-02-08

我来回答

reactjs Graphql urql每n秒重取一次

1条答案

相关问题

热门标签

最新问答