无效查询不起作用[React-Query]

Question

每当用户按下按钮"likes“刷新所有查询时，我都会尝试使查询无效，但尽管遵循文档，到目前为止仍未成功。

我有一个获取数据的组件：

  const {
    data: resultsEnCours,
    isLoading,
    isError,
  } = useQueryGetEvents("homeencours", { currentEvents: true });

这是一个自定义钩子，看起来像这样：

const useQueryGetEvents = (nameQuery, params, callback) => {
  const [refetch, setRefetch] = React.useState(null);
  const refetchData = () => setRefetch(Date.now()); // => manual refresh
  const { user } = React.useContext(AuthContext);
  const { location } = React.useContext(SearchContext);

  const { isLoading, isError, data } = useQuery(
    [nameQuery, refetch],
    () => getFromApi(user.token, "getEvents", { id_user: user.infoUser.id, ...params }),
    // home params => "started", "upcoming", "participants"
    {
      select: React.useCallback(({ data }) => filterAndSortByResults(data, location, callback), []),
    }
  );

  return { data, isLoading, isError, refetchData };
};

export default useQueryGetEvents;

我还有另一个组件"ButtonLikeEvent“，它允许用户喜欢或不喜欢某个事件：

import { useMutation, useQueryClient } from "react-query";
import { postFromApi } from "../../api/routes"; 
...other imports


const ButtonLikeEvent = ({ item, color = "#fb3958" }) => {
  const queryClient = useQueryClient();
  const {
    user: {
      token,
      infoUser: { id },
    },
  } = React.useContext(AuthContext);

  const [isFavorite, setIsFavorite] = React.useState(item.isFavorite);
  const likeEventMutation = useMutation((object) => postFromApi(token, "postLikeEvent", object));
  const dislikeEventMutation = useMutation((object) =>
    postFromApi(token, "postDislikeEvent", object)
  );

  const callApi = () => {
    if (!isFavorite) {
      likeEventMutation.mutate(
        { id_events: item.id, id_user: id },
        {
          onSuccess() {
            queryClient.invalidateQueries();
            console.log("liked");
          },
        }
      );
    } else {
      dislikeEventMutation.mutate(
        { id_events: item.id, id_user: id },
        {
          onSuccess() {
            queryClient.invalidateQueries();
            console.log("disliked");
          },
        }
      );
    }
  };

  return (
    <Ionicons
      onPress={() => {
        setIsFavorite((prev) => !prev);
        callApi();
      }}
      name={isFavorite ? "heart" : "heart-outline"}
      size={30}
      color={color} //
    />
  );
};

export default ButtonLikeEvent;

每次用户单击该按钮时，我都希望使查询无效(因为许多屏幕都显示like按钮)。

成功时会显示console.log，但查询不会无效。

有什么想法吗？

谢谢

Answer 1

查询失效的两个最常见的问题是：

• 键不匹配，因此您正在尝试使缓存中不存在的内容无效。检查devtools在这方面很有帮助。通常，这是数字/字符串的问题(例如，如果一个id来自url，它是一个字符串，但在你的key中，它是一个数字)。您也可以尝试手动单击devtools中的invalidate按钮，这样您就可以看到本身无效。

• queryClient在重新渲染时并不稳定。如果在组件的render方法中调用new QueryClient()，然后重新呈现，就会发生这种情况。确保queryClient稳定。

Answer 2

应该在应用程序的顶部实例化QueryClient。(app.js或index.js)

示例

import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();
ReactDOM.render(
    <QueryClientProvider client={queryClient}>
    <App />
    </QueryClientProvider>,
document.getElementById('root'));