Please help - Need to create query in Vue2 which is depended on some data in the consuming component

[onkarj422]

I have this query

export function useObjectsByClassGroupId() {
    const { classGroupId }: any = toRefs(useThis('classGroupId'));
    const queryKey = 'objects';
    const queryParams = reactive({
        apiFn: 'getObjects',
        params: [classGroupId],
    });
    const options = reactive({
        ...DEFAULT_OPTIONS,
        enabled: computed(() => isValidParams(classGroupId)),
    });
    return reactive(useQuery([queryKey, queryParams], queryFn, options));
}

Now, 'useThis' could be some hook which gets me property classGroupId from the component this query is being used in.

So, I tried building the hook

export function useThis(key) {
    const instance = getCurrentInstance();
    const valueRef = ref(null);
    const setValue = () => {
        const value = get(instance, `proxy.${key}`);
        if (value) {
            valueRef.value = value;
        }
    };
    onMounted(setValue);
    onUpdated(setValue);
    return reactive({
        [key]: valueRef,
    });
}

This works but only when a change in the component triggers onUpdated. And not all changes trigger onUpdated. Let's say classGroupId is not used in template of the component, in that case change in classGroupId won't trigger onUpdated.

Please help with this.

[DamianOsipiuk]

Hi,
If I understand the use-case correctly, you want to create some query that is depending on components data. Which is created the old way.
So something like:

export defineComponent({
  setup() {
    const query = useQuery(['query1', myData], queryFn)
    return {}
  },
  data: () => ({
    myData: 'something'
  })
)

The problem here is that the setup function is invoked before the component instance is created. And you are trying to work around the problem by accessing the instance proxy, and get the data from there?

If that is the case, then I think you could try to do it this way:

export defineComponent({
  setup() {
    const myDataRef = ref()
    const queryKey = reactive(['query1', myData]) // not sure if wrapping with this reactive is necessary
    const query = useQuery(queryKey, queryFn)
    return {
      myDataRef,
    }
  },
  data: () => ({
    myData: 'something'
  }),
  watch: {
    myData: function (val) {
      this.myDataRef = val
    },
  }
)

Please be mindful about the code, since it's written from the head and not tested in any way.
Let me know if it works

[onkarj422]

Hi,
If I understand the use-case correctly, you want to create some query that is depending on components data. Which is created the old way.
So something like:

export defineComponent({
  setup() {
    const query = useQuery(['query1', myData], queryFn)
    return {}
  },
  data: () => ({
    myData: 'something'
  })
)

The problem here is that the setup function is invoked before the component instance is created. And you are trying to work around the problem by accessing the instance proxy, and get the data from there?

If that is the case, then I think you could try to do it this way:

export defineComponent({
  setup() {
    const myDataRef = ref()
    const queryKey = reactive(['query1', myData]) // not sure if wrapping with this reactive is necessary
    const query = useQuery(queryKey, queryFn)
    return {
      myDataRef,
    }
  },
  data: () => ({
    myData: 'something'
  }),
  watch: {
    myData: function (val) {
      this.myDataRef = val
    },
  }
)

Please be mindful about the code, since it's written from the head and not tested in any way.
Let me know if it works

Hello,
Tried this. It works for that single query instance where we set this.myDataRef = val. Other instances will not be re rendered or updated.
Anything we are missing here?

[DamianOsipiuk]

Could you provide some examples or elaborate more on what you mean?
I do not understand what you mean by other instances of the query

[onkarj422]

Yeah, so let's suppose we have a reusable custom query something like this (which is using the similar implementation to yours for passing parameters) -

export function useCustomQuery() {
    const myParam = ref(null);
    const options = reactive({
        enabled: computed(() => !!myParam.value),
    });
    return reactive({
        fetch: (_myParam) => {
            myParam.value = _myParam;
        },
        ...useQuery(['custom', myParam], queryFn(myParam), options),
    });
}

This query i would call in a component something like this

export defineComponent({
  setup() {
    return {
      myCustomQuery: useCustomQuery(),
    }
  },
  data: () => ({
    myData: 'something'
  }),
  methods: {
    getCustomData: function () {
      this.myCustomQuery.fetch(this.myData);
    },
  }
)

This will do the work, it will call the query with the parameter that i send from my component to my custom fetcher function.

But, if i use this same useCustomQuery in some other component, the myParam ref will have a separate instance there. Because of which the query will never get fetched in that other component.

So, the solution is to take the myParam ref outside the useCustomQuery hook (basically outside our setup). Something like this -

const myParam = ref(null);
export function useCustomQuery() {
    const options = reactive({
        enabled: computed(() => !!myParam.value),
    });
    return reactive({
        fetch: (_myParam) => {
            myParam.value = _myParam;
        },
        ...useQuery(['custom', myParam], queryFn(myParam), options),
    });
}

Now, this can be reused in any component and the myParam will always be updated.

[onkarj422]

My other problem with this recipe was that the custom fetch functon which i created needed to be async. So, after a lot of trial and error, I came to this final solution for a recipe for fetching a query dependent of something which is available only at some point in component.
Although this implementation will only be needed for Vue 2 options API based components, it still seems a valid pattern (correct me if i am wrong here).

So, here's a utility function to create an async fetcher function which accepts parameters and can be sent down to component with useQuery result -

export const createAsyncFetcherFunction = (queryResult, ...paramsRefs) => (...params) => new Promise((resolve, reject) => {
    paramsRefs.forEach((paramsRef, index) => {
        paramsRef.value = params[index];
    });
    watch(queryResult.isFetched, (isFetched) => {
        if (isFetched) {
            resolve(queryResult.data.value);
        }
    });
    watch(queryResult.isError, (isError) => {
        if (isError) {
            reject(queryResult.error.value);
        }
    });
});

This is how we can use it in our above useCustomQuery

const myParam = ref(null);
export function useCustomQuery() {
    const options = reactive({
        enabled: computed(() => !!myParam.value),
    });
    const queryResult = useQuery(['custom', myParam], queryFn(myParam), options);
    return reactive({
        fetchAsync: createAsyncFetcherFunction(queryResult, myParam),
        ...queryResult,
    });
}

Now in my component, I could do this

this.myCustomQuery.fetchAsync(this.myData).then(() => {
    console.log('anything after fetch!');
}):

So, this works good and i think is a satisfactory pattern for current requirement.

Please, suggest/correct if anything wrong with this or if any better approach to the same.

[DamianOsipiuk]

Hmm, I think that this is correct behavior.
If I get it right you will have two components on the displayed page. And you want to update both of them whenever one of them receives the data.
In this case, both of them will be updated if both of them will have the same key.

Let's take both queries with a key foo. Whenever any of them will encounter a condition that should trigger a fetch, it will do that (in your case by setting enabled to true).
Despite that the other query is disabled, it will receive the updated data that was fetched and trigger rerender.
Therefore you do not have to add this parameter to the query key to sync the updates.

In case you have this generic hook that supports everything (which I think is not the best idea, unless you are adding some compat layer), you can pass the key as a prop to make sure multiple components would sync at the same time.
Ex. export function useCustomQuery(key: string | string[]) {

I hope that makes sense.