4.0.0-alpha.16 breaks on ssr

[terion-name]

Describe the bug
Using nuxt3, added as a plugin:

import {
    ApolloClient,
    InMemoryCache,
    createHttpLink
} from '@apollo/client/core'
import { defineNuxtPlugin, NuxtApp } from '#app'
import { DefaultApolloClient, provideApolloClient } from '@vue/apollo-composable'
import { createApolloProvider } from '@vue/apollo-option'
import VueApolloComponents from '@vue/apollo-components'

export default defineNuxtPlugin((nuxt: NuxtApp) => {
    const httpLink = createHttpLink({
        uri: nuxt.$config.apiUrl,
        fetch: (uri, options) => {
            return fetch(uri, options)
        }
    })

    const apolloClient = new ApolloClient({
        link: httpLink,
        cache: new InMemoryCache()
    })

    const apolloProvider = createApolloProvider({
        defaultClient: apolloClient,
    })
      
    provideApolloClient(apolloClient)
    // nuxt.provide("apollo", apolloClient)
    // nuxt.provide("apolloDefaul", DefaultApolloClient)
    // nuxt.provide(DefaultApolloClient, apolloClient)
    nuxt.vueApp.use(apolloProvider)
    nuxt.vueApp.use(VueApolloComponents)
})

With 4.0.0-alpha.15 it worked fine, updated to 4.0.0-alpha.16, got on ssr page loading:

