useQuery with POST and body
I have this mutation whose response I need, and there is no corresponding query for this mutation.
However, only reason why I set this up as a mutation is cause it is POST request and needs body.
It seems to me I would benefit if this could be query not mutation, but if query can make POST request and I can provide body to it, as I need this response cached.
Any idea if this is possible to do?
13 Replies
absent-sapphireOP•3y ago
Now when I think about this, I don't think this will work... as I need to make those requests on certain events (like onBlur or onClick). That is imperative call and it must be mutation if I get this correctly?
wee-brown•3y ago
What's the mutation doing?
conscious-sapphire•3y ago
That remains possible with useQuery using enabled false and refetch. But should make sure what the mutation is doing first.
absent-sapphireOP•3y ago
mutation is making POST request with JSON payload as body and returning html string
it needs to run several times imperatively (onBlur, onClick, onChange) for multiple form elements
and each time I need its response to show in the UI
for the lifetime of that page
only after saving the page (sending form data with another mutation), I redirect to another page and I have corresponding useQuery
so questions:
1. does it need to be mutation, as I need response cached so it can be shown in the UI immediately
2. if it does need to be mutation, how to store that in RQ? Or should I store outside in global store?
3. If it can be query instead, how to go around imperatively calling it to get new response each time?
wee-brown•3y ago
I was asking because the answer to "mutation or query" depends on what it does, not if it's get or post. Like does it have a side effect on the server (writes to db, sends an email) or is it idempotent. You haven't answered that yet.
absent-sapphireOP•3y ago
It generates html based on json body. Im not sure if it does anything else, but I doubt it, as I call it multiple times and it gives me same output for the same input.
Ye, I would say its idempotent.
wee-brown•3y ago
Then it's a query 🙂
absent-sapphireOP•3y ago
Ok, can you help with how should I call it imperatively then?
To rephrase, will refetch handler work if I keep enabled on false?
wee-brown•3y ago
"It needs to run several times imperatively"
why?
absent-sapphireOP•3y ago
That is the requirement of that feature.. onBlur input element, onChange checkbox/radio button I need to make that new request to get that new html data
the state of those form elements will be payload for that POST that is returning html
it needs to make request after any change of those form elements
also how do I pass new payload object to the query on each refetch initiate?
wee-brown•3y ago
That's the important part. You'd add that info to the query key, then you'd get automatic fetches when this changes.
absent-sapphireOP•3y ago
This mostly works.. .I have put this large object as part of the key (which will be serialized to json if Im not mistaken?), and whenever it changes (when form element set the value to that object), new query is initiated.
That works nicely.
But I do have a problem whenever new fetch is initiated, previous response is removed before actually getting new one from backend, which is bad UX, as previous response disappears and UI jumps.
I would prefer that while new data is fetching, we keep old data in cache and just replace with new one after fetch.
Dunno why it doesn't work like that already, I would assume it does?
Do I need some additional config to make it work like this?
I guess
keepPreviousData is the solution here.wee-brown•3y ago
Yes it is.