T
TanStackā€¢2y ago
extended-salmon

Is this different behavior of `enabled` a bug?

I have this query function: 
  const get = (id: Ref<number | undefined>) => {
    return useQuery({
      queryKey: ['league', id] as const,
      enabled: () => !!id.value, // <--- This works as expected
      // enabled: !!id.value <--- This always disables the query
      queryFn: async ({ queryKey }) => {
        const [_key, id] = queryKey

        const data = await $fetch<League & { players: Player[] }>('/api/account/league', {
          query: { leagueId: id },
        })

        return data
      },
    })
  }
  const get = (id: Ref<number | undefined>) => {
    return useQuery({
      queryKey: ['league', id] as const,
      enabled: () => !!id.value, // <--- This works as expected
      // enabled: !!id.value <--- This always disables the query
      queryFn: async ({ queryKey }) => {
        const [_key, id] = queryKey

        const data = await $fetch<League & { players: Player[] }>('/api/account/league', {
          query: { leagueId: id },
        })

        return data
      },
    })
  }
Am I doing something wonky, or is there a reason thy using enabled: with a function and without produces different results? šŸ¤”
2 Replies
extended-salmon
extended-salmonOPā€¢2y ago
or is this producing a race condition?
conscious-sapphire
conscious-sapphireā€¢2y ago
In Vue Composition API, the setup script is only executed once per instance, so the !!id.value is only read once during component setup. Using a function or a computed ref here will allow Vue Query to detect changes to that value I've only used a computed ref here actually, I didn't know a function worked too, cool!

Did you find this page helpful?