Graphql-urql每n秒重新蚀刻一次

Question

Im使用Typescript、React和graphql与urql客户端库。

我的查询看起来像这样：

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

这就是我所说的查询：

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

问题：

如何在不重新加载页面的情况下每n秒重新刷新一次？

我的后端读取JSON文件，它们会持续更新。现在我已经查看了这里的文档，还查看了一些Stackoverflow和无名称网站。

谢谢。

Answer 1

我发现文档提供了一个函数。我为自己构建了一个钩子，以便在整个项目中对任何查询使用它。因为有了query参数，它必须是已经构建的graphqlDocumentNode作为参数。

您可以像这样为每个查询导入它们：

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);