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

other-emerald

1/11/2023

Creating a mutation.

Hey everyone, I'm using react query and I'm stuck on creating a mutation to delete a message from my database using Prisma. I am very lost and any help is appreciated. Thanks!

extended-salmon

1/11/2023

Handling complex component reuse, but with different api requests

Hello, I have a situation which fried my brain a little and I am posting here to maybe get some suggestions or to confirm if these are my only options. In our app we have a complex modal with features inside it. Lists, filters on those lists, 3-4 requests are done inside that modal. It also has a navigation nested inside it. It works well....

conscious-sapphire

1/11/2023

Invalidate API Gateway Cache when running manual invalidations

Hi there, I have AWS API Gateway with (API Gateway) caching for a GET endpoint that I consume with react-query. I also use mutations when I want to perform a PUT request, and then I invalidate react-query cache for the proper key. But I also need to tell API Gateway that I need fresh data, not data from API Gateway cache, and the way to do that is by using the header Cache-Control: max-age=0, is there an easy way to run the query function with those headers, but only for the manual invalidations?...

stormy-gold

1/10/2023

Best way to use Query with search?

Hi there, I'm fairly new here and very new to Tanstack query as well, so there are a lot of things I simply don't know the name of so I figured it was easier to ask than to read the entire documentation in hopes of finding something. I'm making a search component that displays the top 3 returned results. These are currently fetched on every change in the input. And as you might imagine this can lead to a lot of requests. Is there a way to handle this with Tanstack Query or do I have to write the logic for it myself? ...

correct-apricot

1/9/2023

How is the best way to handle this with deconstructing and Select?

``export default function useAuth() {
  return useQuery({
    queryKey: ['auth'],
    queryFn: async () => {
      const response = await fetch(

url`);...

correct-apricot

1/9/2023

Why mutation queries are falling into 'success' instead of 'onError'?

```jsx const signUpMutation = useMutation({ mutationFn: ({signUpForm: signUpForm}) => signUpRequest(signUpForm), onSuccess: (result, variables, context) => { if(result.status && result.status === 400) {...

adverse-sapphire

1/9/2023

Proper types for custom query hook

Hello. I'm trying to add types to custom query hook but get an error. What do I do wrong? Here is the code: ```...

adverse-sapphire

1/9/2023

Prevent nested requests using setQueryData

Hello. I've logged in user in the top of app and manually set user data to user's query cache with queryClient.setQueryData(userKey, user) And I don't expect additional requests in nested components which included useUserQuery with same key. But nested components send another request. Hot to prevent it? Do I do something wrong? I would like to combine two custom hook with query (login and fetching user) but I don't know how. That's why I put cache manually....

metropolitan-bronze

1/8/2023

Uncaught Error: No QueryClient set, use QueryClientProvider to set one

I am using a wrapper in the main consumer project to provide a query client for my private package. But it's not taking the context of the Main Project declaration ?

other-emerald

1/8/2023

query client declaration

Noticed in the docs we put the query client in the app and use useState to create referential stability ```// root.tsx import { Hydrate, QueryClient, QueryClientProvider } from '@tanstack/react-query' ...

plain-purple

1/8/2023

how to handle lists

I would like to render a list of multiple sorted Todos on the same, from a query that calls getAllTodos. Inside this list, I would like to be able to update a single Todo, from a mutation that calls updateSingleTodo, while also optimistically updating the Todo item in the list. When I call queryClient.setQueryData(['todos', { id: 5 }], newTodo), does React Query automatically know what Todo to update in the list of Todos? Or will I need to optimistically update the entire list of todos by replacing a single todo in that list? ...

generous-apricot

1/7/2023

Local State Storage Does this make sense?

```javascript // Is this overkill as a Context replacement for local state hook? I really like the idea of keeping all state in react-query.. export const useOnboardingWizard = () => { const [activeStep, setActiveStep] = useState(0) const [options, setOptions] = useState({ test: 'test' })...

rare-sapphire

1/7/2023

Data is not updating after calling refetch

I'm running into an issue where I can't get my react query callback to rerender my navigation stack when a user finishes onboarding. I can walk you through what I have now. ``` export default function Navigation() { const { data: userSession, isLoading, refetch } = useGetUserSession();...

xenial-black

1/6/2023

Typescript - pass queryOptions in custom hook to useQuery

How are we supposed to take useQuery's query options as parameter to our custom hooks and pass it down while maintaining proper typescript type information?

ratty-blush

1/5/2023

useMutation with action in React Router v6

Is there any way to useMutation with action in React Router v6?

generous-apricot

1/4/2023

Examples are all empty

None of the examples display anything. They're all just empty black boxes, including the one on the home page. A couple of screenshots are below. I also tried to view the Simple and Basic examples in CodeSandbox, but they're just as empty there as in the docs.

xenial-black

1/4/2023

My function is not running completely. It's not running as expected

Can anybody tell me what am I doing wrong in this function?

xenial-black

1/4/2023

How to stop a certain key from being stored in async storage?

Hello, forgive me if this has been documented elsewhere. I was wondering if there is a way to make it so certain keys don't get persisted into the async storage for caching? I tried providing cacheTime and staleTime as 0 but I can still see it in the cache. My use case is pretty weird. I have react-query in a chrome extension (if you are unfamiliar, think react-native application). I have the network requests cached to the async storage so that the values I want are available offline....

rare-sapphire

1/3/2023

All useQuery data is undefined...

Hi all, a bit of a weird error, but all of my useQuery data is undefined. I'm using axios, react-query v3, and I'm using react query (same version) on two projects. One project, is works just fine, the other one, every query is undefined. When I set the res.data to a variable on the bugged project, I can see the data no problem. In my other project, it works no problem as intended. The queries all return successes as well, they all load, return a 200 success, and become stale right on schedule. What on earth could be happening here?...

wise-white

1/3/2023

How can I implement clean architecture principles in FE using tanstack-query (react-query) ?

I am currently more experienced with redux+react architectures which help me to separated the different layers of my front-end application. In fact, if you consider the clean architecture (https://i.stack.imgur.com/Qoe42.png), you have different layers where UI (react code) is in the outer circle and business logic like usecase and domain are in inner circles. With redux, I can write the business logic into pure functions/class and indeed I don't depend on any UI framework nor redux. I am wondering how tanstack-query adress this ? Because it seems I need to use hooks to handle state-management + data-fetching, therefore there is no clear separate layers. Data-fetching is tangled with UI dependent code....

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