RTK Query - Cache invalidation after HTTP Delete causes 404

[fvkramer]

I have the following example api slice:

const postService = apiService.injectEndpoints({
  endpoints: (builder) => ({
    fetchPosts: builder.query({
      query: () => `/posts`,
      providesTags: (result = [], error, arg) => [
        "Posts",
        ...result.map(({ id }) => ({ type: "Posts", id })) 
      ],  
    }), 
    getPost: builder.query({
      query: post => `/posts/${post.id}`,
      providesTags: (result, error, arg) => [{ type: "Posts", id: post.id }]
    }), 
    addPost: builder.mutation({
      query: (data) => ({
        url: `/posts`,
        method: "POST",
        body: data.payload
      }), 
      invalidatesTags: [SHIFTS]
    }), 
    updatePost: builder.mutation({
      query: (post) => ({
        url: `/posts/${post.id}`,
        method: "PATCH",
        body: post
      }), 
      invalidatesTags: (result, error, arg) => [{ type: "Posts", id: post.id }]
    }), 
    deletePost: builder.mutation({
      query: (post) => ({
        url: `"/posts/${post.id}`,
        method: "DELETE"
      }), 
      invalidatesTags: (result, error, arg) => [{ type: "Posts", id: post.id }]
    }), 
  }), 
  overrideExisting: false,
})

If a user views a post, the useGetPostQuery hook is run and the post is fetched with tag { type: "Posts", id: post.id }.
Immediately after, if a user deletes the same post, this invalidates the cache for posts and the specific /posts/${post.id} GET, causing a refetch of the /posts/${post.id} resource which 404s because the resource no longer
exists.

1. GET /posts/1
2. DELETE /posts/1
3. RTK Query -> GET /posts/1 -> 404

Is there a way to prevent this? I still need the delete to invalidate the fetchAll cache so users can see updates on screen when deleting.

[phryneas]

You would probably need to add another tag type just for that purpose, or add an imaginary "LIST" id to your fetchAll query and only invalidate that in your delete mutation.

[fvkramer]

So pattern for above example would look something like this:

// apiService.js
export const apiService = createApi({
   reducerPath: "api",
   baseQuery: baseQuery,
   tagTypes: ["Posts", "PostsList"]
})

// postsService
const postService = apiService.injectEndpoints({
  endpoints: (builder) => ({
    fetchPosts: builder.query({
      query: () => `/posts`,
      providesTags: (result = [], error, arg) => [
        "Posts",
        "PostsList"
        ...result.map(({ id }) => ({ type: "Posts", id })) 
      ],  
    }), 
    getPost: builder.query({
      query: post => `/posts/${post.id}`,
      providesTags: (result, error, arg) => [{ type: "Posts", id: post.id }]
    }), 
    // Omitted 
    deletePost: builder.mutation({
      query: (post) => ({
        url: `"/posts/${post.id}`,
        method: "DELETE"
      }), 
      invalidatesTags: ["PostsList"]
    }), 
  }), 
  overrideExisting: false,
})

This does work, but then for every resource cache tag, there needs to be two tags - one which is the base ("Posts") and the other for the delete mutation ("PostsList"). Viewing a resource (performing the GET /posts/post.id) and then running a delete on it seems like a frequent enough UI flow that maybe a DELETE mutation should by default not cause a GET /posts/post.id refetch, and instead clear the query key from the reducer all together. Thoughts?

[phryneas]

You don't need a new tag. You can also do { type: "Posts", id: 'LIST' } for example.

Tags do not necessarily mean something really existing. It's like sticking post-it's on an endpoint. You can write whatever you want there and it only has meaning for you.

On the flip side: RTK-Query does not know what any of your endpoints does in reality, and it also doesn't want to know. It might be used for completely different things (we have realtime chat examples). RTK-Query also does not know what GET or DELETE are. That is just passed through to the fetchBaseQuery, which could also be a graphql baseQuery that worked completely different, some grpc baseQuery or something completely different.

How you organize that logic is completely up to you. We will not make any assumptions and will also not add any such assumptions in the future.

[fvkramer]

You don't need a new tag. You can also do { type: "Posts", id: 'LIST' } for example.

Ah, since no Post will exist with an imaginary id: 'LIST' the single GET/UPDATE won't be refetched.

RTK-Query also does not know what GET or DELETE are. That is just passed through to the fetchBaseQuery,

That makes sense. Thank you for clearing it up and for the help with above.

[Tosinkoa]

`//Here is where I made a request

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const getAllCarsApi = createApi({
reducerPath: "getAllCarsApi",
baseQuery: fetchBaseQuery({
baseURL: "https://jsonplaceholder.typicode.com",
}),
endpoints: (builder) => ({
getAllCars: builder.query({
query: () => "todos/1",
}),
}),
});

export const { useGetAllCarsQuery } = getAllCarsApi;

//And this is my store

import { configureStore } from "@reduxjs/toolkit";
import { getAllCarsApi } from "./getAllCarsApi";

const store = configureStore({
reducer: { [getAllCarsApi.reducerPath]: getAllCarsApi.reducer },
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(getAllCarsApi.middleware),
});

export default store;

//Here is the frontend where I was trying to console.log the data

import { useGetAllCarsQuery } from "@/store/ReduxStore/getAllCarsApi";

const Market = () => {
const { allCars, fetchAllCars } = useContext(MyContext);
const { data, error, isLoading } = useGetAllCarsQuery();

console.log(data);

return (

Home

); };

export default Market;`

