NextJS app router navigation preventing refetch with RTK Query

[ethandpowers]

I'm working on a NextJS application using the App Router. Virtually all of our data is fetched client-side using RTK query, in a similar manner to a standard React application. We are running into an issue where whenever we fire a mutation, then use router.push(...) from next/navigation, the mutation will succeed, but queries that would normally be invalidated from invalidatesTags are not re-fetching. When I navigate back to the original screen, the queries do not have the updated data.

Example:

await someMutation()
// refetching occurs

await someMutation()
router.push('/somescreen')
// refetching does not occur

Is anyone else experiencing this issue?

[riqts]

I have not been able to reproduce this behaviour,

Are you able to do one of the following?

• Send through a replay.io recording,
• Tell me more about your code and where it differs from this code I wrote to try reproduce the behaviour:

export const testApi = Api.injectEndpoints({
  endpoints: (builder) => ({
    getPostById: builder.query<DisplayPost, string>({
      query: (postId) => `post/${postId}`,
      providesTags: (result, error, arg) => [{ type: "post", id: arg }],
    }),
    updatePost: builder.mutation<DisplayPost, ChangePostApiArg>({
      query: (queryArg) => ({
        url: `/post/mutate/${queryArg.Id}`,
        method: "POST",
        body: queryArg.updateSchema,
      }),
      invalidatesTags: (result, error, arg) => [{ type: "post", id: arg.Id }],
    }),
  }),
})

export const { useGetPostByIdQuery, useUpdatePostMutation } = testApi

  const router = useRouter()
  const [updatePost, { isLoading }] = useUpdatePostMutation()

  const onSubmit = async (data: UpdateSchema) => {
    await updatePost({ Id: data.id, updateSchema: data })
    router.push("/otherpage")
  }

Additionally, make sure you aren't using any static generation for the page or you are revalidating any Next.js caching on the page