TanStack

T

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

evident-indigo
evident-indigo2/17/2023

useQuery inside webworker/sharedWorker

Hello there, I am trying to use useQuery from react query inside web worker to seperate api and call and other calculation from main thread, and for which I need a way to call useQuery inside web worker. can you please help me out with this?...
dependent-tan
dependent-tan2/16/2023

Guessing there is no way to prefetch when using app-memory accessTokens

My access token is within app memory (zustand), and all of my routes are protected by an auth guard meaning you need an access token. Prefetch calls the API server side correct? So if you're using an app memory access token, you can't access any sort of context within getServerSideProps, so there is no way to prefetch server side?
conscious-sapphire
conscious-sapphire2/16/2023

Query context hook changes and triggers rerender of my component

I'm hooking up react-query into a new app. I have the query client/provider configured as explained in the tutorial: ```js const queryClient = new QueryClient() ...
No description
rival-black
rival-black2/16/2023

UseQuery data undefined in the components

I get the data undefined at first render and so in the component I cant use it when I want to conditionally render some buttons according to the user.role, but when refetching it gets there. I also logged it and the user is populated, even in teh devtools says that...
No description
deep-jade
deep-jade2/16/2023

Creating a POST as a useQuery ( orval.dev )

Hi all. I have a question and I'm going about it wrong ( any tips would go a loooong way )... I wanted to how I would go about updating a query cache in the following case:...
continuing-cyan
continuing-cyan2/16/2023

How do I make useMutation call with time interval?

I need to refetch token every 60hours or when token expires, currently I am using a useEffect in AuthProvider but it doesn't seem to work if people keep it open and don't change tabs/navigation, so I wonder if I can use useMutation instead? but I don't see any time interval params for this... it seems the time interval is only available for useQuery. What is the best way to do that?
plain-purple
plain-purple2/16/2023

how to prevent onMount call ?

i want to stop calling api on first render even tho i put enabled but still this loading always true how to fix...
No description
absent-sapphire
absent-sapphire2/16/2023

run some stateful code before each query and mutation

Hi i want to run some stateful code(check if my authToken has expired and use a method returned by my useContext(authContext) if it has) before each query and mutation. What would be the recommended way to do it? Any prop from QueryClienyProvider where i could place such logic?
fascinating-indigo
fascinating-indigo2/16/2023

How do I use graphql mutations with the generated queries?

I can't find a good example of how to use a mutation query
harsh-harlequin
harsh-harlequin2/15/2023

issues with dnd-kit using React Query (fetched list jumps each time a list item is reordered) (trpc)

if anyone has dnd-kit (https://docs.dndkit.com/) sortable preset working with an app fetching from react-query, i'd love to take a look. I'm having all sorts of issues with rendering when re-ordering my list. if needed, i can screen grab the behavior as well. it's almost like its refetching when i'm setting the state, or something along these lines, and it briefly renders the old list before displaying the updated one. any help is
the gist of the code is ```ts // fetches and renders the list (near identical to the docs) const BasicListEditor = () => {...
dependent-tan
dependent-tan2/15/2023

Data set with setQueryData is garbage collected (gets thrown out upon page refresh)

Not exactly sure how setting query data works when it comes to simple client state management, because each time I refresh the page it gets thrown out.
extended-salmon
extended-salmon2/15/2023

Why is `isLoading` initialized to `false` instead of `true` for queries with `placeholderData`?

The docs for status (which isLoading is derived from) say loading is enabled when "there's no cached data and no query attempt was finished yet." However, the docs for placeholderData say "placeholderData is not persisted to the cache" So what's going on? My use case is I have a query which I would like to initialize with placeholderData during initial load, but still have a correct initial isLoading flag set to false...
mute-gold
mute-gold2/15/2023

useQuery data is undefined even with initialData/placeholderData

Hey, i have a custom hook that returns a useQuery that fetches the options for a select input. I have tried with both initialData and placeholderData set as an empty array (which typewise is not incorrect, since I can have a select without options until they are added), but the data returned is set always set as <T | undefined> with T being the type of the options... Does it still require me to validate if isSuccess is true in order to set the type to T even though I have set the "default data"? - @tanstack/react-query v4.24.4 - typescript v4.9.5...
ambitious-aqua
ambitious-aqua2/15/2023

setQueryData returned by useQuery

Thoughts on returning a function from useQuery that sets the specific query data in a “safe” way?
fair-rose
fair-rose2/15/2023

UseQueries make Semantic Modal take a while to display

Hello everyone! In our project, we presently utilize React-Query and Semantic UI, but I have a problem where if I use UseQueries in Modal, it takes a while to display whether my data has already been retrieved. Could you guys please help me to solve my issue, thanks in advance....
correct-apricot
correct-apricot2/15/2023

Query.isEnabled?

I have a hook that handles a bunch of stuff including using the query and it passes in enabled and the custom hook will return the query object. I was showing a loading spinner if the query is loading but that became a problem when I initially set the query enabled to false, it says it's still loading. How can I tell if the query is enabled or not? Is there no way to tell if the query is 'enabled' from the query object? I will have to also return whether the query is enabled or not from my custom hook? ...
inland-turquoise
inland-turquoise2/14/2023

Pros and cons of query destructuring

Hey, I'm just wondering if there are any non-obvious pros/cons when considering object destructuring for queries (const { data: myData } = useMyQuery()) vs naming the query and using it as is (const myQuery = useMyQuery()). We currently destructure everything, but it seems cumbersome when there are multiple queries in the same component because you have to remap every query prop to a different const - we end up having isQuery1Error, isQuery2Error etc.
harsh-harlequin
harsh-harlequin2/14/2023

WebSocket integration

Hi All, Have a question to ask about a particular use case, I'm currently looking to get WebSockets working alongside TanStack query. I get exactly how to update the existing query data via mutate or invalidate so this side make sense. Thanks to this great post: https://tkdodo.eu/blog/using-web-sockets-with-react-query However In my use case I need to subscribe to multiple topics and plan to only subscribe when each useQuery is used/mounted. So plan send subscribe and unsubscribe messages for each topic on mount/dismount of a particular useQuery()....
continuing-cyan
continuing-cyan2/14/2023

Use toggle to enable different useMutation call

I have a toggle button which gives true/false value in useState, then I have an ordinary useMutation call, then I want to write: ```js if (true){ call that useMutation func A } else {...