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

exotic-emerald

4/14/2024

Type error in react query useMutation hook

Try to implement custom hook with useMuatation for POST request. Typescript is complaining that my createBook function Type '(bookData: Shop) => Promise' has no properties in common with type 'UseMutationOptions<Shop, Error, Shop, unknown>' . Here is an overview of my code. useCustoumMatation.ts import apiClient from "@/services/api/api-client"; ...

fascinating-indigo

4/13/2024

Getting below error while using QueryClientProvider in nextjs layout.tsx page can someone help me ?

multiple-amethyst

4/13/2024

Wait invalidate infinite query

```const handleDeclineLeadOffer = async () => { if (!declineOfferReason) return showToast('Escolha uma opção de declínio'); if (shouldOnlyDeclineMeeting) { await meetingAction({...

harsh-harlequin

4/13/2024

How to remove dehydratedState from html?

I generate my pages with getStaticProps with NextJs. In <script id="NEXT_DATA" type="application/json">{"props":{"pageProps":{"dehydratedState"... i have my product_ids, which i dont want to be shown. How can i hide or encrypt this?...

adverse-sapphire

4/11/2024

Handling rerendering and useMutation

Hi all, currently when wanting to force a rerender on a mutation I move the mutation up in state and pass it as a callback down to the component that needs to trigger it. This often results in prop drilling and coupled state. What is a better approach? Simplified example: ``` const Chat = () => {...

flat-fuchsia

4/11/2024

Purpose and necessity of QueryClient

Junior dev, newish to react-query & reading the docs - quick question. Among the first couple pages that I've read from the documentation (great documentation btw), there have been quick start examples of how to use it with some good explanations but I've come across the QueryClient on those occasions with little explanation. All I can remember from the API docs for the QueryClient is that it's used for caching. Yet the first couple examples have shown to use it along with the context provider but not much explanation or actual use of it. I'm sure I can get around to it but I'd really like to nail the fundamentals asap, so, can anyone clarify what the QueryClient is, its purpose and its necessity? Can you use useQuery without it?...

xenial-black

4/10/2024

nextPage and prevPage params aren't updating.

```js import { useInfiniteQuery, keepPreviousData } from "@tanstack/react-query"; import { useState } from "react"; import fetchPage from "../utility/fetchPage"; ...

tame-yellow

4/8/2024

Call a useQuery hook only onClick and not when Component loads for the fist time

I would like to know your opinion about the solution I implemented in React. I need to call a hook that uses internally useQuery only when I click a button. What I did was to declare the hook on the component and set enable: false. With that, I avoid the first call. After that, I get the refetch property from the useQuery hook and I call it when the button clicks. I've seen that you can also use invalidateQuery, but I don't really know what would be the best option....

fascinating-indigo

4/7/2024

Is there any way to identify what are the parameters for the currently running mutation?

Is there any way to identify what the parameters for the currently running mutation are with useMutation? I am mapping over a list, where each item has a button that performs the same action with a different parameter. I am trying to show a loading indicator in the correct place. (I could move the list items to a child element and call the mutation from there but I'd rather not if possible)...

tame-yellow

4/6/2024

Type for global error in QueryCache & MutationCache

I have a little issue. I want to define my own types for global onError callback in queryCache & mutationCache. I need error to be type of AxiosError. I can't find a working solution. I'd be glad if someone helped me. Thanks! ```js const [queryClient] = useState( () =>...

fascinating-indigo

4/5/2024

Is there a way to rerun only partial code of a query?

Hey I have a question about queries. I have a query which makes multiple get requests and then does a Promise.all to resolve all promises. ```ts const useChangeTariff = (contractIds: string[]): UseQueryResult<ITariffChange[], void> => { return useQuery({...

fair-rose

4/5/2024

Hello! I am trying to abort a POST request for example.

I have a modal that performs an API call, IF in the meantime I close the modal I want the API request to get canceled, anyone knows how to achieve that?

sunny-green

4/5/2024

Native release or Codepush ?

Hey can anyone help me, we are adding react query for data fetching in our react native app, does it require a native release, As per my guess codepush should do the job as there is no native platform specific apis being used

fascinating-indigo

4/5/2024

mutation options

is there a way to use mutations like the queryOptions api? so something like: const addTodoMutation = mutationOptions({ mutationKey: ["todo", "add"], mutationFn: () => {}...

quickest-silver

4/4/2024

Controlled state mutation in useQuery

Hi! I am looking for some way to control when states are updated. So the use case is like based on some user action I am animating somwthing for 1-2s and based on the same callback I'm refetching the query or updating the params being passed to it. So, I want that both animation and data fetching happens in parallel and onAnimationEnd the data is updated into states exposed by react query. Kindly help

unwilling-turquoise

4/4/2024

vue-query query return types are not unwraped in template?

Hello! New to vue-query so unsure if this is a user error but the return type of ```ts...

automatic-azure

4/4/2024

Enable/Disable QueryDevtools on custom env?

Is there a way to use a custom environment variable (other than NODE_ENV) to based on a different variable? Basically I want to show it on a dev server, but not run the dev server in development mode.

rival-black

4/4/2024

useInfiniteQuery always refetches when search state changes even if all data has already been fetche

I would like that when a user types in the search bar, we fetch all the results so they are always getting an exhaustive search. So I am passing the columFilters state to the queryKey array. However even if all the results have already been fetched an entire refetch is done when the search key changes. This is not ideal. Can anyone help with a workaround maybe how to prevent refetch when all data has been fetched or better approach? ...

modern-teal

4/3/2024

Error handling

Hi guys! I want to throw for second call when http response code is 500 const {data, isLoading, refetch, fetchNextPage} = useGetDeckSuspenseInfiniteQuery()...

judicial-coral

4/3/2024

Best Practices for Using tanstack-react-query with GraphQL in a Monorepo Structure

Hey 👋🏽 , I am using tanstack-react-query in a monorepo. I have a package called shared-features. This package contains features, which uses react-query. I'm using GraphQL, so I can't just use a defaultQueryFn. I need a way to inject a query-fn. Here's my current setup at the main-app, which should consume the shared-features-package. ```js...

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