fetch "get" data in form submit
Hi,
I don't understand how I can retrieved data in my submit function.
I have to validate that some data still exist upon submission by calling a get api and see if the object is still there.
For get function, we can use useQuery but it can work for this scenario and I can't set the parameters dynamically during my form subscription and wait for the refetch.
Did I miss something?
Is it a case that react query does not cover?
Thanks
8 Replies
stormy-gold•2y ago
I don’t understand your use case
exotic-emeraldOP•2y ago
Let say you have to enter 2 product code inside a form (2 different input).
When the user submit the form, I need to check that this product code is valid before continuing the process.
The way to check that a product code is valid is to call a rest api, and check the result.
How to deal with this requirement with ReactQuery?
intense-chocolate•2y ago
await queryClient.fetchQuery()exotic-emeraldOP•2y ago
Thanks I will look at it.
@TkDodo 🔮 I tried this approach but the query parameters are not dynamic.
Let say you have a Getproduct with an ID parameter.
How do you set thes parameter when you want to fetch the data and be able to use the same definition of query with different parameters ?
Thank
More or less what mutation query do.
stormy-gold•2y ago
If the definition is not identical it’s not the same query by definition
exotic-emeraldOP•2y ago
@M00LTi sorry I don't get your point.
In my point of view Parameters values are not part of the definition.
If you gave a query getProduct(productcode), your query definition is always the same whatever the value of the product code.
All in all I feel like this case is not handle by react query.
It seems that I can't define a query that accept some parameter that are set during the call fct like mutation function.
I can solve my case by using mutation fct, but that's a non sense as it is a fetch query "get".
intense-chocolate•2y ago
Queries with different parameters yield different results, so we need to cache them individually. That's what the queryKey is for. fetchQuery works, not sure why you're saying "parameters aren't dynamic"? Just construct a different key...
exotic-emeraldOP•2y ago
I think I might be loss in how everything works.
I m made a custom hook that encapsulate the useQuery in order to be able to reuse the query setup.in multiple components and make sure that everything is written the same way for error handling, cache options.etc...
By doing this, the queryfn Parameter are set in the call to my custom hook. It can react to state if needed.
But I have no way to call it on demand with user input as Parameters.in a submit function.
The queryclient has the same approach, one you set the Parameter you can't fetch with another parameter value without "reacting" to a state.
I really need to have the same behavior as mutation function but for fetch query (with cache)
I mean the cache system, is based on fn keys.
If I have a query GetProduct (code: number) , the query key is gonna be a mix of fnName and the Parameter value.
Unless I miss understand the cache is shared between useQuery as long as they use the same query Key right? Or the cache is in the hook and not shared?
If so, I should be able to call my query with value 1, await result and call it with value 2 and await result.
Exactly what I did when using fetch call without ReactQuery layer.
Ex:
OnSubmit() {
const a = await MyQuery(1);
const b = await Myquery(2);
...
}