Waiting for initial load

[rnenjoy]

One of my biggest issue with vue apollo and graphql is how to delay certain actions until the initial data is loaded. What is the correct way to handle this? Usually i hide components with v-if until data exists, but there is also need for waiting for initial data inside the vue object.

For example I could do certain actions in the result() function inside the apollo object, but what if my function needs data from 2 or more queries?

Is there any simple way to trigger a method after all the initial graphql queries are loaded?

[rnenjoy]

@Akryum can you give me some point in what direction to go?

[jdus]

@rnenjoy: I guess if you want for all three queries to be run you either have to use smart queries and wait for all of them to resolve (i.e. resolveAll). Or you use the "skip()" function to wait for other queries to be finished first.

EDIT: I actually mean "Promise.all", see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

[rnenjoy]

@jdus ok ill investigate!

[j0h]

Hey @rnenjoy, were you able to investigate any further?

Currently I need two smart queries to run before the third and I'm using the skip() approach by keeping a global count. The skip() logic in the third query is checking if this.skip_count < 2 and in the result() method of the other queries I'm just doing this.skip_count++'. I'm not sure if this would cause race conditions as sometimes the third query doesn't execute at all.

Is there a cleaner way to do this when using smart queries or would I have to go down the Promise.all route?

[rnenjoy]

@j0h that sounds clever! My problem was more that components renders without data being fetched. Switched to batch link, and then use v-if on some dependency data on a component.

[jdus]

Hello @j0h,
as suggested earlier, I believe Promise.all is way cleaner. You could wait for your first two promises to resolve and then go on with your third query. Check out an example for using Promise.all at mdn.

[j0h]

Hey @jdus, I came across this comment made by @Akryum (#407 (comment)):

Also I do not recommend to do the queries manually, you lose reactivity, SSR support, and your code will be imperative instead of descriptive which increase the risk of bugs.

I would be limited to doing the queries manually (Promise.all([this.$apollo.query({...}), this.$apollo.query({...})])) if I were to go down the Promise.all method, I guess this is still cleaner despite losing all the features mentioned in the quote?

[jdus]

Hi @j0h,
yes, avoid manually doing queries where it's possible. Is it possible in your case?
What's the default values for the results of the first two queries? If they are null or fixed, you could also check for these fields in skip() of the third function. If both have changed, execute the third query. Then you lose nothing and it's immediately clear that the third query depends on the first two.

[j0h]

@jdus The issue I'm currently trying to solve with the skip() is that my third query has an update(data) {...} function to customise the results based on the data I get back from the first and second query. The function loops through the array of results from the third query and updates its values which gets displayed in a table.

I still need the third query to run regardless of the results from the first two queries (which could be null or have results). The conditional logic in the update function accounts for when there are null results.

So I should still be able to do this without doing manual queries, maybe the skip() approach could be cleaner, instead of checking on a simple skip_count, I could utilise the state of this.$apollo.queries.<query>.loading? Do you see any other approach that would be better while still using smart queries?

[jdus]

Well, variables are reactive, so you could use the results of the first two queries as variables for the third query. If one of the first two results changes, the third query will be executed. Could be wasteful, but eventually you get what you want I suppose?

[shtse8]

but in SSR, there is no reactive.

[j0h]

True, though this would potentially mean the third query could run multiple times if there is a delay between the first two queries. I will re-consider all the options discussed and see what works out better. Thanks for all the help @jdus.

[M1CK431]

We could use the result hook for that.

For example:

<template>
  <div>I'm a Vue component</div>
</template>

<script>
import gql from "graphql-tag";

export default {
  data: () => ({ firstAsset: null, secondAsset: null }),
  apollo: {
    firstAsset: {
      query: gql`query { firstAsset }`,
      result() {
        this.init();
      }
    },
    secondAsset: {
      query: gql`query { secondAsset }`,
      result() {
        this.init();
      }
    }
  },
  methods: {
    init() {
      if (!this.firstAsset || !this.secondAsset) return;
      console.log("All gql queries loaded!");
    }
  }
};
</script>

Of course, there is others ways to use the result hook to reach the goal, like:

• increment a counter and watch for it to call the init method when the counter reach the number of waited queries
• since result receive the query key as second parameter, use it to update an array which list the loaded queries then check for all required queries in the init method

The result hook is documented here: https://apollo.vuejs.org/api/smart-query.html#options