add apollo setup

app/javascript/application.tsx

@@ -1,14 +1,19 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-
-const container = document.getElementById('app');
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { ApolloContext } from "./contexts/ApolloContext";
 
 const App = () => {
-  return (<div>Hello, Rails 7!</div>)
-}
+  return (
+    <ApolloContext>
+      <div>Hello, Rails 7!</div>
+    </ApolloContext>
+  );
+};
+
+const container = document.getElementById("app");
 
 if (container) {
-  const root = createRoot(container); // createRoot(container!) if you use TypeScript
+  const root = createRoot(container);
 
   root.render(<App />);
-}
+}

app/javascript/contexts/ApolloContext.tsx

@@ -0,0 +1,36 @@
+import React, { FC } from "react";
+import {
+  ApolloClient,
+  createHttpLink,
+  InMemoryCache,
+  ApolloProvider,
+} from "@apollo/client";
+
+type Props = {
+  children: React.ReactNode
+}
+
+export const ApolloContext: FC<Props> = ({ children }) => {
+  const crfsToken = document
+    .querySelector("[name='csrf-token']")
+    ?.getAttribute('content')
+
+  if (!crfsToken) {
+    throw new Error('CSRF token not found')
+  }
+
+  const httpLink = createHttpLink({
+    uri: '/graphql',
+    headers: {
+      'X-CSRF-Token': crfsToken,
+    }
+  })
+
+  const client = new ApolloClient({
+    link: httpLink,
+    cache: new InMemoryCache(),
+    credentials: "same-origin",
+  });
+
+  return <ApolloProvider client={client}>{children}</ApolloProvider>;
+};