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

equal-aqua

3/14/2023

Anyone tried using react query with ag-grid server side datasource?

https://www.ag-grid.com/react-data-grid/server-side-model/ Basically, how can one provide reference to query? ```...

correct-apricot

3/13/2023

Bug when invalidating queries

Hello, I hope you're all doing fine, I'm currently creating an npm package for my work where i'm using react-query to fetch some data. there is one functionality where I have to invalidate query in case of a mutation success. I'm testing my npm package with storybook and it works fine. The problem i'm facing is when i used the npm package in another project sometimes the invalidation doesn't work and the query doesn't fire. Do you have any idea why this is happening? is it related to react-query...

national-gold

3/13/2023

Can you pass a QueryClient directly to useQuery instead of using a QueryClientProvider

Is something like the following possible or do you need a global QueryClientProvider? ```ts function myComponent() { const queryClient = useRef(...

stormy-gold

3/13/2023

failureCount not incrementing on error 404

As the title said, failureCount from a polling query doesnt increment on error 404

conscious-sapphire

3/13/2023

Refetch useQueries

I have a useQuery which fetches a list of IDs from a public API. After that I use useQueries to fetch the information for each ID (name, URL, etc). This works on page load. The user can click one of 6 buttons to change the type of story they are looking at. I have the onClick for the button fetching the initial useQuery and successfully fetching a new list of story IDs. However I am not sure how to prompt useQueries to refetch. Please see https://github.com/MelkeyOSS/astrostation/blob/roy/add-hacker-news/src/components/HackerNews/HackerNews.tsx#L56-L93 for the code in question....

broad-brown

3/12/2023

catch API response error

How do you guys use to guide the API 400 response? I'm controlling it in the error boundary wrapper component but I'm not sure if it is the right way, I could do it in in a try catch when calling the API I need to implement some logic having as parameter the current route so I know if I should render a warning component or redirect to a page like /404 Considering I'm using pure React, react-query, suspense...

optimistic-gold

3/12/2023

Request does not work correctly

Hey. I am using ky and react query. Locally in my Docker container. Everything works fine. My backend gets the request and processes it. As soon as my Webinterface is in a docker container on my server and online....This one endpoint does not work anymore. I have about 15 endpoints.....1 of them (its always the same one) does not work correctly if the webinterface is online. If I send my request via PostMan it does work without any problems (also with the same JSON). ```js const methods = useForm() const {serverId} = useParams()...

correct-apricot

3/12/2023

Changed order of items on refetch

onBlur data post to the server and onSucces refetch occurs, the order of the item changes. How to eliminate this? Data from the backend is sorted by ID and in Insomnia it always comes back in order. Inputs are given an individual key, specifically {info.cell.id} from react-table. Columns is in useMemo, data to table is not....

complex-teal

3/11/2023

Proper way to invalidate multiple queries?

I'm looking to setup an invalidation of two queries when the data changes. This is what I'm currently doing in my application and it works, but is there a way to combine this? ``` onSettled: () => {...

genetic-orange

3/11/2023

How to use React Query data in a layout component?

Hey! I have a Next.js application where I use @tanstack/react-query for state management and data fetching. I use it for authentication state via a custom useUser() hook that is used throughout the app, including in a nav bar component shared across all pages in a layout component. Let's say I have two identical pages showing me the current user. When I first open my app, everything works fine as the data is shared between the page and the nav bar. Whether I enter page A or B, the observer count for the key ["user"] is 2. The weird thing is that when I navigate to another page and refetch the key, it seems to detach the key from the nav bar, and it stays un-updated (you can see that the observer count is 1). Any advice on how to keep those linked will help! See in CodeSandbox: https://codesandbox.io/p/sandbox/boring-tristan-xgdhwm...

unwilling-turquoise

3/11/2023

Handling streaming...

I need to handle stream responses coming from OpenAI API, is that possible with useMutation? I checked the docs, but found nothing about.

multiple-amethyst

3/11/2023

Persist query data in navbar for particular pages

I think this is more of a Nextjs question, but I created a DashboardLayout for all of my sub pages in /dashboard. In the DashboardLayout component is a navbar that has the title fetched from my useDashboard hook. How do I persist the title when changing pages, as right now when I do it will refetch and so for a brief moment is blank. ```js export default function DashboardLayout({ children }) { const router = useRouter()...

vicious-gold

3/10/2023

Invalidating Query

Hello, I have a useQuery([queryKeys.users]) that fetches data inside /users route, while on /users/new i am trying to invalidate that query upon creating a new record by doing the following queryClient.invalidateQueries([queryKeys.users]). For some reason it's not working unless i am already in the same route. Is this not how i am supposed to invalidate a certain query?...

fascinating-indigo

3/10/2023

Invalidate pagination cache when something changed

Lets say you have a paginated list of todos, ordered by last created and descends ```tsx const [page, setPage] = React.useState(1); const query = useQuery({ queryFn: () => fetch("/todo?page="+page),...

stormy-gold

3/10/2023

Devtools with Vite+React

I am trying to use @tanstack/react-query-devtools with vite. It simply doesn't show up. There aren't any errors either, it's just not visible. Hit a wall debugging this, have already tried manually setting the NODE_ENV environment variable to development (logging reflected the change) and tried embedded mode (other than the default of the floating mode), Was hoping to see if other people have gone through similar issues maybe, so I could sort this out faster. Thanks....

complex-teal

3/10/2023

Updating the cache manually sometimes does not rerender the UI

I’m working with React Query in React Native and I’ve noticed that sometimes when my queries update the cache manually on success it does not rerender. Has anyone encountered this before or is this known to happen? I’m forced to just invalidate onSettle instead to ensure the rerender happens....

rival-black

3/10/2023

Subscribe to specific key changes

In an e-commerce site, I have a cart that gets fetched on every page (globally). I’d like to avoid a useCartQuery() hook on something like the cart icon that only needs to update on a single “itemQuantity” property. I come across this issue on many other instances too where I have a component that only needs to render on a specific item change and not the entire cart....

mute-gold

3/9/2023

Abstracting correctly useQuery

So in my app, I want to define a set of "API definitions" that are mainly composed of the queryKey and queryFn for each of my possible calls. The idea is that I would like to have an abstraction over useQuery that accept a definition and get/build the key and function. I simplified my usecase for the exemple and made a sandbox: https://codesandbox.io/s/optimistic-shadow-d0u4rb?file=%2Fsrc%2FApp.tsx...

harsh-harlequin

3/9/2023

prefetchQuerys like useQueries

I want to be able to prepare my app to have some information available when the user goes offline. My app has tickets and for each ticket details... ... I would like to make a prefetch of some ticket details, to save this information in the cache and use it offline. This can be done with an array of prefetchQuerys just like useQueries....

fascinating-indigo

3/9/2023

Solid Query: "mutate" is not a function when testing

Hello everyone. I have a page component Post.page.tsx that uses createQuery and createMutation. When I try to test that component, the error says TypeError: mutate is not a function. I have a test utils that's basically a wrapper of render from @solidjs/testing-library. The only place where I call mutate function in that page component is in onDeletePost function in Post.vm.tsx file which is used inside of Post.page.tsx, but only called when some button clicked. I'm not sure why the error says like so, even if I'm not even clicked anything in my test case....

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