extended-salmon

No refetch on query key change

Repro: https://codesandbox.io/s/vue-query-keys-8c95g0?file=/src/App.vue I'm having issues where my query does not refetch even though its query key has changed. If the component is remounting the query runs with the updated archived state. Am I missing something? I am using @tanstack/vue-query + @lukemorales/query-key-factory

export default defineComponent({
  name: 'Todos',
  setup() {
    const { showArchivedTodos } = useTodos()

    const { data: todos } = useTodos({
      filters: {
        is_archived: showArchivedTodos.value // Dynamic value which correctly updates via toggle but does not trigger a refetch once updated
      },
      queryOptions: {
        staleTime: 0
      }
    })

    return {
      todos,
      showArchivedTodos
    }
  }
})

export default defineComponent({
  name: 'Todos',
  setup() {
    const { showArchivedTodos } = useTodos()

    const { data: todos } = useTodos({
      filters: {
        is_archived: showArchivedTodos.value // Dynamic value which correctly updates via toggle but does not trigger a refetch once updated
      },
      queryOptions: {
        staleTime: 0
      }
    })

    return {
      todos,
      showArchivedTodos
    }
  }
})

export const useTodos = (opts?: {
  filters?: TodosFilters
  queryOptions?: UseQueryOptions<
    Todos,
    unknown,
    Todos,
    TodosKeys['list']['queryKey']
  >
}) => {
  const { filters, queryOptions } = opts ?? {}

  return useQuery({
    ...queries.todos.list(filters),
    ...queryOptions,
    initialData: initialTodos
  })
}

export const useTodos = (opts?: {
  filters?: TodosFilters
  queryOptions?: UseQueryOptions<
    Todos,
    unknown,
    Todos,
    TodosKeys['list']['queryKey']
  >
}) => {
  const { filters, queryOptions } = opts ?? {}

  return useQuery({
    ...queries.todos.list(filters),
    ...queryOptions,
    initialData: initialTodos
  })
}

export const todosKeys = createQueryKeys('todos', {
  list: (filters?: TodosFilters, config?: AxiosRequestConfig) => ({
    queryKey: [{ filters }],
    queryFn: ({ signal }) => getTodos({ filters, config: { ...config, signal } })
  })
})

export const todosKeys = createQueryKeys('todos', {
  list: (filters?: TodosFilters, config?: AxiosRequestConfig) => ({
    queryKey: [{ filters }],
    queryFn: ({ signal }) => getTodos({ filters, config: { ...config, signal } })
  })
})

mauricewegner

CodeSandbox

vue-query-keys - CodeSandbox

vue-query-keys by mauricewegner using @lukemorales/query-key-factory, @tanstack/vue-query, axios, core-js, register-service-worker, tslib, vue

14 Replies

deep-jade•3y ago

Hi 👋 Have you tried using the dedicated developer tools to see if the query key is actually changing?

extended-salmonOP•3y ago

Hi @Louis 👋 Yes, the query key is actually changing but it does not show up as a new query unless the component remounts. Then the query appears as a new query with the updated archived state (which is coming from a state manager)

deep-jade•3y ago

It sounds like there's something odd at play here. Please can you provide a minimal reproduction? I'm not familiar with the query key factory package so I can't see if it's being misused

extended-salmonOP•3y ago

Will do

extended-salmonOP•3y ago

Here's a little repro @Louis https://codesandbox.io/s/vue-query-keys-8c95g0?file=/src/App.vue

mauricewegner

CodeSandbox

vue-query-keys - CodeSandbox

vue-query-keys by mauricewegner using @lukemorales/query-key-factory, @tanstack/vue-query, axios, core-js, register-service-worker, tslib, vue

deep-jade•3y ago

Thanks. I didn't realise this was a Vue issue; I've never worked with Vue before but I noticed you have an invalid limit prop. Change the limit and have a look in the console, fix this issue and then let me know if the problem persists 🙂

extended-salmonOP•3y ago

Could you recheck? I'm not receiving errors on codesandbox about any invalid props

deep-jade•3y ago

Try changing the limit value and then checking the console

extended-salmonOP•3y ago

Ah yes i see what you mean doesn't change the problem whatsoever, lemme update anyways I've updated it but the core reason of the problem is that although this prop is changing the query does not automatically refetch

deep-jade•3y ago

I'm not familiar with Vue so I'll leave this for someone who is. Apologies I couldn't offer more help!

extended-salmonOP•3y ago

I could listen to the prop change and then manually refetch but as it is part of the query key it shouldn't be necessary All good, thank you anyways 👍

fair-rose•3y ago

Maybe @MrMentor can have a look?

modern-teal•3y ago

Change

filters: {
  limit: props.limit
},

filters: {
  limit: props.limit
},

filters: props,

filters: props,

And it will work in this example. Reason being props is a reactive proxy and accessing and passing limit directly looses reactive wrapper. This it the same situation as destructuring reactive where you loose reactivity

// those destructured vars would not be reactive!
const {a, b, c} = reactive({a, b, c})

// those destructured vars would not be reactive!
const {a, b, c} = reactive({a, b, c})

Other way would be to

const filters = computed(() => {
  return {limit: props.limit}
})

const filters = computed(() => {
  return {limit: props.limit}
})

And then access filters.value in queryFn

extended-salmonOP•3y ago

@MrMentor That totally makes sense. It was indeed the lost reactivity which caused this issue. Thank you very much for your fast help guys 👍

Gaming

Programming

No refetch on query key change

Did you find this page helpful?