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

foreign-sapphire

1/25/2024

mutationOptions helper

Hi there! I've been working on refactoring some of my codebase's react-query usage (with inspiration from https://tkdodo.eu/blog/the-query-options-api). I see there is a queryOptions helper, which can be used to build QueryOptions objects, and I've gotten through refactoring all of my queries. Is there such a thing for useMutation? Even though my function is returning a type that satisfies UseMutationOptions, typescript seems to not like it. Any suggestions? Thanks...

inland-turquoise

1/25/2024

Integration with react/stately

I am using a ui library that uses react/stately with there table to add functionality like Infinite pagination so i wast thinking how can i integrate it with react-query ``` let list = useAsyncList({ async load({signal, cursor}) { ...

like-gold

1/24/2024

Typing mutate() variables when using setMutationDefault

Hi, I have some simple code here to set up a default mutation function and then call that with a useMutation, but it doesn't like the variables object I am passing in to mutate because it's not of type void. How do I type the variables object? The mutation function parameters are already typed so I'm not sure where it's expecting me to set this up. ```ts // query setup const createAction = async ({...

equal-aqua

1/24/2024

refreshing access token manually in axios

In my axios API calls, I need to give an Authorization header with the access token -

``
const res = await axios.get(

https://us-east-1.aws.data.mongodb-api.com/app/${process.env.REACT_APP_APP_ID}/endpoint/taskLogs`, {...

extended-salmon

1/23/2024

Is there a way to monitor queries from a parent component?

Hello! I'm currently trying to figure out the best way to monitor queries in a parent component that are happening in children components. Consider something like this: ```tsx...

environmental-rose

1/23/2024

useInfiniteQuery on TypeScript throw error on queryFn

here is the typescript playgroud: https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCSA7AZsbYGdARWXSgE84BfOXKCEOAcgAEYBDbVLgYwDWAeijpOfGAFoAjuSosA3AFgAUKEixEcMJygYAwhAgDg6VLXqNmAImxGTZ68rXho8TgA9gEcwyZxrT29UJ1VVGEowdDgcMGQYAHF0GABBABs0gAV0bAATAgBzACV0ADdTAHdUAGUKcr5ogF5EVTg4bHQPGExcgC44XihCuAAfFDz0fA7c5xpnCKi4EtRIHnQk1IzsvMKS8vQq2qh6ppaVNr5kPWh+weGx7GQM5zaonexissr+hFa2uE4qFQwAK2BAORgtxgQw+AG0ALovf58NKA1CMJhQmEFBFItq8ZC5CFYwq4v74mCEiEAdWgAlQJLhiL+NDJKjmqk6GncqEo2D49GQ-Jg3mwcA26SyOX...

foreign-sapphire

1/23/2024

Does react-query work with react-native-windows ?

Hi, i am wondering if react-query work with react-native-windows. Its doesn’t write on documentation.

modern-teal

1/23/2024

What is the best way to prevent a function running after its fetched and not loaded.

I have data that I want to live in short term cache. After initial load, I want to run a function against that data but not run that function if the data is 'fetched' again.

typical-coral

1/23/2024

Deleting Cached Data Programmatically in RTK Query after Mutation

Hello community, I am currently working with RTK Query in my project and facing a challenge that I couldn't find a solution for online. I have two different queries, each fetching different types of data, and both queries have defined tags. My goal is to automatically remove the cached data for both queries after the completion of a deletion mutation. The catch is that the solution using invalidatesTags doesn't work for me because it triggers a refetch of the data. However, the data in my application already has validations/checkers set, and I cannot afford to refresh or lose these states....

foreign-sapphire

1/22/2024

Any guidance / examples on react-query + handling live websocket events?

Hey react-query community, we're working on an application that will have a live-updating list of items. We are currently using react-query alongside cursor-based pagination + infinite queries to fetch data. However, we want to also integrate with websocket events (new item, delete item, modify item, etc.) so that we don't need to constantly refetch (polling). ...

foreign-sapphire

1/22/2024

Is it possible to skip cache for a hook?

I am try to do something similar to "cache-policy: 'network-only'" that I think existed in the days of apollo Is this possible to achieve with react-query? My case is the following. I have basically a stateful fetcher function that I'm passing to the component. When the component mounts, I want it to always invoke that function so that it gets the new data. And I don't want it to show the data from the previous computation. I cannot pass a unique value to queryKey because the function has no arguments....

optimistic-gold

1/22/2024

Framework independent usage

I really like the query library. We have a project where we don't want to put the query layer into the framework that we are using but we would like to have the same functionality that the library provide. Is it possible to use the lib without react or any of the frontend frameworks?

modern-teal

1/21/2024

best practices for conditional fetching with React Query?

Hi everyone, im new to react query and the whole idea of letting it handle server state. I had a question regarding conditional fetching, like for example I would only want my useUser hook to attempt to fetch the user data, if they are authenticated. I'm using Zustand for global auth state, and I add it to my useUser hook like this ```js...

genetic-orange

1/21/2024

Does refetch internally call fetch

Hey, have been digging around the src for a bit. I can't seem to find it refetch simply calls fetch. I was wondering if refetch requires that the initial query has been fetched previously or if as long as a query is defined we can call refetch as the initial query call? (I think this is true?)

relaxed-coral

1/21/2024

useMutation invalidateQueries does not trigger either on onSuccess or onSettled

Please is there anything i might be doing wrong because after the successful mutation it doesnt refetch the data ```tsx const { mutate, isPending } = useMutation({ mutationFn: (value: { companyName: string }) => {...

other-emerald

1/21/2024

queryFn won't refetch with new state (it sort of does but not the way i expected)

Okay so here i am trying to basically fetch some data from an api using tanstack query with material UI table pagination which lets me select how many rows of data i want per page. The API i made is able to plug that value to fetch any amount of data using the limit param. Anyway the setter setRowsPerPage in the handleChangeRowsPerPage function works correctly when i select 25 or any other value from the dropdown in the table pagination UI and i can see the console log of the updated state ...

ambitious-aqua

1/21/2024

fetchInfiniteQuery doesn’t allow page params

curious how to fetch an infinite query outside of react while supplying page params to be cached.

fascinating-indigo

1/20/2024

Query refetches when page is refreshed even if refetchOnMount is false.

I switched to typescript recently. I applied the same configs with my old project to my new project but it is not working like the old one. In the old one projects are not refetched even if I refresh the page so project selection combobox doesn't flicker when page is refreshed but now it is refetching. Note: I was using keepPreviousData: truein my old project but I gues it is deprecated....

optimistic-gold

1/20/2024

I have no idea why this is show as error in V5

Line 53. type any works

vicious-gold

1/20/2024

How to invalidate a query key for all opened pages?

I use queryClient.invalidateQueries(key) and it invalidates well for the current page window, but I would like it to invalidate all window pages currently open. How to do that?

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