It would be so much nicer if the ability to invalidate queries was built into the useMutation hook

[kainbryanjones]

Maybe I don't do this the best way but right now I have to do something like this

// example

    const queryClient = useQueryClient()

useMutation({
        mutationFn: async () => {
// some mutation
        },
        onSuccess: async () => {
            return queryClient.invalidateQueries({
                queryKey: ["someQueryKey"]
            })
        }
   })

It would be so much nicer if there was a way to just invalidate from the mutation hook. Also if there was some way the plugin could generate the types for the queryKeys around the app or there was some centralised way to define such keys.

// something like this 
useMutation({
        mutationFn: async (params) => {
        },
        
        // here is a 2d array, which is an array of all the query keys which are now invalidated
invalidates: (params) => [["someQueryKey"]]
    })

[Streudal]

I had a similar thought and wondered if the useMutation hook could just expose the queryClient from it's callback. That way we wouldn't have to import the useQueryClient so often.

I wouldn't be opposed to introducing a whole new key to the useMutation function though... I kinda like it 🤔

[TkDodo]

you can build this in user-land:

https://tkdodo.eu/blog/automatic-query-invalidation-after-mutations

[Streudal]

Literally saw this moments before you posted. Thank you!

Love your blog articles BTW. Super helpful and detailed!!!

I take it this is the recommended approach?

I was thinking more in the sense of one offs or where we didn't customize the queryClient definition at all. Just using the pure defaults and invalidating specific queries directly from within the components and such.