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

harsh-harlequin

7/11/2024

Make an offline app

Hello, I have a Capacitor mobile app, and I decided to use react-query for it's cache system (and for many other things), but I'm still new with that library and I'm not sure on how it will behave and how should I use it. My goal is to make my app available offline, by showing the last data fetched. So I found a way to use a CordovaSQLite driver to make an asyncStoragePersister, to save the data in a safe and sustainable way....

optimistic-gold

7/11/2024

typescript type when I pass an onSuccess callback to my custom hook

Hey guys, I have this custom hook and I want to be able to pass a onSuccess callback to it, but I don't know which type should I use here ? I have done this but if the type returned from the function change i will have to change the type, is there some more opitmal? ```tsx export const usePatchCampaign = ({ onSuccess, }: {...

harsh-harlequin

7/11/2024

queryClient.fetchQuery persister

Hey guys, I have setup a mobile app using Capacitor and Ionic, and I'm using react-query to manage my API calls. I created an asyncStoragePersister using a cordova sqlite plugin to store the cache on the mobile phone and allow offline usage of the app without having to persist data myself. It seems to work pretty well. The problem is, my app is protected by an auth, and I have to add my user profile fetch in this auth setup, which is outside React (not a component). ...

rare-sapphire

7/10/2024

useQuery - select return undefined data

Hello guys, I have a custom hooks who goes like this: ```ts import { useQuery } from "@tanstack/react-query"...

ratty-blush

7/10/2024

React Query

Hello everyone, I am just getting started with react query and I just have a quick question. Does react query use the useEffect hook under the hood?

extended-salmon

7/10/2024

params in useNavigation, not working

I was trying to add some params when navigating to a new route: ``` navigate({ to: "/settings",...

robust-apricot

7/10/2024

Type is not assignable to type mutate function

Hello all, I get this error

Type updateDummy is not assignable to type mutation function

Type updateDummy is not assignable to type mutation function

and I am unsure how to fix it. I followed the same pattern as my createDummy function, both of which write react query functions to make mutation calls to the database. ```import { type UpdateDummyDto, type CreateDummyDto } from "@bookwave/api-client";...

conscious-sapphire

7/9/2024

Globally enable / disable queries

Is there a way i can globally disable queries based on a condition.

foreign-sapphire

7/9/2024

Trouble with `useInfiniteQuery()` and JSON:API- always get the initial data when loading more

getNextPageParam() returns the correct link to the next page, but when I click the Load more button, I just get the initial data appended to the initial data (instead of the next page data being appended). I've used tanstack query for awhile, but this is my first time using useInfiniteQuery() so maybe I'm missing something obvious. Code and more details on SO: https://stackoverflow.com/questions/78725660/useinfinitequery-with-tanstack-query-and-jsonapi-cant-load-more-than-one-page I'd ap...

optimistic-gold

7/9/2024

I need to invalidate a query from a redux action

Hey folks, I need to invalidate a query from a redux action but when I call const queryClient = useQueryClient(); it does not work (crash the function without any error), do you know what is going on and how can I handle that case? Thank you!...

flat-fuchsia

7/9/2024

It not fresh data when time out: staletime

Hello everyone I using react query and react native // QUERY: query check ins list useInfiniteQuery({...

robust-apricot

7/8/2024

useQuery is not a function for 'UseDummy'

Hello all, I’m using React Query to fetch data from my database (“UseAllDummies” gets all dummies, and “UseDummy” gets one dummy by its unique id). The UseAllDummies query function works fine, but the UseDummy one does not. I’m passing the unique id from the url params in nextjs. I get this error that useDummy is not a function. Queries: ...

optimistic-gold

7/8/2024

How can we use redux dispatch in a query function?

Hi guys, I'm currently working on a project using redux and I want to migrate to part to tanstack query. I wanted to know if you have some insights about how can I call the dispatch function in a query function? The issue is that the dispatch function is coming from the useAppDispatch hook and since we can't use a react hook as a query function I can't use hooks inside the query function :'( Can you help me amazing devs?

variable-lime

7/8/2024

How would I implement a newsfeed like this in terms of cache invalidation?

I'm building a React Native app with a newsfeed. I understand how mutations work and how to use useInfiniteScroll. My question is more of a design one. Currently, I have a basic hook useNewsfeed that returns a list of all relevant post data, including data such as the post author and if we follow them. From the newsfeed screen, if a user clicks on a post author to enter their profile, then follows them, we can use a mutation and optimistic UI to update the following-status on that screen. But when the user backs out of the profile screen and goes back to the newsfeed, we would need to update the post in the newsfeed to show we are following them now....

variable-lime

7/7/2024

Why use placeholder data instead of props?

Basically the title, what are the benefits of placeholder data instead of just passing some props to the component that can be used in the initial render?

variable-lime

7/7/2024

Infinite scroll with duplicate data?

I'm building a React Native app with infinite scroll but I have concerns about duplicate data. Say we are currently on "page 5" of our query, and each "page" has 10 elements, we currently have elements 40-50. If the user waited on this screen for a few hours, and didn't do anything, and in the meantime, other users made a bunch of posts to a newsfeed, when our user scrolls down, triggering page 6, won't the API return elements we've already seen? Since new posts were made, they all the posts down....

afraid-scarlet

7/6/2024

Clearing up comment for making query client

I cant really understand what the comment means in the else statement regarding suspense - can anyone clear this up? Thanks!

flat-fuchsia

7/6/2024

Invalidate didnt work

I have mutation ```ts const { mutate, isPending } = useMutation({ mutationFn: (values: SignInUser) => signIn(values), onSuccess: async (data) => {...

correct-apricot

7/6/2024

pages undefined on SuspenseInfiniteQuery in v5

Hey all, I've started migrating from React Router to Tanstack router and fixed to refactor the fetching as well. Got one issue atm with the useSuspenseInfiniteQuery ```js Uncaught TypeError: pages is undefined...

broad-brown

7/5/2024

How to do the Optmistic Update?

I'm trying to do the optmistic update . In my queryKey I'm using a page state, should I use it in getQueryData as well? Another thing, in my response I get an object with the pagination and an array with the data, how can I do the optimistic update under these conditions?

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