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

问题描述

每次用户按下“喜欢”按钮以刷新所有查询时，我都试图使查询无效，但尽管遵循了文档，但到目前为止没有成功。

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

  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;

每次用户单击该按钮时，我都希望使查询无效（因为许多屏幕都显示了类似的按钮）。

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

任何想法？

谢谢

标签： reactjsreact-nativereact-query

查询失效不起作用的两个最常见问题是：

键不匹配，因此您试图使缓存中不存在的内容无效。检查 devtools 在这里有帮助。通常，这是数字/字符串的问题（例如，如果 id 来自 url，它是一个字符串，但在您的键中，它是一个数字）。您也可以尝试手动单击invalidatedevtools 中的按钮，这样您就会看到失效本身有效。
在queryClient重新渲染中不稳定。如果您new QueryClient()在随后重新渲染的组件的渲染方法内部调用，就会发生这种情况。确保 queryClient 是稳定的。

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

问题描述

解决方案

推荐阅读