This is my first time using RTK Query in react. I was following thier documentation and I tried implementing the basic example using JSON placeholder Rest API, but I keep getting a res status of 404 and the data of undefined. I later download two videos on YouTube which all show same code implementation for the basic example. I believe I am doing something wrong. It will be much appreciated if you help me out, Thanks so much in advance.

[ctjhoa]

@phryneas
Hi,

I face the same issue as @fvkramer but I do not understand your conclusion.
Changing the invalidatesTags of the deletePost mutation will avoid automated re-fetch however the previous getPost with tag { type: "Posts", id: post.id } is still in cache.

In my case,
I have the Post delete action in a Post details page.
When I press the delete Post button I'm redirected to the Post list.
So if I browse to a specific Post (eg post/2), trigger delete then press the browser back button, the intial Post query (eg post/2) is still in cache and page is still reachable.

I tried to play with skipToken to avoid query if mutation isLoading but it doesn't work cause RTK query still consider the subscription as active.
I do not find documentation on how to manually unsubscribe from subscription created with a generated hook.

I'd like some guidance on that because delete action isn't well documented and it's a classic behavior IMO.

[IGrebyonkin]

@ctjhoa

Hi,

I have caught same issue and I was only able to clear the cache manually. RTK-doc

const {data: {ID}} = useGetDataQuery(undefined)
const {deletItem} = usePostDeleteMutation()
...
const handleDelete = async (id) => {
    await deletItem(id)
    dispatch(
        api.util.updateQueryData(
            'useGetDataQuery',
            undefined,
            (draft) => (
                Object.assign(draft, {ID: undefined})
            )
       )
    )
}

[kuzkokov]

It's also possible to implement similar to @IGrebyonkin solution, but right inside the query definition:

getPhoto: builder.query<GetPhotoResponse, { userId: number; userType: UserType }>({
  query: args => ({
    url: getUserImageEndpointUrl(args),
  }),
  onQueryStarted: async (args, api) => {
    try {
      await api.queryFulfilled;
    } catch (e) {
      api.updateCachedData(photoDraft => {
        Object.assign(photoDraft || {}, { id: 0, file: '' });
      });
    }
  },
}),

It probably would be more correct to check if the error is actually 404, otherwise, you might prefer to keep the cached value.

And somehow, it doesn't work with data from the query hook. I had to use currentData instead.

[HMemmi]

@phryneas what if my fetchById provides each item with id and a list keyword tag... We don't use fetchAll in our project because we have thousands of rows. How can we solve this problem?

[nyerslaszlo]

For anyone that found this thread by searching for this issue, I solved this by introducing a const skipFetchingPost = useRef(false) to my Get component, set it to true right before deletion happens, and use that to skip refetching the data. This way you can invalidate all the tags without worrying about getting an error on deletion. So for example a \Posts\1 route would look something like this (using React Router):

const skipFetchingPost = useRef(false)
const navigate = useNavigate()

const {data, isLoading, isError, error} = useGetPostQuery(postId, {skip : skipFetchingPost.current})
const [deletePost, {isError : isDeleteError, error: deleteError}] = useDeletePostMutation()

const handleDelete = async (postId : number) =>{
    try{
        skipFetchingPost.current = true
        await deletePost(postId).unwrap()

        // use the {replace : true} option if you don't want the user
        // to come back to the deleted post when pressing the back button
        navigate('/Posts/', {replace: true})
    } catcth(e){
        //error handling goes here
    }
}

This way, when (for example use a button to) run handleDelete, the DELETE mutation will still invalidate the tags you've set up, but it won't refetch the deleted post before navigating away to your posts list component.

[irdy]

Guys, we really need simple and obvious method for clear PART of cache-state. I found method api.util.resetApiState for reset api state completelly in docs. But how about local? It would be great to add something like api.util.resetQueryData

[markerikson]

@irdy : what is your specific use case? What are you trying to do?

[korneSt]

My problematic use-case:

I have a list of items and option to click on it to open details in the modal with delete button in there.
The tags we provide are something like this:

getList => provides 'Contact'
getListItem => provides 'Contact'
addListItem => invalidates 'Contact'
deleteListItem => invalidates 'Contact'

So bascially we don't use tags with sepcific Id. When we udpate ListItem, we update single item and the whole list.
But when I try to delete ListItem, RTK Query tries to invalidate already removed item that causes 404.

To fix that I added Tag {type: 'Contact', id: 'LIST'} to the getList endpoint and invalidate only that on delete. So like this

getList => provides ['Contact', {type: 'Contact', id: 'LIST'}]
getListItem => provides 'Contact'
addListItem => invalidates 'Contact'
deleteListItem => invalidates {type: 'Contact', id: 'LIST'}

This way on delete I only refetch list of items with getList query. It works now.
However when I deleted item #1 and revalidate the 'LIST', cache from getListItem(#1) is still there (Contact tag).

So when I later create a new item, it invalidates 'Contact' tag and tries to fetch item with deleted id (#1).

[markerikson]

Interesting. @phryneas , thoughts?