我不明白为什么queryClient.getQueryData()返回未定义（React Query）

Question

所以我有一个表单组件，我在其中存储一个值，然后将其保存到服务器。保存到服务器可以与 useMutation 配合使用，但是当我使用 getQueryData 来手动更新 React Query 维护的查询状态时，我得到了未定义的信息。

这是该组件的代码：

import { createAnecdote } from "../requests";
import { useMutation, useQueryClient } from "react-query";

const AnecdoteForm = () => {
    const queryClient = useQueryClient();

    const newAnecMutation = useMutation(createAnecdote, {
      onSuccess: (newAnecdote) => {
        const anecdotes = queryClient.getQueryData("anecdotes");
        console.log(anecdotes);
        queryClient.setQueryData("anecdotes", anecdotes.concat(newAnecdote));
      },
    });

    const onCreate = async (event) => {
      event.preventDefault();
      const content = event.target.anecdote.value;
      event.target.anecdote.value = "";
      newAnecMutation.mutate({ content, votes: 0 });
    };

    return (
      <div>
        <h3>create new</h3>
        <form onSubmit={onCreate}>
          <input name="anecdote" />
          <button type="submit">create</button>
        </form>
      </div>
    );
};

export default AnecdoteForm;

这是index.js的代码：

import React from "react";
import ReactDOM from "react-dom/client";
import { QueryClient, QueryClientProvider } from "react-query";
import App from "./App";

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root")).render(
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
);

这是应用程序组件的代码：

import AnecdoteForm from "./components/AnecdoteForm";
import Notification from "./components/Notification";
import { useQuery } from "react-query";
import { getAnecdotes } from "./requests";

const App = () => {
    const handleVote = (anecdote) => {
      console.log("vote");
    };

    const result = useQuery("notes", getAnecdotes, {
      refetchOnWindowFocus: false,
    });

    if (result.isLoading) {
      return <div>loading data...</div>;
    } else if (result.isError) {
      return (
        <div>anecdote service not available due to problems in the server</div>
      );
    }

    const anecdotes = result.data;

    return (
      <div>
        <h3>Anecdote app</h3>

        <Notification />
        <AnecdoteForm />

        {anecdotes.map((anecdote) => (
          <div key={anecdote.id}>
            <div>{anecdote.content}</div>
            <div>
              has {anecdote.votes}
              <button onClick={() => handleVote(anecdote)}>vote</button>
            </div>
          </div>
        ))}
      </div>
    );
  };

  export default App;

我期待来自服务器的数据：

{
    "anecdotes": [
      {
        "content": "If it hurts, do it more often",
        "id": "47145",
        "votes": 0
      },
      {
        "content": "Adding manpower to a late software project makes it later!",
        "id": "21149",
        "votes": 0
      },
      {
        "content": "The first 90 percent of the code accounts for the first 90 percent of the development time...The remaining 10 percent of the code accounts for the other 90 percent of the development time.",
        "id": "69581",
        "votes": 0
      }
  ]
}

Answer 1

您的代码中似乎可能存在错误。在应用程序组件中，当您调用 useQuery 时，您正在使用“轶事”的查询注释。这会导致您在突变的 onSuccess 回调中使用 queryClient.getQueryData(“轶事”) 时获取数据的问题。

要解决此问题，您应该更改应用程序组件中的 useQuery 调用。通过将查询密钥更新为来使用它；

const 结果 = useQuery("轶事" getAnecdotes, { 重新获取窗口焦点；错误的， });

通过将“notes”替换为“anecdotes”作为查询键，useQuery 挂钩将正确。管理来自服务器的数据。因此，您的 getQueryData 调用，在突变 onSuccess 回调中应该按预期运行。