question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ref and reactive options

See original GitHub issue

Hey,

I noticed that if you have values which are already a ref the options parameter doesn’t recognise a change on those values. Is there a proper way to get around this?

Example

// enabled is externally changed
const enabled = ref(false);

const options = reactive({ enabled: enabled.value });

// if enabled is changed to true, the query does not fire
const q = useQuery('query', myFunction, options)

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:14 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
DamianOsipiukcommented, Apr 22, 2021

Hmm in this case something like this should work for you:

setup() {
    const opts = reactive({
      retry: 0,
      staleTime: 1000,
      cacheTime: 2000,
      enabled: false
    });

    onMounted(() => {
      setTimeout(() => (opts.enabled = true), 4000);
    });

    const { isLoading, isError, isFetching, data, error, refetch } = useQuery(
      'todos',
      todoFetcher,
      opts
    );

    return { isLoading, isError, isFetching, data, error, refetch };
  }

or

setup() {
    const enabled = ref(false);
    const opts = reactive({
      retry: 0,
      staleTime: 1000,
      cacheTime: 2000,
      enabled,
    });

    onMounted(() => {
      setTimeout(() => (enabled.value = true), 4000);
    });

    const { isLoading, isError, isFetching, data, error, refetch } = useQuery(
      'todos',
      todoFetcher,
      opts
    );

    return { isLoading, isError, isFetching, data, error, refetch };
  }
1reaction
1safcommented, Apr 22, 2021

Your example works because the reactive you check does not rely on any refs, however, for my case, I need to rely on a computed ref. (In reference to onkarj)

Read more comments on GitHub >

github_iconTop Results From Across the Web

Vue 3 Composition API: Ref vs Reactive - Dan Vega
ref() takes an inner value and returns a reactive and mutable ref object. The ref object has a single property .value that points...
Read more >
Ref() vs Reactive() in Vue 3 — what's the right choice? - Medium
ref() can take as arguments primitives (most common: Boolean , String and Number ) as well as Objects, while reactive() can only take...
Read more >
ref vs reactive in Vue 3? - Stack Overflow
Typically, ref and reactive both have been used to create reactive objects where ref is used to make the primitive values to be...
Read more >
Reactivity API: Core - Vue.js
If an object is assigned as a ref's value, the object is made deeply reactive with reactive(). This also means if the object...
Read more >
Vue 3 Composition API: ref() vs. reactive() - Markus Oberlehner
Let's start with the basics: you must use ref() to create a reactive primitive value. // Boolean ref const isVisible = ref(true); ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found