Cannot read properties of null (reading 'queries')
at Proxy.render (file://./.nuxt/dist/server/server.mjs:22190:27)
at renderComponentRoot (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:465:44)
at renderComponentSubTree (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:269:51)
at ./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:211:29
at processTicksAndRejections (node:internal/process/task_queues:96:5)

Place in server.mjs it refers to is this function (at the bottm):

var CApolloQuery = {
  name: 'ApolloQuery',
  provide: function provide() {
    return {
      getDollarApollo: this.getDollarApollo,
      getApolloQuery: this.getApolloQuery
    };
  },
  props: {
    query: {
      type: [Function, Object],
      required: true
    },
    variables: {
      type: Object,
      "default": undefined
    },
    fetchPolicy: {
      type: String,
      "default": undefined
    },
    pollInterval: {
      type: Number,
      "default": undefined
    },
    notifyOnNetworkStatusChange: {
      type: Boolean,
      "default": undefined
    },
    context: {
      type: Object,
      "default": undefined
    },
    update: {
      type: Function,
      "default": function _default(data) {
        return data;
      }
    },
    skip: {
      type: Boolean,
      "default": false
    },
    debounce: {
      type: Number,
      "default": 0
    },
    throttle: {
      type: Number,
      "default": 0
    },
    clientId: {
      type: String,
      "default": undefined
    },
    deep: {
      type: Boolean,
      "default": undefined
    },
    tag: {
      type: String,
      "default": 'div'
    },
    prefetch: {
      type: Boolean,
      "default": true
    },
    options: {
      type: Object,
      "default": function _default() {
        return {};
      }
    }
  },
  data: function data() {
    return {
      result: {
        data: null,
        loading: false,
        networkStatus: 7,
        error: null
      },
      times: 0
    };
  },
  watch: {
    fetchPolicy: function fetchPolicy(value) {
      this.$apollo.queries.query.setOptions({
        fetchPolicy: value
      });
    },
    pollInterval: function pollInterval(value) {
      this.$apollo.queries.query.setOptions({
        pollInterval: value
      });
    },
    notifyOnNetworkStatusChange: function notifyOnNetworkStatusChange(value) {
      this.$apollo.queries.query.setOptions({
        notifyOnNetworkStatusChange: value
      });
    },
    '$data.$apolloData.loading': function $data$apolloDataLoading(value) {
      this.$emit('loading', !!value);
    }
  },
  apollo: {
    $client: function $client() {
      return this.clientId;
    },
    query: function query() {
      return _objectSpread2(_objectSpread2({
        query: function query() {
          if (typeof this.query === 'function') {
            return this.query(__vite_ssr_import_0__.default);
          }

          return this.query;
        },
        variables: function variables() {
          return this.variables;
        },
        fetchPolicy: this.fetchPolicy,
        pollInterval: this.pollInterval,
        debounce: this.debounce,
        throttle: this.throttle,
        notifyOnNetworkStatusChange: this.notifyOnNetworkStatusChange,
        context: function context() {
          return this.context;
        },
        skip: function skip() {
          return this.skip;
        },
        deep: this.deep,
        prefetch: this.prefetch
      }, this.options), {}, {
        manual: true,
        result: function result(_result) {
          console.log(_result);
          var _result2 = _result,
              errors = _result2.errors,
              loading = _result2.loading,
              networkStatus = _result2.networkStatus;
          var _result3 = _result,
              error = _result3.error;
          _result = Object.assign({}, _result);

          if (errors && errors.length) {
            error = new Error("Apollo errors occurred (".concat(errors.length, ")"));
            error.graphQLErrors = errors;
          }

          var data = {};

          if (loading) {
            Object.assign(data, this.$_previousData, _result.data);
          } else if (error) {
            Object.assign(data, this.$apollo.queries.query.observer.getLastResult() || {}, _result.data);
          } else {
            data = _result.data;
            this.$_previousData = _result.data;
          }

          var dataNotEmpty = isDataFilled(data);
          this.result = {
            data: dataNotEmpty ? this.update(data) : undefined,
            fullData: dataNotEmpty ? data : undefined,
            loading: loading,
            error: error,
            networkStatus: networkStatus
          };
          this.times = ++this.$_times;
          this.$emit('result', this.result);
        },
        error: function error(_error) {
          this.result.loading = false;
          this.result.error = _error;
          this.$emit('error', _error);
        }
      });
    }
  },
  created: function created() {
    this.$_times = 0;
  },
  methods: {
    getDollarApollo: function getDollarApollo() {
      return this.$apollo;
    },
    getApolloQuery: function getApolloQuery() {
      return this.$apollo.queries.query;
    }
  },
  render: function render() {
    var result = this.$slots["default"]({
      result: this.result,
      times: this.times,
      query: this.$apollo.queries.query, ///////////////// <<<<-------------- HERE
      isLoading: this.$apolloData.loading,
      gqlError: this.result && this.result.error && this.result.error.gqlError
    });
    return this.tag ? __vite_ssr_import_1__.h(this.tag, result) : result;
  }
};

To Reproduce
Steps to reproduce the behavior:

1. Install as a module like described above to nuxt3 with ssr, render a page

Expected behavior
it works

Versions
"@vue/apollo-components": "^4.0.0-alpha.16",
"@vue/apollo-composable": "^4.0.0-alpha.16",
"@vue/apollo-option": "^4.0.0-alpha.16",
"@vue/apollo-ssr": "^4.0.0-alpha.16",
"nuxt3": "^3.0.0-27307420.6a25d3e"

[xxSkyy]

For me it works, but I'm using only Composition API and at the end instead of

    provideApolloClient(apolloClient)
    nuxt.vueApp.use(apolloProvider)
    nuxt.vueApp.use(VueApolloComponents)

I use

  provideApolloClient(apolloClient)
  nuxt.provide("apollo", { DefaultApolloClient, apolloClient })

and works well

[art-boer]

@Akryum

I actually have the same issues with the options API, on the SSR render trying to access $apollo results in an undefined error.

For example:

<v-if="$apollo.queries">

or

beforeCreate() { console.log(this.$apollo.queries) }

Downgrading from 4.0.0-alpha.16/18 to v15 works.

Reproduce:

• Setup any Nuxt project with an apollo server side plugin, following the option API setup guide (https://v4.apollo.vuejs.org/guide-option/setup.html#_1-install-vue-apollo-option)
• Try to access the $apollo within a component that uses the option API on server side

[art-boer]

Problematic part in code:

apollo/packages/vue-apollo-option/src/mixin.js

Line 128 in 757e45c

return Promise.all(this.$_apolloPromises).then(() => {

The destroy gets called in the .then statement, and it causes $apollo to be unavailable.

PR: #1380