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

subsequent-cyan

10/21/2023

Migration to v5

I'm currently testing migration to V5 and was wondering why if I run the codemod its not picking up that I'm using the old syntax when setting query keys. I receive a number of unmodified files., with 0 errors, 0 skipped and 0 ok. Is there something I'm doing wrong?

afraid-scarlet

10/21/2023

react-query + Next.js + ssg

Hi everyone I have a question… is it possible to use react query , nextjs and ssg where api server is nextjs? I have found this: https://tanstack.com/query/v4/docs/react/guides/ssr ...

conscious-sapphire

10/21/2023

useInfiniteQuery update

Hello guys! I can't understand how to use useInfiniteQuery() in this version. ```tsx const { data, fetchNextPage, hasNextPage, isFetchingNextPage, status } = useInfiniteQuery({ queryKey: [queryKey, paramValue],...

fair-rose

10/20/2023

[Solved!] TypeError: React.createContext is not a function (not using server components)

Solution found! https://github.com/TanStack/query/issues/3595 Hello! Need some help debugging an error that appears to be originating from react-query. ...

national-gold

10/20/2023

v5 The inferred type of 'X' cannot be named without a reference to...

The following code is fine for the TS language server with version 4, however, then uprgading react-query to version 5 the following error shows up. ```ts import { useMutation } from '@tanstack/react-query'; ...

national-gold

10/19/2023

Mutation with refetch

Hey, I am having a ListDisplay on my Frontend which fetches an array. After I mutate that array like deleting one object, it should show the new array in this ListDisplay…How can I force a refetch after a mutation?

rival-black

10/19/2023

Other ways to loop .mutate and update state when onSuccess?

I need to loop a function that contains a .mutate and onSuccess it updates my state with values from the return data and data from the function parameters. I know that .mutate only fires a callback once, but what other ways can I go with? I don't think I can use useMutation, because it then has to be inside my function and a hook can't be called in a function in react.

thirsty-lime

10/18/2023

How to use multiple queryClient options

I'm using React query for normal network requests, but I am also using it to handle sqlite queries in React Native. I would like the normal network requests to use basically the default ootb settings, but for the sqlite queries, I want to change most of the default behaviors since they are not network requests. What would be the best way to use multiple types of query settings? Would it make sense to create 2 different QueryClientProviders with different queryClient settings and instances?

ratty-blush

10/18/2023

vue-query, refs doesn't work for type narrowing?

I tried to use the type narrowing feature of v5. I prefer to always use refs to not have to keep track of which is which, but then the type narrowing doesn't seem to work? I posted a screenshot, this is the link with different variants: https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAOQACMAhgHaoMDGA1gPQBuOAtAEcc+KgFgAUBJh4w6OAFEAHvXAAbOQF5EEuHGAATAFxxGyEACNcAbh0mV6YyyjBGAcxvjCHiawjN4CLbAqAAK6Iz6Lq4ANEGo8lDkULHiusEAysisrOioqCm6LPQwaAVw+sX0xhUMKcRaaFjCeAAUgalwQrh4ANLoeMYA2gBEMLkwwwC6ZV34AGKMxi0AlMYh5CDB6AA8Sipg6gB8cBrH6xRbAHRQuRCq3OhtekZwAIzRdiAOcMP05qzDIjLOrLbziYAkOAtYJhCJRZbaDq+Zh3dCXVQQVwtYYw8KRNzDUESYjoVQYPSQ6HxRLQBHtXTI1Co9GY7HBBJJQkeElkuT0uCM+CKV4ncqVDy6YWXAzciQSCFQ3FwtyXbj0VQ4Om2RnMjFYnGhPFRLnEuCk8kKqkc6Cq9WaxEMvxM9Qs-XsmlQE2eM28h0Cp1CgBMopq9FtGvQErgikD0v0ssk4MpGSyOTyWqRAejAGYQ5Vwzgo4ps3GE-Lk6hMtlcqgC+gM47-NGACx5hh1ovN0vEuVJqFFEq1tURk5aYaoVM1wl+wXRgCsbbDw8LtkUc+7niAA Is it supposed to require usage of reactive? (no other examples in the docs use reactive, except this specific one) https://tanstack.com/query/latest/docs/vue/typescript#type-narrowing...

wee-sapphire

10/18/2023

Uncaught Error: No QueryClient set, use QueryClientProvider to set one

Im new to using React query, Im using react native and react query v3, react native is not compatible with the querydevtools. I keep getting no queryClient set but i do set it, am I setting it up wrong in my code:

conscious-sapphire

10/18/2023

[v5 - TypeScript]: ensure meta object type

Hi, just updated to v5 - great 🙂 Is there a way to use typescript to make sure that when I define meta on one of my queries it always matches the same structure? ...

variable-lime

10/18/2023

Best pattern to "create on error"?

I have a query that queries for an object that may or may not exist. If that object doesn't exist, it should automatically run the mutation to create it. What's the best pattern to do this? (I'm using tRPC if that matters at all) My initial thought was to throw an error inside the endpoint if the object doesn't exist and then provide an onError to useQuery inside which I would run the mutation, but onError doesn't seem to exist?...

flat-fuchsia

10/18/2023

Error handling in mutations: handle HTTP 400/500 globally, and other errors case by case?

Hi, I'm trying to improve the error handling of my application but I'm lost at what the best approach is. When I encounter a 500 response, I always want to display a generic toast message. For 400 errors something similar could be done. However, for business logic errors, I want to handle it case by case, e.g. when calling the mutation function, because the error depends on which mutation is done. In the global onError, I could check error.statusCode >= 400 for example to display a toast message. However, this means I would have to repeat this check in every local onError handler to prevent showing a warning twice (error.statusCode < 400). There is not a way to filter/pipe errors in a certain way so they are handled by only one onError function. Because my scenario is pretty standard for every SPA, it feels like I'm taking the wrong approach. What would be the recommended way to handle different kinds of API errors and differentiate between server/client/business errors?...

other-emerald

10/17/2023

is there a way to persist data in refresh?

if I have stale data or whatever every refresh using f5 for example I lost my cache data and it request everything again. is there a way to persist this data on react query? my main problem is not the actual f5 and is some components that use hyperlinks behind that redirects. and it always ask to the server the fresh data so I lost all my queries...

foreign-sapphire

10/17/2023

How should I set query data if the query key is different from useQuery hooks?

Hi folks, I encounter a challenge, so I would like to seek some helps. I'm building an omnichannel messaging app. The app is integrated with WhatsApp, Facebook Messenger, Telegram, etc. I'm implementing the following features: 1. There is a 'channel filter' option where the user can select a specific channel, or they can choose 'all' to view messages from all channels. 2. When receiving messages, I need to append them to the specific channel by using setQueryData or setQueriesData. ...

abundant-blush

10/16/2023

useQueries should enforce types on the `queries` param

I just spent hours questioning my sanity on this error: ``` const selectedThingsQueries = useQueries({ queries: selectedThings.map((thingId) => {...

optimistic-gold

10/15/2023

Small changes causing large refetches

Use case I am building project management application with 2 types of tasks - 1) project tasks 2) workspace tasks (these are tasks that are not part of any project). Currently I have tasks stored in the cache in the following ways - 1) Tasks for each stage in a project - ["tasks", "project", projectId]...

extended-salmon

10/15/2023

useQueryClient inside a custom hook

Hi, I'm pretty new to React Query. I've done a pretty solid scan of docs, StackOverflow and the archive of QA here. I've got a CRUD app with 'parent' queries (arrays of a given data type) and 'child' queries (a single instance of a data type). When mutating a child, I want both of the corresponding queries to update using setQueryData . To encapsulate this behaviour, I've written a custom hook, that can be called from within a component (ie when an edit form is submitted). ...

optimistic-gold

10/14/2023

The right way to fetch and cache with react query

I think I have made a simple cache complex. Just wanted some help restructuring it. Use case I am building project management application with 2 types of tasks - 1) project tasks 2) workspace tasks (these are tasks that are not part of any project). Note - Projects are made up of stages and stages are made up of tasks...

rare-sapphire

10/13/2023

Why doesn’t cache persist in React Native App ?

I couldn’t find much information on GitHub issues, blog posts, or YouTube videos I’ve tried logging the results from async-storage using the default key of the react query cache as a troubleshooting step, but nothing ever comes back, always undefined Here’s my query client config: https://pastebin.com/wMdcHxsz...

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