Javascript React Query，useQuery正在传递过时的数据

我只是第一次尝试react查询，现在我遇到了一些让我非常沮丧的事情

以下代码：

const userSettingsQueryClientKey = "userSettings_queryClient";

export const UserSettingsContextProvider: React.FC = ({ children }) => {

    const queryClient = useQueryClient();

    const { data } = useQuery(userSettingsQueryClientKey, async () => {
        const request = new GetRequest<UserSettings>("/UserSettings/Get");
        const result = await request.get();
        return result.payload;
    });

    const { mutateAsync } = useMutation(async (settings: UserSettings) => {
        const updateRequest = new VoidPostRequest<UserSettings>("/UserSettings/Update");
        await updateRequest.post(settings);
        return settings;
    }, {
        onSuccess: (newData) => {
            queryClient.setQueryData(userSettingsQueryClientKey, newData);
        }
    })

    return (
        <UserSettingsContext.Provider value={{
            settings: { ...data },
            updateSettings: async (settings: UserSettings) => {
                await mutateAsync(settings);
            },
        }}>
            {children}
        </UserSettingsContext.Provider>
    );
}

工作的一部分

我已经正确地调试了我的代码好几次了。在我的应用程序流程中：

设置被初始化为

{useOldVersion:true}

在某个时间点，用户将单击复选框，并使用

{useOldVersion:false}

变异正确地将此更新发布到服务器

调用onSuccess，将查询状态正确设置为新值

然而，在

onSuccess

之后，

const{data}

我从我的

useQuery

调用中得到的仍然是旧的、陈旧的数据。我用调试器验证了前面的所有步骤，现在我真的不确定哪里出错了

---

如何从

useQuery

调用中正确获取新状态的任何建议？

您可以尝试使用QueryClient公开的方法。 您的代码看起来像：

 const { mutateAsync } = useMutation(async (settings: UserSettings) => {
        const updateRequest = new VoidPostRequest<UserSettings>("/UserSettings/Update");
        await updateRequest.post(settings);
        return settings;
    }, {
        onSuccess: (newData) => {
            queryClient.setQueryData(userSettingsQueryClientKey, newData);
            queryClient.refetchQueries(userSettingsQueryClientKey);// this is new

        }
    })

const{mutateAsync}=useMutation（异步（设置：UserSettings）=>{
const updateRequest=new VoidPostRequest（“/UserSettings/Update”）；
等待updateRequest.post（设置）；
返回设置；
}, {
onSuccess：（newData）=>{
setQueryData（userSettingsQueryClientKey，newData）；
queryClient.refetchQueries（userSettingsQueryClientKey）；//这是新的
}
})

通知查询已更改的建议方法是使用

queryClient.invalidateQueries

您可以在RQ中看到一个示例

const{mutateAsync}=useMutation(
异步（设置：用户设置）=>{
const updateRequest=new VoidPostRequest（“/UserSettings/Update”）；
等待updateRequest.post（设置）；
返回设置；
},
{
onSuccess：（newData）=>{
setQueryData（userSettingsQueryClientKey，newData）；
queryClient.invalidateQueries（userSettingsQueryClientKey）；
}
}
);

我刚刚发现了我的一个非常愚蠢的错误。所有的答案都是有帮助的，但始终找不到问题所在

我的应用程序如下所示：

export default function App() {

  const queryClient = new QueryClient();

  return (
    <QueryClientProvider client={queryClient}>
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <MyComponent />
        <h2>Start editing to see some magic happen!</h2>
      </div>
    </QueryClientProvider>
  );
}

导出默认函数App（）{
const queryClient=new queryClient（）；
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}

这意味着查询客户机将不断重新生成

当它像这样移出时，它会工作，因此该值会被保留：

const queryClient = new QueryClient();

export default function App() {

  return (
    <QueryClientProvider client={queryClient}>
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <MyComponent />
        <h2>Start editing to see some magic happen!</h2>
      </div>
    </QueryClientProvider>
  );
}

const queryClient=new queryClient（）；
导出默认函数App（）{
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}

您的代码看起来不错，来自突变响应的更新是一个有效的概念，请参阅：一些小事情是：mutateAsync需要try/catch，使用mutate，除非您需要承诺链接。我从未将react query中的数据放入上下文，因为当需要数据时，您可以调用useQuery（或自定义挂钩抽象）。它还将使数据保持最新，因为它会在新订户挂载时触发重新蚀刻。你能制作一个代码沙盒复制来显示你的问题吗？我可以向你保证，突变后的更新确实有效谢谢，我试过了，但似乎也没用。这几乎就像无论我在onSuccess中尝试了什么，查询本身都不关心。我还尝试了invalidateQueries，并在查询中的GET回调中设置了一个断点，但它也没有被触发。

const queryClient = new QueryClient();

export default function App() {

  return (
    <QueryClientProvider client={queryClient}>
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <MyComponent />
        <h2>Start editing to see some magic happen!</h2>
      </div>
    </QueryClientProvider>
  );
}