vuejs / apollo

🚀 Apollo/GraphQL integration for VueJS
http://apollo.vuejs.org
MIT License
6.03k stars 523 forks source link

Queries are not executed in given order #1534

Open leje512 opened 9 months ago

leje512 commented 9 months ago

Describe the bug I've been debugging an application where the skip was not evaluated correctly and stumbled upon the issue of the queries being called randomly. I expected the queries to be called in the order in which I defined them, as its written in #430 too. In my project a lot of queries are dependent on values of other queries and if these are called before the other value, they will return wrong results as they use old values. I tried to debug this and initialized a minimal reproduction to find out how the order is defined: https://codesandbox.io/p/sandbox/nervous-voice-4kkyq8

apollo: {
    user: {
      query: ...,
      skip() {
        console.log("should skip user?", !this.id);
        return !this.id;
      },
      variables() {
        console.log("calls user", this.id);
        return {
          id: this.id,
        };
      },
      fetchPolicy: "cache-and-network",
    },
    post: {
      query: ...,
      skip() {
        console.log("should skip post?", !this.id);
        return !this.id;
      },
      variables() {
        console.log("calls post", this.id);
        return {
          id: this.id,
        };
      },
      fetchPolicy: "cache-and-network",
    },
  },

The current order is (most of the time):

  1. evaluate user skip()
  2. call user query
  3. evaluate post skip()
  4. call post query
  5. evaluate user skip()
  6. call post query
  7. evaluate post skip()
  8. call user query

Expected behavior The order should be used to execute the queries. So in this example:

  1. evaluate user skip()
  2. call user query
  3. evaluate post skip()
  4. call post query
  5. evaluate user skip()
  6. call user query
  7. evaluate post skip()
  8. call post query

If this is not a bug a possibilty would be to add an (optional) order property to the queries, in which they should get executed:) Thank you for your help!

Versions vue: 3.2.45 (Options API) vue-apollo: 4.0.0 @apollo/client: 3.9.2