Skip to content

improve mutation workflow #2261

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
1 task
mplemay opened this issue Apr 23, 2025 · 5 comments
Open
1 task

improve mutation workflow #2261

mplemay opened this issue Apr 23, 2025 · 5 comments
Labels
enhancement New feature or request openapi-react-query Relevant to openapi-react-query

Comments

@mplemay
Copy link

mplemay commented Apr 23, 2025

Description

Currently, as far as I can tell when data gets mutated, you have to manually update the tanstack query data in order to update the client state.

const { data, error, refetch } = useQuery("get", "/api/test");
const { mutateAsync } = useMutate("patch", "/api/test");

const handleUpdateClick = async () => {
    await mutateAsync({ params: { query: { message: "Message updated by mutate!" } } });
    // optionally refresh, etc.
    refetch();
 };

There should be a clean way to update the query data without additional changes.

Proposal

Either add a parameter, etc. to automatically update the query data.

Extra

@mplemay mplemay added enhancement New feature or request openapi-react-query Relevant to openapi-react-query labels Apr 23, 2025
@araphiel
Copy link

araphiel commented May 8, 2025

const { mutate } = useMutate("patch", "/api/test");

const handleUpdateClick = () => {
    mutate({ params: { query: { message: "Message updated by mutate!" } } }, {
     onSuccess: () => queryClient.invalidateQueries({ queryKey: ["get", "/api/test"] })
   });
 };

This should work for your example but a typed invalidateQueries function would definitely be a nice enhancement

@mplemay
Copy link
Author

mplemay commented May 8, 2025

Thanks for the reply @araphiel, I will definitely use this over my current approach. With that being said, is there a reason this is not the default behavior?

@Type1J
Copy link

Type1J commented May 15, 2025

The reason that it isn't the default behavior is more for @tanstack/react-query than for this library, but there is a good reason that refetches don't happen by default. If you get what data would be changed in the cache back from the mutation, the you can get that cached object by it's key, modify it, then set it in the cache by its key (causes a rerender). That removes the need for refetch. While a quick invalidation to cause a refetch is simple, you may already have all the data that you need, and you won't need to spend the extra money on your server's CPU cycles and network load. Also, although the query keys are pretty regular in shape in this library, in raw @tanstack/react-query they are not so regular, so you'd need a list of what you want refetched anyway, and calling the function to invalidate them doesn't save much on syntax from a list representation.

@mplemay
Copy link
Author

mplemay commented May 15, 2025

@Type1J That makes sense. Even still would it make sense to to bake into the useMutate a flag to either 1) use the value returned by the mutation call as the new value, 2) invalidate the query as suggested by @araphiel , 3) do something custom, or 4) do nothing (the default). The reason for this is most operations are just CRUD and doing so would save developers from writing a bunch of duplicate boilerplate code.

@Type1J
Copy link

Type1J commented May 21, 2025

Personally, I have always done optimistic cache updates, and patched in mutations (I either removed the update on an error, or replaced it with something in the mutation's response), but, even if I completely agreed that auto refetching should happen, I'm not sure that the library has enough information to know what queries would be bound to which mutation, since no such declarations are made. The library needs to know what to refetch somehow, and I believe that calls to invalidateQueries() may be no more verbose than another solution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request openapi-react-query Relevant to openapi-react-query
Projects
None yet
Development

No branches or pull requests

3 participants
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy