react-query with axios post

[cseas]

Use case:
I'm making an axios post call using redux-saga and storing my value in the redux store because the response is something I'd like to be available throughout the react app. I read some online discussions saying react-query can be used to replace redux so here I am experimenting but can't find any clues to using axios in the documentation.

I started with SWR and landed on their very minimal (not useful) axios example. Something like that would be a great addition to the react-query docs nonetheless.

Anyway, after a long discussion, I finally found out that using SWR is actually not recommended for post calls. I was just wondering if that is the same case with react-query since both libraries seem to work pretty similarly.

[wolverineks]

https://react-query.tanstack.com/docs/guides/mutations#basic-mutations

[cseas]

Not sure how this answers the question. Can you elaborate a bit?

Is it fine to use react-query for POST calls or not? And how do I use axios with it?

[wolverineks]

useQuery is for gets. useMutation is for posts
It can handle anything that returns a promise.
Check out https://react-query.tanstack.com/docs/examples/auto-refetching

[banagale]

@wolverineks I was looking to use useQuery() for a simple post as was done in this example.

From what I can tell, useQuery is fine for simple POSTs. Can you give feedback on what kind of cutoff there is from when useQuery would not be advisable and useMutation should be used instead?

[tannerlinsley]

Yeah, there's nothing stopping you from using any HTTP methods or even GRPC to "query" or "mutate" your data since React Query is based on just Promises. As far as naming things, this just comes down to preference. If you would rather see a different name for the hooks and models (blog posts) that the examples work with, feel free to open a PR :)

[banagale]

Yeah, there's nothing stopping you from using any HTTP methods or even GRPC to "query" or "mutate" your data since React Query is based on just Promises.

@tannerlinsley Thanks for this. Perhaps I'm overthinking this, I'm new to react and react query.

However, I'm still not clear on when useQuery should be used and when useMutate should be used.

Would you please share a broad distinction between when useMutate should be used for requests that involve changes on the server?

• Docs on useQuery
• Docs on useMutate

[wolverineks]

Yeah, there's nothing stopping you from using any HTTP methods or even GRPC to "query" or "mutate" your data since React Query is based on just Promises.

@tannerlinsley Thanks for this. Perhaps I'm overthinking this, I'm new to react and react query.

However, I'm still not clear on when useQuery should be used and when useMutate should be used.

Would you please share a broad distinction between when useMutate should be used for requests that involve changes on the server?

• Docs on useQuery
• Docs on useMutate

useQuery caches the data, making it available across multiple components
useMutation does not

[wolverineks]

useQuery could potentially not execute the request, and therefore not mutate the server state

[banagale]

• useQuery caches the data, making it available across multiple components,useMutation does not
• useQuery could potentially not execute the request, and therefore not mutate the server state

Thank you for these.

[tannerlinsley]

useQuery for reading data useMutation for creating, changing, or  deleting data Tanner Linsley

…

On Sep 29, 2020, 5:18 PM -0600, Kevin Sullivan ***@***.***>, wrote: useQuery could potentially not execute the request, and therefore not mutate the server state — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[banagale]

Thank you, I saw this indicated in the docs, but did not understand why. Contrasting these two with @wolverineks's details would be a helpful. Something like,

When to use useMutate and useQuery

• useQuery is purely for reading data
• useMutation purely for creating, changing, or deleting data

Why?

• useQuery caches the data, making it available across multiple components,useMutation does not
• useQuery could potentially not execute the request, and therefore not mutate the server state