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

rival-black

1/11/2024

While a query is disabled it still creates entries in the query cache

I noticed that even if a query is set to enabled: false it still creates entries in the query cache when the query key changes. Is that the desired behavior or am I doing something wrong?

adverse-sapphire

1/8/2024

How to disable Nuxt SSR running queries?

I am trying to use TanStack Query with Nuxt for a pre-rendered/SSG/Jamstack app with client-side data fetching. For this reason I want to stop TanStack Query from running queries on the server (at pre-render). There does not seem to be an ssr option, and the closest thing I have found is setting enabled to process.client. Is this fine? It's tricky to avoid hydration warnings with e.g. isFetching though.

rival-black

1/8/2024

How do I create a resuable composable for a mutation?

Thanks for this great library. I have a mutation that I want to reuse in multiple places, but I'm having trouble typing the options in the composable that I want to create e.g ```ts export const useSaveUser = (options: MutationObserverOptions) => { return useMutation({...

absent-sapphire

12/6/2023

No question - just thanks!

Just want to say how much I'm enjoying getting to know how TanStack Query works. As a web developer from the 90's who took a break until this year, I gotta say this is all very impressive! Thanks for all the hard work making it!

other-emerald

12/4/2023

Accessing unselected (unmodified) data as returned by the queryFn

I fetch some data with query which is wrapped with custom hook. So far, I have just used a map function hard coded in the useQuery call. But now I have a need to access the unmapped raw data as it was fetched. I think I read somewhere here about passing a select fn per use case. However, I'd like to optionally pass the whole options object, so I can maybe pass the enabled option, or whatever is needed. What's the best approach here? My first guess was smth like `Pick<UseQueryOptions, "se...

genetic-orange

11/29/2023

Am I doing composables wrong?

I have a component that ended up with a lot of queries that were used to derive a value, so I figured I'd refactor that logic into its own file, but I'm having some trouble getting vue-query to work in a composable scenario. Here's a redacted and simplified version of what my external module now looks like: ```ts export function useDownloadStatus (filename: string) { const status = ref('loading')...

other-emerald

11/13/2023

Is this different behavior of `enabled` a bug?

I have this query function: ```ts const get = (id: Ref<number | undefined>) => { return useQuery({...

solid-orange

11/7/2023

Has anyone got @lukemorales/query-key-factory to work with vue-query?

I tried using @lukemorales/query-key-factory but I can't really get it to work with reactive data. I'm not sure if i'm missing something or if it just doesn't support reactivity. ```ts const test = createQueryKeys('test', { acceptsStatic: (someValue: number) => ({...

eastern-cyan

10/13/2023

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

I created custom composable to use on page login, but when hit that function i got that error. Is it my mistake or what.

like-gold

10/1/2023

Dynamic Data Fetching Challenges with Vue and Sockets

1. I've implemented a socket listener for when a new alert is received. Once I get a new alert, I update the alertId ref and expect the associated query (i.e., useGetAlert) to fetch the data based on this updated alertId. However, it seems that the only way I'm able to see the updated data is by setting up a watch on the isSuccess ref from the useGetAlert function. Without this watcher, it appears as though the new data isn't fetched or updated. Question 1:...

absent-sapphire

9/27/2023

Invalidating query during mutation not working

So, I have a problem I'd like to ask about that is quite elementary. I've built a simple ToDo app on a single page. The problem is I can't get the "invalidateQueries" to work after mutating the data in my database.
Initial list of items:

const getTodos = () => fetch('http://localhost:3000/api/todos').then(response => response.json())...

like-gold

9/25/2023

Refetch when input value changes.

i have 2 pages: 1. BaseInputSearchResults.vue 2. useLp.ts (Vue/query hook) ...

vicious-gold

9/20/2023

useQueries on dependant query

The example on https://tanstack.com/query/latest/docs/vue/guides/dependent-queries is either incorrect or incomplete but I have yet to make is work without warning and weird shenanigans. Since you are dependant on your first query, your list of queries must be a computed in order to be reactive then you need to call useQueries with your array of queries but since it is a computed in order to get the reactivity you would end up with something like : ```...

rare-sapphire

9/2/2023

Optimal data transformations without effecting query cache?

What is the vue alternative to useMemo described in https://tkdodo.eu/blog/react-query-data-transformations. computed does not allow specifying dependencies. I am thinking a watch could be used to implement the example in the blog post, by watching the length of the returned data but im not sure if theres a best practice for this thats different. Generally I modifying the query cache if the modification is inherent to the data itself but if I need to make a modification for a one off use case or for a section of my app I can use a wrapper function or what the blog post calls a 'render function' that modifies the query data as needed and returns it or stores it in a pinia store....

other-emerald

9/1/2023

How to check if there's a currently used query in cache

I need to check if there's an active query being used in the UI. I tried with

queryClient.getQueryData | getQueryState (queryKey, {type:'active'})

queryClient.getQueryData | getQueryState (queryKey, {type:'active'})

but am always getting undefined....

other-emerald

8/28/2023

View mapped data in vue-query devtool

Is there a way to look at the data mapped by vue-query's select method within the vue-query devtool? If I look at the cache, the data shown is the data that's returned from the API. I'd love to be able to look at the remapped data somehow....

fascinating-indigo

8/27/2023

how can i re-run useQuery if queryKey changed with help of props without watch and refetch?

step 1 - change 1 to 2 in input https://codesandbox.io/p/sandbox/strange-estrela-wx59mw actual - it is not fetch again after change number in input ...

other-emerald

8/25/2023

How to keep 'enabled' prop reactive when a Ref is passed

My code: ``` export const useSearchQuery = (input: Ref<string>) => useQuery({ queryFn: async ({ signal }) => { const { data: { data } } = await fetchSearch(input.value, signal)...

harsh-harlequin

7/15/2023

Make useQuery re-run when refs change

Hello, i'm a React developer trying to get the hang of using vue-query with Vue Is there any example out there showcasing how do i go about making useQuery fire again when one of my refs change? Do i have to call it once inside the setup function and then again within the onUpdated lifecycle hook?...

constant-blue

6/29/2023

Usage from within a Vue plugin

I am looking to create a Vue plugin that needs to be able to access the cache and refetch if necessary. Is this even possible considering useQuery can only be used in a setup function?

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