Question

我试图每时让用户以“类似”的语气来回答所有询问,但迄今为止,尽管有该书,还是没有成功。

我有一个获得数据的构成部分:

  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;

Every time an user click on that button I d like to invalidate queries (because many screens shows the like button).

The console. 记录显示是成功的,但查询并不无效。

任何想法?

感谢

Answer 1

I 意外使用

const queryClient = new QueryClient();

而不是

const queryClient = useQueryClient();

<代码>new QueryClient(>>创建了一个新的反应频率客户(通常转至您的申请书上),这只应一次。

wheres useQueryClient returns a reference to the value that the react-query Client context wrapped around your app provides. You should use it inside your components.

Answer 2

此外,前面还没有提到另一个原因:

如果您使用<条码>,可在<条码>中选择<>。。摘自:

https://tanstack.com/query/latest/docs/react/guides/disabling-queries

问询将忽视质疑客户无效的问题。问询和回费,通常会导致盘问。

Answer 3

The two most common issues why query invalidation is not working are:

钥匙不匹配,因此,你试图使藏匿点中不存在的东西失效。检查牛肉有助于这里。通常,它是一个编号/范围的问题(例如,如果id是从ur里来的,那就是一种扼杀,但是在你的关键中,它有点)。您还可以手工点击“invalidate, 纽扣在“devtools”上,因此,你将看到每件工程无效。
<编码>queryClient在累犯中并不稳定。如果你在随后重新命名的部件的成文法内打上<条码>。确保电离层稳定。

Answer 4

就我而言,我必须做的是等待以下承诺:invalidate Queries在脱机之前返回(使用反应路线)。

Answer 5

Samil和Eliav思想为我共同努力:

QueryClient is only for initializing the QueryClientProvider.

const queryClient = new QueryClient();

useQueryClient is used everywhere else.

const queryClient = useQueryClient();

Answer 6

在我的案件中,由于我试图使另一页使用的询问无效(使用Query,使用这个案件是没有的)。

我有两种解决办法:

use refetchInactive option like this: queryClient.invalidateQueries(key, { refetchInactive: true }), which will refetch the data instead of "stale" it.
use refetchOnMount: true option when calling useQuery, which will refetch the data on mount regardless if it is stale.

Answer 7

贵重物品应在贵方之首上公布。 (pp.js或index.js)

抽样

import { QueryClient, QueryClientProvider } from  react-query ;

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

Answer 8

我有同样的问题,就我而言,问题是我进口错误的客户。

我使用了自动填写码,并意外地从wagmi而不是@tanstack/react-query进口。

Answer 9

在我的案件中,我试图在高于<代码>的构成部分中使用<代码>queryClient。 QueryClientProvider in the elementsmoto. 页: 1 h 载于<代码>总结的构成部分。 QueryClientProvider。

<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>

Answer 10

在我的案件中,invalidate Queries在坐标为热载(改动后)之后没有工作。

非常令人厌恶的行为,但是,在你看到热负荷之前,它就是一种pri。

Answer 11

当使用<代码>ensure QueryData从海滩上检索数据(如果有的话)或以其他方式检索:一个令人感兴趣的挑战表面,<代码>invalidate Queries不会造成数据无效?

Thankfully, React Query has a different API for this particular situation:

queryClient.removeQueries({ queryKey: ["queryKey"] });

Answer 12

如果你在<条码>中恢复基于承诺的职能,那么你提出的问题可能不会被适当删除的另一个原因。 Fn 。

In my case, I made the mistake of calling the promise-based function without returning it. For example:

function useUpdateObject(id) {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (newObj) => {
      // MISTAKE! Need to return ky.put(...)
      ky.put(API_ROUTE, { json: newObj }).json()
    },
    onSuccess: () => {
      queryClient.invalidateQueries({
        queryKey: ["object", id],
      });
    },
  });
}

Answer 13

我也存在同样的问题,即一切都在当地正确工作,而不是生产。问题在于我的Nginx服务器藏匿,无法更新数据。为了确定这一点,我必须加上指令。

add_header  Cache-Control   no-cache  always;

纽约总部

Answer 14

我的问题是:

const { isLoading, data } = useQuery(
  CACHE_KEY,
  async () => apiFunction(foo)
);

事实上,我需要:

const { isLoading, data } = useQuery(
  CACHE_KEY,
  async () => await apiFunction(foo)
);

非常微妙和容易误导!

Answer 15

<><>UPDATE: 我提出的问题是,我错误地设立了“行为标准”如下:

export default function App() {
  const queryClient = new QueryClient();
  return (
    <QueryClientProvider client={queryClient}>
      ...
    </QueryClientProvider>
  );
}

九:

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      ...
    </QueryClientProvider>
  );
}

微妙,但改变一切。

我的问题是,我有<代码>react-router-dom suseNavigate(.navigate(),即:

const router = useRouter();
router.push(`${path}?field=${name}`);

清除了海滩或翻新部件,但重要效果是清除海滩(可以通过React Query Devtools观察)。

由于海滩已经清除,但部件的滞留,因此,在<条码>上填写的“质量标准”(

这正是这里描述的准确问题:

我不知道如何解决这一问题,因此,我的“工作”是尽可能避免使用<代码>navigate()。尽管这不是理想,但我认为我稍后将再次讨论这一问题。 (千美元)

react-query v5.12.2
react-router-dom v6.16.0

友情链接