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

quickest-silver

4/22/2024

Cannot view docs on some pages

Is anyone experiencing this issue? I am unable to view docs due to a weird ShikiError:

``
client-CljXtFt3.js:56 ShikiError: Language

diff` is not included in this bundle. You may want to load it from external source. at s (RenderMarkdown-CBHwZCwR.js:25:16657)...

conscious-sapphire

4/22/2024

Only fetch once.

```ts const { data, refetch, isFetched } = useQuery({ queryKey: ['todos'], queryFn: () => ( fetch("http://localhost:3000/api/feed").then((res) => res.json())...

harsh-harlequin

4/21/2024

Is this style correct?

Hello 👋 I use this style to "group" and organize my queries: ```typescript...

genetic-orange

4/20/2024

Error: Rendered more hooks than during the previous render.

function useIndicator() { const params = useParams<{token: string, chart: string}>() const {data} = useQuery({ queryKey: ['indicator'], queryFn: async () => {...

metropolitan-bronze

4/19/2024

mutateAsync vs mutate with options. What's the difference?

The docs on this page: https://tanstack.com/query/latest/docs/framework/react/guides/mutations#promises say "Use mutateAsync instead of mutate to get a promise which will resolve on success or throw on an error. This can for example be used to compose side effects." with the following code as an example: ```ts const mutation = useMutation({ mutationFn: addTodo }) try { const todo = await mutation.mutateAsync(todo)...

correct-apricot

4/18/2024

isFetched vs isSuccess

Can anyone explain what the difference is between isFetched and isSuccess? I have seen some other developers using these two flags to determine if data is "ready" in our application, and after reading the docs, I am not clear what the impact would be of using one vs the other....

fair-rose

4/18/2024

useQuery vs useMutation

Hello!! I would like your opinion and how you handle the following scenario. when you want to perform an API call on a button click do you use useQuery refetch option or you go for useMutation? ...

like-gold

4/18/2024

V5 Infinite loop issue

Alright so the old code is like

const [data1, setData1] = useState()
const [data2, setData2] = useState()

const [data1, setData1] = useState()
const [data2, setData2] = useState()

...

sensitive-blue

4/18/2024

Cannot find module '@tanstack/react-query'

hello , someone can help me ? My error : ...

national-gold

4/18/2024

Error feedback with `createMutation` in `Solid`

I have the following situation: ```ts export function postProgram() { return createMutation(() => ({ mutationFn: async (program: Partial<Program>) => {...

national-gold

4/18/2024

`exhaustive-deps` not complaining about `window.location.origin` anymore

Hey, in our codebase we are using window.location.origin inside our queryFn. Previously the exhaustive-deps check was complaining if we did not include it in the key. But if we did I think some kind of error occurred (can not really recall right now). So we ended up with something like ```ts...

conscious-sapphire

4/17/2024

Track upload progress for optimistic updates

The docs show how to use variables for optimistic updates https://tanstack.com/query/latest/docs/framework/react/guides/optimistic-updates#if-the-mutation-and-the-query-dont-live-in-the-same-component ```tsx // somewhere in your app const { mutate } = useMutation({...

genetic-orange

4/17/2024

Have any way to fetch data using tanstack query into a .ts file?

So, i have a createChartFactory.ts that have a lot of functions and one called init, so inside init i want fetch data and return.

`  const fetchPricesFx = async () => {

    const res = await fetch(

my-api`)...

optimistic-gold

4/16/2024

Resources on API data typing, read vs update vs create ?

TLDR: Seeking best practices for handling API data validation and form validation in a React app with Typescript. Full question: We're using React, Typescript, TanStack Query, zod, react-hook-form, etc. The back-end is python, fully separate, cannot use the same typings files. ...

like-gold

4/16/2024

error Type

So I am converting v4 to v5 and originally I have a code like this ``` onError: (error: any) => { if (error.response?.status !== 401) { console.error('<Layout> getting generic input data', error);...

solid-orange

4/16/2024

V5 `enabled: false` query will automatically refetch on invalidateQueries

I accidentally created queries that had the same key; one was enabled and the other was disabled. This is probably what caused the problem. I've already fixed it by changing the key of one query, but perhaps someone could verify if this is the intended behavior. Here's a small code snippet on how to reproduce it. As you can see, the query is disabled, but on the screen, you will see the 'this should never be shown' text if you click the button. "@tanstack/react-query": "5.29.2", ``` function useEnabledTestQuery() {...

like-gold

4/16/2024

HELP! V4 to V5 migration Codemod didn't work

So this is what I did ``` 1. installed "@tanstack/react-query": "^5.29.2", "@tanstack/react-query-devtools": "^5.29.2", 2. changed the node_modules/@tanstack/react-query/build/codemods/src/v5/remove-overloads/remove-overloads.js to CJS ...

reduced-jade

4/15/2024

How to implement infinite scroll in tanstack react query ?

I'd like to incorporate infinite scrolling into my project using React Query. As I scroll down the page, I want to send a request to the backend to fetch additional data. How can I implement this ?...

xenial-black

4/15/2024

select performs correctly in local but in production i think it fails.

const [searchTerm, setSearchTerm] = useState(''); const { data: projectData } = useQuery({ queryKey: [${ProjectQueryKeys.fetchProjects}], queryFn: fetchProjects, select: (data) => {...

genetic-orange

4/14/2024

Is there a way to fetch notifications in real-time?

I've implemented a simple fetch query to retrieve notifications. However, I want to receive notifications instantly without needing to re-fetch, and it behaves somewhat like a subscription, Is there any method by react-query to react this behavior?

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