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

xenogeneic-maroon
xenogeneic-maroon1/30/2023

usage of queryClient.getQueryData results in errors

Hello đź‘‹ Im using Nuxt3 (SPA) and have a query ta fetch data and then i have a function that retrieve that data into the cache (later stage it will apply some filterting/mapping). When i try to call that function to return the query cache, i get the following errors: In console: ````...
No description
harsh-harlequin
harsh-harlequin1/18/2023

Vue useQuery and Vitest

Does any one have a snipet an example or a hint how do you go about testing a component that has a useQuery in it? Do we just mock the async function that the query is using?...
No description
statutory-emerald
statutory-emerald1/8/2023

Typing issue in template in Intellij Webstorm

Hi, is anyone here using webstorm? I'm getting some wonky typing in the templates (whereas in the script block the types are correct). VS Code works fine, and I've already submitted a Webstorm bug but just wondering if anyone has run into this and knows a workaround. Vue 2.7/3...
graceful-blue
graceful-blue1/4/2023

How can I refetch on a useQuery() in composable as its outside of script setup?

I am having issues where something has happened in my app and I need to refetch a specific query, but where the logic of something happening is in a composable which is looped back on itself (polling server for something) which means it is executing outside of script setup. Is there a way I can do this outside of script setup?...
No description
conscious-sapphire
conscious-sapphire12/6/2022

exhaustive-deps with a ref

I've read a couple threads here and on GitHub but couldn't find a clear answer. Is the lint rule correct and should I add articleUuid?.value to the queryKey array, or is the lint rule wrong? ```ts...
absent-sapphire
absent-sapphire11/30/2022

How to use Vue ref value assigned in a useQuery as the enabled option in another useQuery?

vue script setup includes (psuedo code): ``` const var = ref<string>("") useQuery function that is passed var and assignes value to var.value useQuery function that is passed var and has enabled option of var.value !== ""...
foreign-sapphire
foreign-sapphire11/28/2022

Dates as keys - prefetching

I'm after some guidance or best practice when it comes to prefetching, some of my queries have a LOT of options and live in it's own composable. But then to prefetch, I have to know the query key in advance. This becomes very tricky when dates and date ranges are involved. Does anyone have any tips/tricks in terms of structure your queries? Do you have a single useFetchUsers query and then useFetchUser query composable files? Where do you actually keep these? And do they export the default q...
wise-white
wise-white11/25/2022

How to use QueryClientProvider in vue 3? i can't find it on the package

so guys i wan't to ask how can i use QueryClientProvider in vue 3 like react.. so i can apply inside app.vue as a wrapper, thank you
xenial-black
xenial-black11/17/2022

Working sample with Vue 3.2 anyone?

Would be great to se a code example...
national-gold
national-gold11/9/2022

Problem vue-query hooks can only be used inside setup() function.

Hi, I am working on a project in which some data of a user is intended to be fetched after a specific button is clicked. I defined an arrow function in composition API and it looks like the following: ```ts <script setup lang="ts"> const fetchUserRelatedProgram = (uid: number) => { return useQuery(["reviewerProgram", uid], async () => {...
foreign-sapphire
foreign-sapphire11/8/2022

What is the best way to handle dependent queries. Will the `useQuery`?

user.value must be a string before the query can run. target accepts a string to build the query string however typescript is complaining because it thinks it could be null there
No description
like-gold
like-gold11/7/2022

general question about setup

Im building a nuxt app and want to integrate tanstack query as my global state. i found the installation direction on the website but its seems to be for a react project. is there a different npm install for a vue.js project or do i use the same?
adverse-sapphire
adverse-sapphire10/27/2022

Complications of only being able to run useQuery in setup

Let’s say I do not yet have arguments that will yield an object of a certain shape from a query. So the result of the query will be some nullish value or empty object I do not necessarily want to run the query until I know the response will yield an object of the correct shape for reactivity / performance reasons. (Bad to add keys to object, won’t be reactive without workaround) A strategy I have that’s currently working is to just nest the returned object in a “data” key so that I can still track reactivity. I can make this a bit cleaner by returning a computed function thay returns this key instead of the normal data object from the useQuery composable. This solves the reactivity issue....
foreign-sapphire
foreign-sapphire10/27/2022

Refetch on invalidate

Is it possible to refetch a query immediately upon invalidated or should I use queryClient.refetchQueries(); after invalidating?
metropolitan-bronze
metropolitan-bronze10/25/2022

Does tanstack vue-query compatible with nuxt?

Our company wants to migrate using vue query, but still has some doubt about the vue-query experimental on nuxt. Does the current @tanstack/vue-query still in experimental state just like the former vue-query package?...
foreign-sapphire
foreign-sapphire10/24/2022

Best practice for returning response data

All of my api resources (responses) are wrapping in data - regardless of whether it's a collection or not. I'm just wondering where the best place to handle this is? Currently I have a userClient that simply houses all of the API calls so it returns the whole response. Then my userQueries can access that at response.data.data but I'm just wondering if maybe my userClient should simply return what's in the data object?...
foreign-sapphire
foreign-sapphire10/24/2022

Vue composables pattern

Is it best to have a composable per query/mutation? Or a single composable that returns them all? For example ```ts export const useUserQueries = () => {...
foreign-sapphire
foreign-sapphire10/24/2022

setQueryData old data type

I'm not sure if I'm doing this correctly - but old will always be defined - or will it? Should I have to account for old being undefined as per the type error? In what case would this be undefined?
No description
foreign-sapphire
foreign-sapphire10/19/2022

Handling 404 on fetch

If I had a query, something like the below in my view user page
const { data: user } = userQueries.getUser('1234'); // just a basic query to get the user based on the prop
const { data: user } = userQueries.getUser('1234'); // just a basic query to get the user based on the prop
Where this will actual throw a 404 error, what would be the best way for me to redirect from the current page (UserView) back to the main table page (UserIndex)? Probay important to note that userQueries comes from a composable outside of the component...
foreign-sapphire
foreign-sapphire10/18/2022

When using KeepAlive

I'm experimenting with KeepAlive - is it possible to trigger a network fetch on activated ?