Nach Mutation in der Reaktionsabfrage erneut validieren: Schritt-für-Schritt-Anleitung

Question

Ich habe die grundlegende Implementierung des Datenabrufs und der Datenaktualisierung mithilfe von react-query in einer next.js-Anwendung implementiert. Mein Ziel ist es, die Daten nach der Mutation zu aktualisieren. Derzeit werden die Daten nur aktualisiert, wenn die Registerkarte aktualisiert wird. Ohne Benutzerinteraktion wird sich jedoch nichts ändern.

Ich habe festgestellt, dass die Datenaktualisierung bei der Registerkartenaktualisierung auf das Standardverhalten zurückzuführen ist. refetchOnWindowFocus

Aber wie wird es ungültig, nachdem die Daten auf der Serverseite aktualisiert wurden? Hier ist der entsprechende Codeausschnitt.

Hinweis: Ich verwende Hydration, um die React-Query SSR-Funktionalität zu nutzen. Dokumentation

_app.jsx

const [queryClient] = React.useState(() => new QueryClient());

  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={pageProps.dehydratedState}>
          <Component {...pageProps} />
      </Hydrate>
    </QueryClientProvider>

Home.jsx

const {data} = useQuery({
    queryKey: [queryKeys.key],
    queryFn: fetchData,
    staleTime: 1000 * 10, // this doesn't affect on anything
    //refetchInterval: 2000, this updates every 2 seconds
  });

  return (
    <div>
      <Article articles={data} />
    </div>
  );
   export const getServerSideProps = async () => {
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery([queryKeys.key], fetchData);
  return { props: { dehydratedState: dehydrate(queryClient) } };
};

article.jsx

const Article = ({articles}) => {
  const [title, setTitle] = useState("");
  const queryClient = new QueryClient();

  const { mutate } = useMutation({
    mutationFn: async (article) => {
      return await axios.post(url, article);
    },
    onSuccess: (data) => {
      console.log("data", data) // data is displayed, onSuccess is called
      queryClient.invalidateQueries({ queryKey: [queryKeys.key] });
    },
  });

  const changeTitleHandleClick = () => {
    mutate({
      id: new Date(),
      title: title
    });
    setTitle("");
  };
  ....

Jede Hilfe wäre sehr dankbar

Updates: Aktualisierungen alle 2 Sekunden, aber dadurch wird alle 2 Sekunden eine Netzwerkanfrage ausgelöst, daher bin ich mir nicht sicher, ob dies eine bewährte Methode für die erneute Validierung ist. refetchInterval：2000

Update: wo ich keinen Schlüssel spezifiziere, sondern alle Abfragen auslöse. Aber selbst dann wird es nicht aktualisiert. Warum? onSuccess方法内的控制台在突变时显示，这意味着逻辑有问题，因为即使密钥不同，这也应该有效：queryClient.invalidateQueries()

Answer 1

您实现突变的方式，它应该在成功突变后重新获取查询：

onSuccess: () => {
  queryClient.invalidateQueries({ queryKey: [queryKeys.key] });
},

如果这不起作用，则说明您的突变不成功。检查onSuccess回​​调是否被调用。

如果调用 onSuccess 回调，但未重新提取您的查询，则可能意味着 queryKey 不匹配。出于测试目的，请尝试将过滤器扩大到：

queryClient.invalidateQueries()

应该重新获取所有查询。如果有效，您就知道您的 queryKey 过滤器不匹配。

仔细看看，你正在失效：

queryKey: [queryKeys.key]

但是在您的自定义挂钩中，您正在使用：

queryKey: [queryKeys.articles]

所以看起来它们确实不同，因此不匹配。另外，请务必使用 @tanstack/react-query-devtools 来更好地了解缓存中的查询和键。

Answer 2

问题是在组件 Article.jsx 中，我在每个渲染中创建一个新的 QueryClient，因此它获得了一个新的缓存，因此没有更新。
相反，我必须使用 useQueryClient 挂钩，它返回当前实例。
const queryClient = useQueryClient();