Cannot read properties of undefined (reading 'data')

[zaolune]

my dependencies:

"dependencies": {
    "@apollo/client": "^3.5.8",
    "@element-plus/icons-vue": "^0.2.7",
    "@vue/apollo-option": "^4.0.0-alpha.16",
    "autoprefixer": "^9.8.8",
    "core-js": "^3.6.5",
    "element-plus": "^2.0.2",
    "graphql": "^16.3.0",
    "graphql-tag": "^2.12.6",
    "postcss": "^7.0.39",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0"
  },

my code:

<template>
  <router-view />
</template>
<script>
import gql from "graphql-tag";
export default {
  apollo: {
    // do not work
    me: gql`
      {
        me {
          isStaff
        }
      }
    `,
  },
  created() {
    this.$apollo.addSmartQuery("me", {
      // work
      query: gql`
        {
          me {
            isStaff
          }
        }
      `,
    });
  },
};
</script>

error:
TypeError: Cannot read properties of undefined (reading 'data')
get: function get() {
return _this.$data.$apolloData.data[key];
},
can someone help me？

[LinusBorg]

it's a bug in Vue 3.2.31, we already have a fix ready. In the meantime, pin your Vue version to 3.2.30

[ebisbe]

@LinusBorg After dowgrading to v3.2.30 I still have that error plus 2 more. I'm doing a conversion from Vue2 to Vue3 so I'm not sure if it's related to something else...

backend.js:702 An error occurred in hook walkComponentTree

backend.js:703 TypeError: Cannot read properties of null (reading 'component')
    at ComponentWalker.getInternalInstanceChildren (backend.js:5977:17)
    at ComponentWalker.capture (backend.js:6035:27)
    at backend.js:6055:87
    at Array.map (<anonymous>)
    at ComponentWalker.capture (backend.js:6055:54)
    at ComponentWalker.findQualifiedChildren (backend.js:5937:26)
    at ComponentWalker.getComponentTree (backend.js:5907:17)
    at backend.js:6297:48
    at DevtoolsHookable.callHandlers (backend.js:700:17)
    at DevtoolsApi.callHook (backend.js:192:29)

vue-apollo-option.esm.js:1539 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'data')
    at Object.get (vue-apollo-option.esm.js:1539:46)
    at Object.defineProperty (vue.runtime.esm-bundler.js:10093:46)
    at Function.defineProperty (<anonymous>)
    at _loop2 (vue-apollo-option.esm.js:1537:18)
    at Proxy.proxyData (vue-apollo-option.esm.js:1554:7)
    at Proxy.beforeCreate (vue-apollo-option.esm.js:1654:17)
    at callWithErrorHandling (vue.runtime.esm-bundler.js:1620:36)
    at callWithAsyncErrorHandling (vue.runtime.esm-bundler.js:1629:21)
    at callHook (vue.runtime.esm-bundler.js:5029:5)
    at applyOptions (vue.runtime.esm-bundler.js:4778:9)

[LinusBorg]

The backend error is from devtools, not Vue.

The second error is still the one from .31, so please verify that you are on .30

[ebisbe]

The second error is still the one from .31, so please verify that you are on .30

 yarn list vue
yarn list v1.22.17
warning Filtering by arguments is deprecated. Please use the pattern option instead.
├─ vue-waypoint@3.5.2
│  └─ vue@2.6.14
└─ vue@3.2.29
✨  Done in 0.43s.

Maybe a cache thing? I deleted the node_modules/.vite folder

Edit: I downgraded to .29 just to try to force it. Also tried vite --force

[landtechjoe]

I had this error today when trying out a migration from vue2 to vue3 it looks like @vue/apollo-option has a beforeCreate step that tries to get data from this.$data.$apolloOption but that property is set in the create callback which, as the names suggest, runs afterwards so it isn't available at the time it runs.

I tried using optional chaining on the property access this.$data?.$apolloOption?.data?.[key] which appears to resolve the issue but i have no idea if it will cause any unexpected problems as I am not at all familiar with the codebase. 🤷

[zivenyang]

The problem is solved after the vue version is specified to 3.2.30 😃

npm install vue@3.2.30 -S

[movabo]

Pinning vue to 3.2.30 solved the following error for me:

Uncaught (in promise) TypeError: _this.$data.$apolloData is undefined

^{Just adding this comment here, so googling the error message will lead to this issue in the future.}

[tobystokes]

For Anyone's Interest, the underlying vue core PR that (once released) will allow us pinners to unpin: vuejs/core#5417

[dlujan]

Was having the same error as of 03/24/2022. Pinning to vue version 3.2.30 fixed it for me as well.

[sadat2002]

hi,
i have this error and my vue version is :2
and i have to say i don't get this error always but sometimes it happens
you think my problem is about my vue version?

[dlujan]

I would try updating your Vue version, yes @sadat2002