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

unwilling-turquoise

7/18/2023

Suspense example has a bug?

In this example https://tanstack.com/query/latest/docs/react/examples/react/suspense it never shows "Loading projects..." even though it has that in line 73 in the sandbox: ```ts <React.Suspense fallback={<h1>Loading projects...</h1>}> // ......

foreign-sapphire

7/17/2023

Infinite queries fetching behavior (and preventing duplicates/missing data)

I have been looking at the following portion of the docs that talks about how all pages are sequentially refetched when the entire infinite query needs to be refetched. I am curious to how react-query handles fetching new pages. Do previous pages also get refetched? For example:...

unwilling-turquoise

7/17/2023

global disable all queries n seconds

Anyway to disable all queries and all operations? I have a demo site with a reset button that clears and resets everything. It invokes queryClient.clear() but I also want it to stop fetching for n seconds

sensitive-blue

7/17/2023

await query without fetching it

I have a component that uses a useQuery for a given query. In order to handle user input, I need to use that data. I don't want to just error in the event that the data is not yet fetched, or discard the input. I know I can just use await queryClient.fetchQuery(blah) in the user input handler. but my understanding is that this will make a second network request, if the first one (from the hook) hasn't returned yet. is that true? I know it won't if there's already data that isn't stale....

xenial-black

7/17/2023

React query serverside prefetching with passing more params to custom function not working

Hello all, I have a question I always thought that you could prefetch regardless of the params you pass to the queryKey, and queryfn is this is not the case? so for example ```` // in serverSideProps you would do this...

quickest-silver

7/17/2023

React Query Authentication

Hello, any one have a link to a repo that have an implementation with jwt and refresh token OR Sessions?

cloudy-cyan

7/17/2023

Invalidate query doesn't work

im trying to invalidate query : queryClient.invalidateQueries({ queryKey: ["user"] }); As I understand this should trigger getQuery for "user" key and update state from API. Then somewhere in Layout i have: ``` const { vendor, profileImage, name } = queryClient.getQueryData([ "user", ]) as User;...

stormy-gold

7/16/2023

Mutations started in offline mode are executed 1-by-1 after going online

- I enter "simulate offline mode" using the react-query dev tools. - I click a button 5 times, which causes 5 mutations (POST to /todo/create) - useIsMutating() correctly returns '5' since these mutations are paused or waiting for online - I 'go online' using the react-query dev tools. ...

optimistic-gold

7/15/2023

How To use useQuery with dependency array ?

Hello guys, I'm trying to convert this useEffect to useQuery. I have some issues with the dependency array. can some one help to slove this problem ? useEffect(() => { let isActive = true; ...

boiling-coffee

7/14/2023

useInfiniteQuery pageParams always undefined

I am trying to get a useInfiniteQuery hook working by setting the pageParams to a string that i pass to our endpoint, but pageParams is always undefined. Does pageParams need to be a number? We use a string of the next id to fetch but it doesnt set it.. ```...

inland-turquoise

7/14/2023

How to properly use query key factories with multiple variable keys?

I essentially have a query that looks like this: ``` export default function usePost(params) { return useQuery(["post", params.sessionId, params.dataId, params.postId], () => getPostById(postId));...

old-apricot

7/14/2023

Do I really need useMutation?

I have a page with couple of dialogs to change the data in it (CRUD, but there are several different items in it). In the actual page contents are inside a useQuery isLoading clause and it should show a spinner when this is true. It seems like data fetching is done when I e.g. delete something (I run invalidateQueries after the operation) but the page won't update until I force it (visit another window). I though isLoading should make it update?

eager-peach

7/14/2023

Handling optimistic update rollback when multiple mutations have been ran

``` const addIngredientToKitchenMutation = createMutation(() => ({ mutationFn: KitchenService.addIngredient, onMutate: async (data) => { const previousIngredients = queryClient.getQueryData(['kitchen-ingredients']); await queryClient.cancelQueries({ queryKey: ['kitchen-ingredients'] })...

conscious-sapphire

7/13/2023

`staleTime` option prevents optimistic update from rerendering component

TL;DR is, when using Slatejs, and the onChange calls someMutation.mutate(), a useQuery hook won't pull in optimistic cache changes made to the cache in the onMutate function of useMutate when a queries' stale time is not 0. This only seems to manifest itself when the onChange is being triggered by SlateJS, as a regular input doesn't seem to have the same issues. ...

eager-peach

7/13/2023

Why does invalidateQueries() break mutate()'s onSuccess() sometimes, but not mutateAsync().then() ?

The short gist of the problem is code like this: ```jsx // userMutations.js const useCreateUserMutation = () => { const queryClient = useQueryClient()...

wise-white

7/13/2023

Hey team -- curious how to register functions in react-query. Can we force register them? Particularly seeing this issue in my app: 1. In our "new project" flow, a user creates a new project, with a mutation, which we store in the cache like so:...

absent-sapphire

7/13/2023

Does react-query ever persist cached values on the client?

I've been doing some work with Next 13's app directory, RSC, etc. I've been making my way through figuring out exactly how Next caches things, and I've been integrating this all with react-query, among other things. I've been seeing some counterintuitive things, which I'm working through, but I just wanted to confirm, with certainty, that react-query will always have an empty cache when you cmd+r and refresh your browser. I can't imagine react-query is storing anything in localStorage, indexedDb, etc. I checked those things, and they're empty, but I figured I'd ask, to be certain....

constant-blue

7/11/2023

Is there a way to force logging of errors in production?

I'm using zod to parse axios responses but in production, it simply fails and neither Zod nor axios logs anything about the failure

like-gold

7/11/2023

Avoiding state-sync when awaiting response body on error

Our API returns specific error messages as JSON in the response body on errors. So the HTTP code is 401 and the body has something like { error: 'Invalid password' }. I'm trying to avoid the onError callback when writing my useQuery/useMutation code (since those callbacks are being deprecated) and this article explains the downsides to how this stuff leads to "state sync" but I can't find any way to avoid it because JSON body doesn't get parsed when there's an error, so I have to do it myself (I'm using ky as the http lib). If there's an error, it seems like I have to use await error.response.json() to get the actual JSON data and that has to be done inside a callback or a useEffect....

vicious-gold

7/11/2023

Is there a way to set a types for queryClient without casting everytime?

Hello, I have a custom useQuery hook: ``` export function useGetChannels(userId: string | undefined) { return useQuery({ queryKey: ["channels"],...

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