vue-apollo broken on 3.2.31 (was perfectly working on 3.2.30)

[M1CK431]

Version

3.2.31

Reproduction link

I would be very happy to provide a reproduction link, but it's a bit hard to demonstrate without a graphql API. In addition, the vue sfc playground don't allow to install a dependency (or I don't find how to do it).

Steps to reproduce

Using option API, do a graphql query with vue-apollo.

What is expected?

retrieve data

What is actually happening?

console error, the network request is even not sent at all

[LinusBorg]

Please follow Issue guidelines and provide a ( as runnable as possible) reproduction. We understand it may be hard, but we can't debug this by guessing what you might have one exactly.

I mean, at the very, very, very least provide the actual error message that you get.

[M1CK431]

Hi and thanks for quick reply,

Please follow Issue guidelines and provide a ( as runnable as possible) reproduction. We understand it may be hard, but we can't debug this by guessing what you might have one exactly.

I mean, at the very, very, very least provide the actual error message that you get.

I guess you could understand that I can't setup a whole stack to provide a runnable reproduction (really sorry about that).
About the error message, I have carefully read it and it seems useless for the debug, but here it is:

What I can do is provide some part of my source code and details about how I setup my SPA, in the hope it could be enough to discover the root cause of the issue.

package.json:

{
  "name": "admin",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@apollo/client": "^3.5.5",
    "@vee-validate/i18n": "^4.5.7",
    "@vee-validate/rules": "^4.5.7",
    "@vue/apollo-option": "^4.0.0-alpha.16",
    "@vueup/vue-quill": "^1.0.0-beta.7",
    "animate.css": "^4.1.1",
    "core-js": "^3.8.3",
    "file-saver": "^2.0.5",
    "graphql": "^16.0.1",
    "graphql-tag": "^2.12.6",
    "v-clipboard": "https://github.com/euvl/v-clipboard",
    "vee-validate": "^4.5.8",
    "vue": "3.2.31",
    "vue-remix-icons": "^1.1.1",
    "vue-router": "^4.0.3"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0-rc.1",
    "@vue/cli-plugin-eslint": "~5.0.0-rc.1",
    "@vue/cli-plugin-router": "~5.0.0-rc.1",
    "@vue/cli-service": "~5.0.0-rc.1",
    "autoprefixer": "^10.4.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "naive-ui": "^2.21.4",
    "postcss": "^8.4.4",
    "prettier": "^2.4.1",
    "tailwindcss": "^3.0.0"
  }
}

apollo.js (where vue-apollo is setup, included in my main.js and passed to app.use()):

import {
  ApolloClient,
  createHttpLink,
  InMemoryCache,
  from
} from "@apollo/client/core";
import { setContext } from "@apollo/client/link/context";
import { onError } from "@apollo/client/link/error";
import { createApolloProvider } from "@vue/apollo-option";
import { $auth } from "./auth.js";

// HTTP connection to the API
const httpLink = createHttpLink({
  // You should use an absolute URL here
  uri: process.env.VUE_APP_GRAPHQL_HTTP || "http://localhost:1337/graphql"
});

const authLink = setContext((_, { headers }) => {
  const { token } = $auth;

  return {
    headers: {
      ...headers,
      ...(token && { authorization: `Bearer ${token}` })
    }
  };
});

const logoutLink = onError(err => {
  // eslint-disable-next-line no-console
  console.log(
    "%cError",
    "background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;",
    err.message
  );

  err.toString().includes("Invalid token") && $auth.logout();
});

// Create the apollo client
export const apolloClient = new ApolloClient({
  link: from([logoutLink, authLink, httpLink]),
  cache: new InMemoryCache({
    typePolicies: ["Prospect"].reduce(
      (acc, type) => ({ ...acc, [type]: { merge: true } }),
      {}
    )
  })
});

export default createApolloProvider({ defaultClient: apolloClient });

Prospects.vue (only the related part aka apollo query, pretty sure it's useless but still):

apollo: {
    prospects: {
      query: prospectsQuery,
      update({ prospects: { data, meta: { pagination } = {} } }) {
        Object.assign(this.pagination, pagination);

        return data.map(prospect => new Prospect(prospect));
      }
    }
  }

Feel free to ask for any other information that could help to solve this issue.

[M1CK431]

Is there enough information to reopen this issue @LinusBorg ? 🙏 🥺

[LinusBorg]

The error message was helpful.

It's caused by an edge case of 8457d8b, where apollo defines a property with a getter on the component instance, and ghat getter would actually throw an error when called at that time as the object it accesses hasn'T been defined yet:

Essentially, this here happens first:

https://github.com/vuejs/apollo/blob/526fbacc18861029494963d03a88d7995f1cfc1f/packages/vue-apollo-option/src/mixin.js?_pjax=%23js-repo-pjax-container%2C%20div%5Bitemtype%3D%22http%3A%2F%2Fschema.org%2FSoftwareSourceCode%22%5D%20main%2C%20%5Bdata-pjax-container%5D#L20-L27

And only later, $apolloData is added, here:

https://github.com/vuejs/apollo/blob/526fbacc18861029494963d03a88d7995f1cfc1f/packages/vue-apollo-option/src/mixin.js?_pjax=%23js-repo-pjax-container%2C%20div%5Bitemtype%3D%22http%3A%2F%2Fschema.org%2FSoftwareSourceCode%22%5D%20main%2C%20%5Bdata-pjax-container%5D#L114-L122

Which is an issue with the new change in 8457d8b because that fix immediately calls the getter:

core/packages/runtime-core/src/componentPublicInstance.ts

Line 458 in 8457d8b

this.set!(target, key, descriptor.get(), null)

Will need some thought tp be put in what the right fix is, though.

[M1CK431]

Thanks a lot @LinusBorg for time and research.
Next time I will provide the error message even if it means nothing for me 🤭

Also, congrats for the nice and quick catch you did! 👏 🎩

[cexbrayat]

@M1CK431 Thanks for the report. That's my bad, I did not think of that edge case. I was going to fix it, but @lidlanca was faster and already opened a PR with a potential fix. I'll let the rest of the team approve and merge it, and then we'll be able to release a fixed version.

[M1CK431]

@cexbrayat: you're welcome, no problem, I simply fix vue dependency to 3.2.30 in my package.json waiting for the fix, not a big deal 😉 In fact, I'm proud to see that this report is useful for the community (and it was not possible without you 😂).

@lidlanca: thanks for the so quick fix, can't wait for the upcoming vue release now 🥳

Vue.js is so cool, keep up the good work! 💪 😘

[twelve17]

@LinusBorg @lidlanca - I came across this issue by way of vuejs/apollo#1350 . Looks like something in the fix in #5417 has still affected how the data is getting updated in vue apollo. I have an example app in a codesandbox in this issue: vuejs/apollo#1368 . It seems like reactivity is not totally working back to how it was in vue 3.2.30.

Is there something I can do to help track down the issue?

[LinusBorg]

Please open a new issue here with that reproduction (provided it's minimal, can't check it out tight now on mobile) and all additional information you can provide.

[twelve17]

@LinusBorg here you go #6099