Accessing Apollo client in an Astro + React project without ApolloProvider

Client SDKs
,
8

2023 This is how I got it to work with ApolloProvider:

Simply create your React entry point as a component:

import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
import App from '../sections/App';

const client = new ApolloClient({
  uri: 'https://flyby-router-demo.herokuapp.com/',
  cache: new InMemoryCache(),
});

export default function ReactApp() {
  return (
    <div>
      <ApolloProvider client={client}>
        <App />
      </ApolloProvider>,
    </div>
  );
}

Then create your App component which is encapsulated above:

import { useQuery, gql } from '@apollo/client';

const GET_LOCATIONS = gql`
  query GetLocations {
    locations {
      id
      name
      description
      photo
    }
  }
`;

function DisplayLocations() {
  const { loading, error, data } = useQuery(GET_LOCATIONS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error : {error.message}</p>;

  return data.locations.map(({ id, name, description, photo }) => (
    <div key={id}>
      <h3>{name}</h3>
      <img width="400" height="250" alt="location-reference" src={`${photo}`} />
      <br />
      <b>About this location:</b>
      <p>{description}</p>
      <br />
    </div>
  ));
}

export default function App() {
  return (
    <div>
      <h2>My first Apollo app 🚀</h2>
      <DisplayLocations />
    </div>
  );
}

Use the ReactApp entry point in an Astro page like this:

---
import Layout from '~/layouts/Default.astro';
import ReactApp from '~/components/common/ReactApp';
---

<Layout>
  <div class="p-8 md:p-12 max-w-4xl mx-auto">
    <h1>AI Assistant</h1>
    <div id="root"></div>
    <ReactApp client:load />
  </div>
</Layout>