Accessing Apollo client in an Astro + React project without ApolloProvider

Hello,

I’m using Astro.build with React and Apollo. I’m trying to find a way to access the client through the component tree. My top-level layout component is an .astro component and I tried something like this:

<CartWrapper client:load>
    <Cart client:load />
    <PromoBar client:load />
    <Header />
    <slot />
    <Footer />
</CartWrapper>

…with my <CartWrapper /> component:

// ^^ Apollo client code

const CartWrapper = ({ children }) => {
    return <ApolloProvider client={client}>{children}</ApolloProvider>
}
export default CartWrapper

Because Astro loads each dynamic component asynchronously as an island, the “context” or client of the Apollo Provider is not accessible down the component tree. If I try I get this error:

Could not find “client” in the context or passed in as an option. Wrap the root component in an <ApolloProvider> , or pass an ApolloClient instance in via options.

I’ve tried to find examples of passing an ApolloClient instance in via options but there doesn’t seem to be any documentation about this.

My questions are these:

  1. Is there another way to use a single client throughout my component tree outside of the provider? For example, could I load this into React context?
  2. What does ‘pass an ApolloClient instance in via options’ mean and how does this work?
  3. Any other alternatives for sharing client + client context across an app, specifically with Astro.build?

Thanks in advance!

Quick follow up on this. If I console.log my client instance it is just an object but I can’t find any docs on how to use the client without the Provider.

Is it possible?

Another follow up…tried the useApolloClient hook but again, this does not work without the parent components being wrapped in the provider.