将“ refetch”传递给上下文

时间:2020-03-14 01:41:45

标签: javascript reactjs typescript graphql

我正在尝试将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);

1 个答案:

答案 0 :(得分:0)

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