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

flat-fuchsia

5/21/2024

Help needed with Tanstack Query for Vue

I'm trying to make a demo of a simple app with optimistic update but I can't make the mutation showing as pending in another component from where the mutation was triggered. For example I have users list and add users page when I trigger the mutation inside the Add User component and try to listen to the same mutation inside UsersList the mutation shows as idle even though it's mutating in the background. I wrapped the pending state inside a computed property, I'm using Vue3 Composition API with Tanstack Query version: 5.27.5...

conscious-sapphire

5/19/2024

Custom hook to extract data property from axios response

Hi everyone! Is possible to create a custom vue query hook to return only the data attribute from AxiosResponse or only the content error from AxiosError (error.response.data)? I've tried to create a custom hook like this, but looks a wrong way to do that and the result has'nt been good...

wise-white

5/15/2024

vue-query Devtools panel doesn't show up

Does the native vue-query devtools panel work for you guys? I've tried Chrome and Firefox but it doesn't seem to show up.

loud-coral

4/24/2024

Hash sets correcly

JSON.stringify doesn't work correcly with sets. i have an object with filters that are sets and i pass these into the query function, whenever the set changes it doesn't change the queryKey correctly ```ts const filters = ref({ status: new Set() })...

eager-peach

4/18/2024

best practices for mutation side effects

i want to implement a popup to show "workorder id X created" when a mutation completes. I can do this in onSuccess. I also have a popup before that says the workorder is being created which im thinking can go into onMutate, and I since i want these popups to show every time the mutation runs I was wondering if it makes sense to put them in in these functions or if it is better to separate things more from a best practices perspective?

exotic-emerald

3/25/2024

tanstack query graphql vs vue-apollo composable

What could be a reason for migrating away from vue apollo to tanstack query?

flat-fuchsia

3/15/2024

Vue 3 setup API Tanstack Query with params not refetching data

Hi everyone could anyone help me with Vue3 Tanstack Query usage I've went through the docs and tried applying data refetch on parameter change but for some reason the api call is not being triggered... Any ideas? ```ts <script lang="ts" setup> import { fetchEnergyData } from "@/queries/useEnergyQuery";...

loud-coral

3/7/2024

QueryOptions return type

I want to create a Link component that handles routing but also want to prefetch data if the user hovers that link. I already make use of the queryOptions api so i created this factory ```ts export const clientQueries = { all: () => ['clients'],...

solid-orange

3/7/2024

Dynamic segments of the queryKey are undefined on page refresh and initial mount

What is the best way to handle this...? With Vue, I put the queryKey value inside a ref and I use watchEffect to update it and use refetch to fetch data for the first time to have it registered under the right queryKey

``
  const currentUser = inject<CurrentUserInject>("current-user");
  const queryKey = ref(

/carts/${currentUser?.data.value?.cartId}`); ...

eager-peach

3/3/2024

Best practice to separate fetching logic from component?

I want to call 1 of 2 possbile useQuery hooks each time a page loads. However I get ' vue-query hooks can only be used inside setup() function' when I attempt this with reactive variables and a watch. What is the best way to keep the following separate from my main page component: the useQuery hooks, logic that is required before the useQuery hooks to determine what values get passed to them, and data processing I do after fetching?

solid-orange

3/1/2024

Vue does not update the UI after the queryClient.setQueryData() call...

In the devtools cache, the value is being updated right away... Would someone know what is causing Vue's reactivity to break?

unwilling-turquoise

2/13/2024

Composing queries with queryOptions

There is a queryOptions function that accept the same props as useQuery etc. This would allow defining my queryKey and queryFn properties independent of usage while still resolve the correct types. https://tanstack.com/query/latest/docs/framework/vue/guides/query-options I want to be able to compose multiple pieces together easily but I'm having a lot of type issues. ...

eager-peach

1/31/2024

How to access what query key value changed that triggered the useQuery run inside useQuery queryFn?

How to access what query key value changed that triggered the useQuery run inside useQuery queryFn. In my case changing search filters will trigger the queryFn among other values such as the search input. However I want to reset pagination to page 1 when a filter is selected, where a filter is one of various query keys, but not all query keys for the given useQuery call.

other-emerald

1/28/2024

How do I mock API responses from useQuery with Vue and Vitest?

Does anyone have an example?

flat-fuchsia

1/22/2024

disabled label not updating/showing in vue devtools

Hello, I saw a previous issue https://github.com/TanStack/query/issues/2741 that was resolved for the react devtools, but it looks to me (unless I'm mistaken) that this issue persists on the vue devtools (see attached picture). My query is enabled: false initially hence the key with ['something', 'list', null] but I don't see a label in the middle column showing that it is disabled. Can this be fixed please or is there somewhere else I should be looking in the tools to see at a glance if its disabled?...

solid-orange

1/19/2024

Making getQueryData reactive in Vue

Hello everyone 😄 I've been able to update JSX with .getQueryData(["/query-key"]) in react, but I can't seem to achieve the same in Vue... Any ideas on how to make .getQueryData(["/query-key"]) reactive?...

conscious-sapphire

1/19/2024

Not working pagination ref paramter with refetch

useUserQuery.ts ``` export default function useUserQuery() { const queryClient = useQueryClient(); const searchQuery = ref<UserSearchQuery>({...

wise-white

1/14/2024

Tips on how to use vue-query with forms?

I have to display a list of users in which some fields will be directly editable on the list. Any tips on how to use vue-query in such cases? I've read https://tkdodo.eu/blog/react-query-and-forms but I'm not using any "forms" framework in Vue and also I'm suspecting there might be better ways to handle that in Vue....

wise-white

1/12/2024

Example code of indexdb with vue-query persisters

I can't find any docs regarding vue-query with indexdb

wise-white

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?

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