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

dldeef67  于 2023-01-27  发布在  React
关注(0)|答案(7)|浏览(234)

我试图无效查询每次用户按下按钮“喜欢”刷新所有查询,但迄今为止没有成功,尽管以下文档。
我有一个获取数据的组件:

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,但查询不会无效。
你知道吗?
谢谢

t9aqgxwy

t9aqgxwy1#

另外,还有一个原因之前没有提到:
如果您在useQuery中使用了enabled选项,则invalidateQueries会忽略此类查询。
https://react-query.tanstack.com/guides/disabling-queries
查询将忽略查询客户端invalidateQueries和refetchQueries调用,这些调用通常会导致查询重取。

7y4bm7vi

7y4bm7vi2#

我不小心用了

const queryClient = new QueryClient();

代替

const queryClient = useQueryClient();

new QueryClient()创建一个新的react-query客户端(通常会传递到应用程序 Package 的上下文),此操作应仅执行一次。
wheres useQueryClient返回对应用周围的react-query客户端上下文提供的值的引用。

lrpiutwd

lrpiutwd3#

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

  • 键不匹配,因此您正在尝试使该高速缓存中不存在的内容无效。检查devtools会有所帮助。通常,这是number/string的问题(例如,如果一个id来自url,在那里它是一个字符串,但是在你的key中,它是一个数字).你也可以尝试手动点击devtools中的invalidate按钮,因此您将看到失效本身起作用。
  • queryClient在重新呈现后不稳定。如果在组件的render方法内调用new QueryClient(),然后重新呈现,则会发生这种情况。请确保queryClient稳定。
hgtggwj0

hgtggwj04#

Samil和Eliav的想法结合起来对我很有效:

  1. QueryClient仅用于初始化QueryClientProvider。
const queryClient = new QueryClient();
  1. useQueryClient用于其他任何地方。
const queryClient = useQueryClient();
gxwragnw

gxwragnw5#

在我的例子中,我所要做的就是等待invalidateQueries返回的承诺,然后再导航离开(使用react-router)。

wz8daaqr

wz8daaqr6#

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'));
pdkcd3nj

pdkcd3nj7#

在我的例子中,我试图在比QueryClientProvider在组件树中的级别更高的组件中使用queryClient,而在由QueryClientProvider Package 的组件中必须使用useQueryClient钩子。

<MyFirstComponent> <!-- I was using it in My FirstComponent. It is outside the QueryClient Context so it is not going to work there -->
  <QueryClientProvider>
    <MySecondComponent /> <!-- You can use the queryClient here -->
  </QueryClientProvider>
</MyFirstComponent>

相关问题