具有动态参数的提供程序内的 react-query useQuery

Question

我正在使用 React 查询，因为它非常强大，但我正在努力尝试在提供商内部的许多组件之间共享我的数据。我想知道这是否是正确的方法。

PostsContext.js

import React, {useState} from 'react';
import { useTemplate } from '../hooks';

export const PostsContext = React.createContext({});

export const PostsProvider = ({ children }) => {
    const fetchTemplate = useTemplate(templateId);
   
    const context = {
        fetchTemplate,
    };

    return <PostsContext.Provider value={context}>{children}</PostsContext.Provider>;
};

useTemplate.js

import React from 'react';
import { useQuery } from 'react-query'
import { getTemplateApi } from "../api";

export default function useTemplate(templateId) {
    return useQuery(["templateId", templateId], () => getTemplateApi(templateId), {
        initialData: [],
        enabled:false,
    });
}

然后是我使用上下文的组件

function Posts () {
    const { fetchTemplate } = useContext(PostsContext);

    console.log(fetchTemplate.isLoading)

    fetchTemplate.refetch() <---- how can I refetch with a different templateId?

    return {...}

}

我正在寻找一种方法来使用不同的 templateId 动态调用我的挂钩，但该挂钩位于提供程序内，因此我可以在我的整个应用程序中使用它。这是正确的方法吗？我有很深的嵌套组件，我不想支撑钻头。

Answer 1

你不需要额外的方式来分发你的数据，比如反应上下文。只需在任何需要的地方使用相同的键调用 useQuery，react query 就会完成剩下的工作。最好在自定义挂钩中将其抽象化。

refetch 只应在您想使用完全相同的参数重新获取时使用。对于更改参数，最好这样做。使它们成为您的查询键的一部分，因为只要查询键更改，反应查询就会重新获取。

因此在您的示例中，您只需要使用不同的 templateId 调用 useTemplate。 templateId 本身是本地状态（用户选择了哪个模板），如何使其全局可用取决于您。

具有动态参数的提供程序内的 react-query useQuery

react-query useQuery inside a provider with with dynamic parameters

reactjs

react-query