Automatic Refetch with invalidatesTags

Viewed 761

I am using RTK Query for my app's API requests. So far everything is working smoothly! I have followed the documentation in regards to providing tags and invalidating them but I am facing a weird behaviour. Following is the code of two related endpoints:

export const api = createApi({
    /*** code omitted for brevity ***/

    tagTypes: ["Post"],
    endpoints: (builder) => ({
        getPost: builder.query({
            query: (id) => ({
                url: `posts/${id}`,
                method: "GET",
            }),
            providesTags: (result, error, id) => [{ type: "Post", id }],
        }),
        bookmarkPost: builder.mutation({
            query: (id) => ({
                url: `posts/bookmark/${id}`,
                method: "POST",
            }),
            invalidatesTags: (result, error, id) => [{ type: "Post", id }],
        }),
    }),
});

Now fetching data is working perfectly fine. However, when the bookmarkPost request is successful the tagged getPost does not automatically refetch.

The tagged getPost only works if I manually set the id property. For example [{ type: "Post", id: "TOPIC" }]. Or, if I target the tag as a whole ["Post"]

The id part in my database is a Guid so I suspected this might be an issue (giving that the documentation states that the id should be a string or a number) and I normalized it to a string without dashes. But even doing so did not trigger invalidations.

Am I missing something here?

1 Answers

After pulling some hair, I realized that the string case in providesTags (uppercase) did not match the string case in invalidatesTags (lowercase). The Guid is converted to a string anyway ‍♂️

Related