Mixing apollo-option and apollo-composable in the same project

[Tiim]

Hi,

I have a project that still uses the Vue option API. I want to slowly transition to the compose API and want to start by writing new components in the compose syntax. I am confused how to register both apollo-option and apollo-composable at the same time:

I have the following code that registers apollo-option:

registerApollo.js

import {
  ApolloClient,
  createHttpLink,
  InMemoryCache,
  split,
} from '@apollo/client/core';
import { createApolloProvider } from '@vue/apollo-option';
import { getMainDefinition } from '@apollo/client/utilities';
import { useLoginStore } from '@/stores/login';
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
import { createClient } from 'graphql-ws';

// Call this in the Vue app file
export function registerApollo({ url, websocket }, app) {
  const loginStore = useLoginStore();

  const httpLink = createHttpLink({
    uri: url,
    credentials: 'include',
  });

  const wsLink = new GraphQLWsLink(
    createClient({
      url: websocket,
    })
  );

  const link = split(
    ({ query }) => {
      const definition = getMainDefinition(query);
      return (
        definition.kind === 'OperationDefinition' &&
        definition.operation === 'subscription'
      );
    },
    wsLink,
    httpLink
  );

  const cache = new InMemoryCache();

  const apolloClient = new ApolloClient({
    link,
    cache,
    connectToDevTools: true,
  });

  const apolloProvider = createApolloProvider({
    defaultClient: apolloClient,
    errorHandler: async (error) => { /* do stuff */ },
  });

  app.use(apolloProvider);
}

main.js

import { createApp } from 'vue';

import App from './App.vue';
import { registerApollo } from './registerApollo';
import { graphql } from './config';

const app = createApp(App);

registerApollo({ url: graphql.url, websocket: graphql.websocket }, app);

app.mount('#app');

When I now just try to import for example useMutation from @vue/apollo-composable, then I get the error Apollo client with id default not found. Use provideApolloClient() if you are outside of a component setup.

I'm guessing I have to somehow register apollo-composable somewhere in my registerApollo.js file, but I'm unsure how and I have not yet found any docs that explain it.

[timpuida]

in component:

import { provideApolloClient, useMutation, useQuery } from '@vue/apollo-composable';
import { apolloClient } from '../your_path/registerApollo.js'

const { mutate } = provideApolloClient(apolloClient)(() => useMutation(MY_MUTATION));

const { result, loading, onError } = provideApolloClient(apolloClient)(() =>
    useQuery(GET_USER_QUERY, variables),
);