TanStack

T

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

optimistic-gold
optimistic-gold9/20/2023

useQuery without QueryProvider

I am using react query with nextJs 13 and sometime i want to useQuery without any cache just to use the loading, data, isError functions, is that possible?
other-emerald
other-emerald9/20/2023

QueriesObserver not working

Hello, I'm trying to use queriesObserver, but it doesn't seem to be working.
const observer = new QueriesObserver(queryClient, { queryKey: "me" });
const observer = new QueriesObserver(queryClient, { queryKey: "me" });
gives me error on "queryKey": Object literal may only specify known properties, and 'queryKey' does not exist in type 'QueryObserverOptions<unknown, unknown, unknown, unknown, QueryKey>[]'. And in browser...
No description
variable-lime
variable-lime9/20/2023

React Query and SSR Combined doubt

Hi, I'm working with React Query and SSR (NextJs) and I want to combine SSR with client side. Is it possible to share cache between client side and server side?? For exemplo: I want to prefetch the data in SSR and hydratate to client side, but if leave this page and get back, the data will prefetch again but in the client side is fresh yet....
conscious-sapphire
conscious-sapphire9/20/2023

Using refetchInterval

If i set refechInterval, does it refetch even the data is not stale?
other-emerald
other-emerald9/20/2023

useQuery select usage

Hi, I'm working with the useQuery hook in React Query, and I need to extract data from it while also adding some custom logic. I want to make sure I don't disrupt the type definitions. Is it a correct approach to use the select option like this? ```ts export const useCurrentPlan = () => { const data = useUserConfigV2({...
dependent-tan
dependent-tan9/19/2023

prerender react query data on server

``` 'use client' import React from 'react' import { useQuery } from '@tanstack/react-query' import axios from 'axios';...
fascinating-indigo
fascinating-indigo9/19/2023

Get loading in useMutation v5 beta

Hello, how do I get the current state of mutation like isLoading? It looks like missing on v5 beta? Or did I miss something? Thank you. In addition to this. How can I get access to the current state of mutation? Since my action button was located from the other component. Like, I want to disable it if the request still processing (from other REST API)...
multiple-amethyst
multiple-amethyst9/19/2023

how to get cached response?

im trying to get cached response data with queryCache.find(getKey('key')) but it returns a query how can i return an exact data which comes in response ?...
stormy-gold
stormy-gold9/18/2023

How to prevent making a query, if id is removed from ids list that is used as cache key

Hi! In our app we've got queries that often involve passing lists of ids to various API endpoints. In most cases the response returns a list of data for each item separately, there's no aggregated data that depends on the list of all passed ids. The issue we're having is that if we already have data for items with ids e.g. 1, 2 and 3 and someone removes an item with id 2 from the list, we make a new query for items with ids 1 and 3, even though we already have this data, only because the list of ids has changed and it's used as a part of the cache key. Is there some easy and efficient way to figure out that we already have this data and not make a new request?...
multiple-amethyst
multiple-amethyst9/18/2023

stale vs fresh

hi guys where i can read exhaustive information about fresh/stale status with examples ?...
correct-apricot
correct-apricot9/16/2023

How to Update React Query Data from Socket Messages Without Refetching?

Hey guys, I am currently working on a chat application where I am utilizing React Query to manage my server state. Initially, I perform a GET request to fetch the existing messages from an endpoint when the app is loaded. Following this, all the new messages are received through a socket connection as users interact in the chat. My challenge is finding the most efficient way to update the data managed by React Query with the new messages received from the socket connection without triggering a refetch from the server, to maintain a smooth user experience. I would like to update the state handled by React Query directly with the new messages....
conscious-sapphire
conscious-sapphire9/16/2023

set initial data from a different api

I have a filtering system in my website that i use with react query.When users first enter the page i want all of the posts with the most likes to show up but when users filter i want the filtered posts to show up. For this i figured out to create a state that is set to true if user starts to filter so that when this state is true i will use the filtering api and when it is false i will use the api that gets the posts with most likes.it didnt work.Then i tried initialData but it didnt work either.What would work then....
conscious-sapphire
conscious-sapphire9/16/2023

How can I get Data and add it to a state without it having the possibility to be undefined?????

I want to get the Date from my backend but it can be undefined and therefore my states won't work...How can I make it not return an undefined? I mean that the state is only initialized when the data is loaded?
No description
wise-white
wise-white9/14/2023

graphql codegen with react query v5

Anyone used this with react query v5? https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-react-query Looking to use react query stream hydration with app router (with codegen)...
metropolitan-bronze
metropolitan-bronze9/14/2023

Refreshing User Organizations with TanStack's useQuery and Clerk/Next.js Integration

Hello everyone! I'm building a Next.js application with Clerk, and it's really fantastic. However, I'm facing an issue with TanStack's useQuery. My idea is to create a hook to fetch the user's organizations, and I've named it useGetTeams. Here's the code: ...
conscious-sapphire
conscious-sapphire9/14/2023

React Native: Refetch once push notification received

Hi guys Do you have an idea how to refetch once push notification received in react native? Is there a way to access queryClient outside the <App/> component....
robust-apricot
robust-apricot9/14/2023

Implementing infinite scrolling without knowing the next page

Hey all. I’m new to tanstack query and I’m trying to implement an infinite query but the only thing is that the backend I’m working with does not return a next page param. The server accepts a skip and take params. What I currently do is keep a page counter in state and extrapolate the next skip and take value from that. What I’m struggling with is figuring out how to implement that with useInfiniteQuery. Has anyone done something similar and can you share any insights? Thanks!...
quickest-silver
quickest-silver9/13/2023

Refetching a query with different cache-control headers

Hey, I'm looking for a way to refetch a query with different cache-control headers. Currently I'm caching a response in the browser cache but I would like to be able to bust that cache if needed. However, I haven't figured a way to refetch a query with different headers. At first I tried something like this but I quickly found out it doesn't work as one place will have a query with queryKey ["cars", false] and another will have a query with ["cars", true]:...
conscious-sapphire
conscious-sapphire9/13/2023

switching between endpoints in react query

Say that i have 2 endpoints one of which displays users and the other displays admins.I will have 2 buttons that call users or admins when clicked.For this i need to switch between the endpoints.how can i do thag
ambitious-aqua
ambitious-aqua9/13/2023

setQueryData is not mutating the state somehow or at least it is not trigerring a rerender

Hello I have the following query: ```tsx const useDocuments = (contracts?: IContract[]): UseQueryResult<IDocument[], void> => { return useQuery({...