React 查询通过索引键更新缓存数据

Question

如何通过索引键更新现有记录？

我对 React Query 不太熟悉。

单击按钮时，将触发 onClickHandler 通过其索引键更新对象值。

import {useQuery, useQueryClient} from '@tanstack/react-query';

const {
  data: comments,
  isError,
  isLoading
} = useQuery({
      queryKey: ['comments'],
      queryFn: async () => {
         const response = await fetch(`https://jsonplaceholder.typicode.com/posts/1/comments`);
         return response.json();
      }
});

const onClickHandler = (index) => {
   const previousData = queryClient.getQueriesData(['comments']);

   queryClient.setQueryData(['comments'], (comments) => {

      comments.map((r, i) => {

         r['is_shown'] = false;
       
         if(i === index) {
            r['is_shown'] = true;
         }

         return r;

      });

   });
};

Answer 1

您忘记在 setQueryData 函数中返回新数据。