Production breaks, dev mode works (Apollo client with id default not found.)

[mmeester]

Describe the bug
When using the latest version of @vue/apollo-composable in dev mode everything works as expected, but when building the project using running the build the following error occurs in the console:

Apollo client with id default not found. Use an app.runWithContext() or provideApolloClient() if you are outside of a component setup.

To Reproduce

// main.js [simplified]
import { createApp, h } from "vue";
import {
  ApolloClient,
  createHttpLink,
  InMemoryCache,
} from "@apollo/client/core";
import { provideApolloClient } from "@vue/apollo-composable";

// HTTP connection to the API
const httpLink = createHttpLink({
  // Url is handled by proxy and application runs on same domain as graphql server
  uri: "/graphql",
});

// Cache implementation
const cache = new InMemoryCache();

// Create the apollo client
const apolloClient = new ApolloClient({
  link: httpLink,
  cache,
});

provideApolloClient(apolloClient);

app.mount("#app");

Versions
vue: ^3.3.13
vue-apollo: ^4.0.2
@apollo/client: ^3.7.16

Additional context
This worked on 4.0.0-beta.11 but something has changed with the release of 4.0.0-beta.12 that makes this break the application and therefor we're unable to upgrade to a non beta version

[nickmessing]

provideApolloClient does something else, it's returning a function that lets you use composables outside of setup functions.

How are you creating the app? I'm interested in how you do provide(DefaultApolloClient, apolloClient)

[mmeester]

@nickmessing an (simplified) example of how it's used in one of our composables:

import { useLazyQuery, type UseQueryOptions } from "@vue/apollo-composable";

export function useProductPricing(
  variables: { products: string[] },
  options: UseQueryOptions = { fetchPolicy: "cache-and-network" }
) {
  const { load, error } = useLazyQuery<PriceQueryResult>(
    priceQuery,
    variables,
    options
  );

  const fetch = async (): Promise<Pricing[]> => {
    try {
      const result = await load();

      if (result !== false) {
        const { Price } = result;
        return Price;
      } else {
        console.error('oops something went wrong');
      }

    } catch (error) {
		console.error(error)
    }
  };

  return {
    error,
    fetch,
  };
}

[nickmessing]

@mmeester That doesn't show how you are providing the default client. Somewhere you should have provide(DefaultApolloClient, apolloClient) in code.

useQuery and useLazyQuery rely on DefaultApolloClient to be available (by using provide/inject), that's why in the setup part of the composition API docs that provide is in the app's setup function.