T
TanStack•3y ago
conscious-sapphire

After mutation InvalidateQueries Doesn't work

const { mutate: onAdd } = useMutation(createPost, {
    onSuccess: async () => {
      await queryClient.invalidateQueries([QueryKeys.posts]);
      await queryClient.invalidateQueries([QueryKeys.myPostsList]);

      showToast({
        type: 'success',
        message: '게시물 등록에 성공하였습니다'
      });
      return router.push('/posts'); // Redirect to /posts
    },
    onError: () => {
      showToast({
        type: 'error',
        message: '게시물 등록에 실패하였습니다'
      });
    }
  });
const { mutate: onAdd } = useMutation(createPost, {
    onSuccess: async () => {
      await queryClient.invalidateQueries([QueryKeys.posts]);
      await queryClient.invalidateQueries([QueryKeys.myPostsList]);

      showToast({
        type: 'success',
        message: '게시물 등록에 성공하였습니다'
      });
      return router.push('/posts'); // Redirect to /posts
    },
    onError: () => {
      showToast({
        type: 'error',
        message: '게시물 등록에 실패하였습니다'
      });
    }
  });
I made the code which creates the post but it doesn't seem to refetch. It works only when I refreshed the page. Here is my useQuery code 
 const {
    data: posts,
    fetchNextPage,
    isFetchingNextPage,
    isFetching,
    isLoading
  } = useInfiniteQuery(
    [QueryKeys.posts, areaSelected, search],
    ({ pageParam = 0 }) => getPosts(pageParam, areaSelected, search),
    {
      getNextPageParam: (lastPage) =>
        !lastPage?.last ? lastPage?.nextPage : undefined,
      staleTime: 60000,
      onError(err) {
        if (err instanceof AxiosError)
          showToast({ type: 'error', message: err.message });
      }
    }
  );
 const {
    data: posts,
    fetchNextPage,
    isFetchingNextPage,
    isFetching,
    isLoading
  } = useInfiniteQuery(
    [QueryKeys.posts, areaSelected, search],
    ({ pageParam = 0 }) => getPosts(pageParam, areaSelected, search),
    {
      getNextPageParam: (lastPage) =>
        !lastPage?.last ? lastPage?.nextPage : undefined,
      staleTime: 60000,
      onError(err) {
        if (err instanceof AxiosError)
          showToast({ type: 'error', message: err.message });
      }
    }
  );
I don't understand what it doesn't work. If somebody knows I'd be happy to hear you.
2 Replies
conscious-sapphire
conscious-sapphire•3y ago
Which version are you using? If you're using v3, did you try await queryClient.invalidateQueries(QueryKeys.posts); instead of await queryClient.invalidateQueries([QueryKeys.posts]);. Could you also provide a reproduction sandbox?
conscious-sapphire
conscious-sapphireOP•3y ago
Yes I tried i am using 4 version

Did you find this page helpful?