Accessing unselected (unmodified) data as returned by the queryFn
I fetch some data with query which is wrapped with custom hook. So far, I have just used a map function hard coded in the
useQuery
call. But now I have a need to access the unmapped raw data as it was fetched. I think I read somewhere here about passing a select
fn per use case. However, I'd like to optionally pass the whole options object, so I can maybe pass the enabled
option, or whatever is needed. What's the best approach here? My first guess was smth like Pick<UseQueryOptions, "select" | "enabled">
but it doesn't seem to help. Apologies if I missed any important info, kinda sick and just woke up & need a solution ASAP. I'll provide more detail if needed, just can't think straight right now.
6 Replies
optimistic-gold•2y ago
have a look at the
queryOptions
functionflat-fuchsiaOP•2y ago
Thanks for the quick reply, but what do you mean exactly? I can't find such a function in the docs. All I'm finding regarding options is here https://tanstack.com/query/v4/docs/vue/reference/useQuery
or in the migration guide. Again, sorry if I'm being blind.
useQuery | TanStack Query Docs
const {
data,
flat-fuchsiaOP•2y ago
I installed the eslint plugin and the error went away. However, I'm not sure if I'm doing the right thing.. What's the best approach to access unselected (unmapped) data that the queryFn returns?
optimistic-gold•2y ago
it's in v5: https://tanstack.com/query/v5/docs/react/typescript#typing-query-options
I need to write better docs 🙈
TypeScript | TanStack Query Docs
React Query is now written in TypeScript to make sure the library and your projects are type-safe!
Things to keep in mind:
flat-fuchsiaOP•2y ago
Funny you said that, being one of the better ones 🤣 typing stuff I can deal with later. What I do need ASAP is access to the unmodified data. Here's what I'm doing:
1. fetch data from my API
2. model it for app-wide use with a select fn
3. now I need to send the JSON of the raw data to another API
I have a
usePage
that wraps a useSearch
that wraps a useSearchQuery
that returns useQuery
. I know it's horrible, but I need a working solution today. I can refactor tomorrow.optimistic-gold•2y ago
if typing issues are not relevant, mark
options
as any
🙂
I'd usually not recommend allowing to pass in all options. If you only need select, do this: https://x.com/TkDodo/status/1657026702512467970
if you need enabled
, put both in an object and add an enabled: boolean
🤷♂️