将“refetch”传递给上下文答案

【问题标题】：Passing a `refetch` to a Context将“refetch”传递给上下文
【发布时间】：2020-06-25 23:23:20
【问题描述】：

我正在尝试将来自 useQuery() 的重新获取传递到上下文中，以便我可以从上下文中调用重新获取。我无法找出正确的类型，所以我要么遇到类型不匹配的问题，要么 IDE 没有抱怨，但应用程序因类型不匹配而中断。当浏览器崩溃时，它会报告 refetch() 不是一个函数。

我只想将 refetch 传递给 Context 并能够调用它。任何帮助表示赞赏。

IDE typings error

相关代码如下：

Context 道具的接口：

interface ConfirmationModalContextInterface {
   ...
   setRefetch: (refetch: (variables?: Record<string, any>) => Promise<ApolloQueryResult<any>>) => void;
}

上下文确认模态界面：

interface ConfirmationModalProps {
   ...
   refetch: (variables?: Record<string, any>) => Promise<ApolloQueryResult<any>> | undefined;
}

原refetch实例：

const {loading, error, data, refetch} = useQuery(queries.USER_POSTS);

上下文道具的设置：

const confirmModalContext = useContext(ConfirmationModalContext);
const {..., setRefetch} = confirmModalContext;

setRefetch(refetch);

【问题讨论】：

标签： javascript reactjs typescript graphql

【解决方案1】：

如错误所示，refetch 可能未定义，但您的界面并未考虑到这一点。也就是说，没有必要像这样传递refetch 函数——只需在您需要的任何组件中重用相同的useQuery 钩子即可。您可以在多个组件中使用相同的 useQuery 钩子，而不会触发多个请求。

【讨论】：

谢谢丹尼尔。如何在不触发多个请求的情况下在多个组件中使用相同的 useQuery 挂钩？
这是 Apollo 客户端的默认行为，除非您将 fetchPolicy 明确更改为 network-only。如果它是相同的查询和相同的变量，它只会被获取一次——后续请求将从缓存中完成。同样，如果两个或多个组件最初同时请求相同的查询，则只会将其发送到服务器一次。