Graphql urql 每 n 秒重新获取一次

【问题标题】：Graphql urql refetch every n secondsGraphql urql 每 n 秒重新获取一次
【发布时间】：2022-10-20 14:24:56
【问题描述】：

我将 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 和无名站点。

谢谢你。

【问题讨论】：

标签： graphql urql

【解决方案1】：

我发现文档为此提供了一个功能。我为自己构建了一个钩子，可以在整个项目中使用它来进行任何查询。请注意查询，它必须是已经构建的 graphql 文档作为参数。

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;

【讨论】：