TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

react-query-questions

solid-query-questions

table-questions

virtual-questions

router-questions

react-charts-questions

ranger-questions

vue-query-questions

svelte-query-questions

bling-questions

form-questions

angular-query-questions

start-questions

db-questions

start-showcase

router-showcase

📣-announcements

absent-sapphire

9/22/2022

Is there any way to pass an argument the fetcher but omit it from the query keys?

I have a fairly complex object that I am passing down that my fetcher needs but I dont really want as a query key and react query cant serialize it anyways...

wise-white

9/22/2022

Loading demo data into the query cache

For a project I am working on we have a desktop app (building using web tech) and a landing page website. We embed the desktop app into the landing page as an example for users looking at our product. The desktop app is built using React Query for data fetching. My goal is to use React Query to populate some placeholder data for when we show it on the landing page. I was able to load the example data into the query cache fairly easily using the queryClient.setQueryData(...) function but I am h...

ambitious-aqua

9/22/2022

React Query, Select not showing up in devtools

In an example like the one from TKDodo's blog as shown below: export const useTodosQuery = (select) => useQuery(['todos'], fetchTodos, { select }) ...

genetic-orange

9/21/2022

I want to have a global error handler. Is it possible to use react-query at root level?

I want to manage errors globally for the user and display a notification on the pages whenever an error occurs. Any advice on how I would go about managing this on a global level?

manual-pink

9/21/2022

arguments for queryClient.removeQueries

If I have the following request and I want to stop a refetch could I write the ,following command to remove the query? ["streets",{"streetid":15},"waypoints","power",{"rain":1,"steepfactor":2}] queryClient.removeQueries("streets", streetid, "waypoints", "power"); can I pass more than two arguments to removeQueries?...

other-emerald

9/21/2022

Is it best practice to use different QueryClients per user?

Assuming the anonymous user as a distinct user, is it wise to create a new QueryClient when the user switches from logged in to logged out or vice versa?

continuing-cyan

9/20/2022

Changing queryKey not refetching

My render has this code: ``` const [id, setId] = useState(props.initialId); useQuery(['m', id], queryFn, { refetchOnMount: 'always', cacheTime: Infinity, staleTime: Infinity, onSuccess: successCallback, notifyOnChangeProps: ['status', 'error', 'isFetching', 'data'] });...

adverse-sapphire

9/20/2022

Am I using `useQueries` wrong here?

It seems like the type that's coming out of useQueries is ending up as any for me.

conscious-sapphire

9/20/2022

Access to data fetched in different components

Hi everyone, just wondering how can i get access to the data in the following example: CategoriesSidebar component where i can use useQuery hook to fetch categories only. Produsts component will fetch products separately. And let's assume I have component X where i need to get the access to both datas (categories and products) to do some data manipulations, without RQ i would store it in redux and get it from store but i would like to achieve that only with RQ, shall i call categories and produc...

continuing-cyan

9/20/2022

How to manually setQueryData and timestamp so not stale

I want to manually setQueryData for a new query that doesn't yet exist in the cache. I want it to be considered not stale. My useQuery does staleTime for 500ms - but this doesn't seem to be working. It seems setQueryData sets the data but the data is instantly stale. So refetchOnMount is causing it to refetch.

national-gold

9/19/2022

Call queryFn outside query expects meta

I'm using the query key implementation described here : https://tkdodo.eu/blog/leveraging-the-query-function-context#object-query-keys alongside the initialData NextJS strategy (so fetching the first page in getStaticProps then using the props to initialize query (infinite in this case). Since the queryKey is passed into the queryFn and destructured in the queryFn implementation I now get a warning that meta is missing when simply calling ``` fetchTodos({ queryKey:todoKeys.list(profileId) })...

adverse-sapphire

9/19/2022

Callback or a status for query refetching?

Is there a callback or a network status for when a query is refetched after the invalidation of its query? I'm hoping to do some side effects when a query refetches after a mutation invalidates its query

quickest-silver

9/19/2022

Update Query State - based on SignalR recieved data

Hi all. What would be the best way to update a already fetched query with data state that comes from a SignalR message? I want to use the data state that was sent from the BE and overwrite the query state?...

subsequent-cyan

9/19/2022

Graphql Codegen - No QueryClient set

Does anyone know why I would be getting this? I'm using @graphql-codegen/typescript-react-query version 4.0.1. It's just a single TS file with all of the hooks generated for me. I'm importing the hook on a Next.js app that is using <QueryClientProvider>, but it's complaining about the generated file from graphql codegen not being wrapped in a client provider?

genetic-orange

9/19/2022

Optimistic updates to text fields (handling each keypress)

For my task list, if you click on a task it opens a modal for that task where you can make edits. For the edits like changing status and due date, the optimistic updates require only 1 invalidate each. However, for the text fields, I was not sure how to make it such that I am not invalidating on each key press. I thought of having the invalidate when the component loses focus as one idea but the issue is that the query cache still needs to be updated on each keypress so that the user can see what they're typing (obviously). Another option would be to replace the textfield with another textfield on focus and manage the state locally for that textfield. Then when it loses focus 1) change the query cache to the text just typed and invalidate it 2) hide the temporary textfield and show the original textfield with the new text. This approach feels quite hacky though. Any recommendations?...

rival-black

9/18/2022

How to persisted data on index page when navigating back from a detailpage

In my Next.js project I implemented useInfiniteQuery on an overview page to list blogs. The next thing I want to achieve is being able to restore all the blogs that have been fetched after reading a blog and coming back to the overview. Should I use persistQueryClient? Or am I understanding this wrong....

conscious-sapphire

9/18/2022

Multiple call with react-query

Hi guys, i am relatively new to RG and i need advise in following example: Let's asume I have Products page where i am using hook for fetching products data, on the same page (route) i would like to fetch all categories - different enpoint, so it looks like i need to do 2 different calls on the same page? Is this something like Promise.all? What would be the best approach? Thank you

adverse-sapphire

9/18/2022

Refetching after invalidateQueries

Hey folks, when a refetch occurs after the invalidateQueries, it seems like it only occurs after I click outside of the window and then click back on the window again... I'm pretty certain I'm doing something wrong but is anyone able to point out why this might occur?

fascinating-indigo

9/18/2022

React query with Storybook

hi guys. how do i show the mock data on the storybook. i already wrap the preview.tsx with ReactQueryProvider. // components/HubSelector.tsx const HubSelector = () => { const {data,isLoading} = useQuery(['hubs'], getHubs)...

quickest-silver

9/18/2022

getting errors doing query in nextjs

I'm getting this weird error and I don't really know why.

{"fileName":"http://localhost:3000/_next/static/chunks/pages/index.js?ts=1663503142921 line 465 > eval","lineNumber":28,"columnNumber":25,"message":"assignment to undeclared variable _"}

{"fileName":"http://localhost:3000/_next/static/chunks/pages/index.js?ts=1663503142921 line 465 > eval","lineNumber":28,"columnNumber":25,"message":"assignment to undeclared variable _"}

...

Previous Next

Gaming

Programming

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs