add relay environment

app/javascript/__generated__/schema.graphql

@@ -0,0 +1,47 @@
+"""
+Autogenerated input type of CreateUser
+"""
+input CreateUserInput {
+  """
+  A unique identifier for the client performing the mutation.
+  """
+  clientMutationId: String
+  user: UserAttributesInput!
+}
+
+"""
+Autogenerated return type of CreateUser
+"""
+type CreateUserPayload {
+  """
+  A unique identifier for the client performing the mutation.
+  """
+  clientMutationId: String
+
+  """
+  Errors encountered during execution of the mutation.
+  """
+  errors: [String!]
+  success: Boolean!
+}
+
+type Mutation {
+  createUser(
+    """
+    Parameters for CreateUser
+    """
+    input: CreateUserInput!
+  ): CreateUserPayload
+}
+
+type Query {
+  """
+  An example field added by the generator
+  """
+  testField: [String!]!
+}
+
+input UserAttributesInput {
+  firstName: String!
+  lastName: String!
+}

app/javascript/modules.d.ts

@@ -6,3 +6,7 @@ declare module "*.png" {
   const png: string;
   export default png;
 }
+
+declare module "babel-plugin-relay/macro" {
+  export { graphql } from "react-relay";
+}

app/javascript/packs/application.ts

@@ -12,4 +12,5 @@
 // Turbolinks.start()
 // ActiveStorage.start()
 
+import "regenerator-runtime";
 import "stylesheets/application";

app/javascript/relay/environment.ts

@@ -0,0 +1,40 @@
+import type { Variables, RequestParameters, CacheConfig } from "relay-runtime";
+import { Environment, Network, RecordSource, Store } from "relay-runtime";
+
+async function fetchRelay(
+  params: RequestParameters,
+  variables: Variables,
+  _cacheConfig: CacheConfig
+) {
+  const response = await fetch("/graphql", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      query: params.text,
+      variables,
+    }),
+  });
+
+  const json = await response.json();
+
+  if (Array.isArray(json.errors)) {
+    throw new Error(
+      `Error fetching GraphQL query '${
+        params.name
+      }' with variables '${JSON.stringify(variables)}': ${JSON.stringify(
+        json.errors
+      )}`
+    );
+  }
+
+  return json;
+}
+
+export const environment = new Environment({
+  network: Network.create(fetchRelay),
+  store: new Store(new RecordSource(), {
+    gcReleaseBufferSize: 10,
+  }),
+});

app/javascript/src/App.tsx

@@ -1,7 +1,9 @@
 import type { FC } from "react";
-import React from "react";
+import React, { Suspense } from "react";
+import { RelayEnvironmentProvider } from "react-relay";
 import { BrowserRouter as Router } from "react-router-dom";
 
+import { environment } from "../relay/environment";
 import { Navbar } from "./components/Navbar";
 import { SideNav } from "./components/SideNav";
 import { AppContext } from "./contexts/AppContext";
@@ -10,18 +12,22 @@ import { Routes } from "./Routes";
 
 export const App: FC = () => {
   return (
-    <Router>
-      <AuthProvider>
-        <AppContext>
-          <main className="min-h-screen w-full bg-gray-50 flex flex-col">
-            <Navbar />
-            <div className="flex flex-grow">
-              <SideNav />
-              <Routes />
-            </div>
-          </main>
-        </AppContext>
-      </AuthProvider>
-    </Router>
+    <RelayEnvironmentProvider environment={environment}>
+      <Suspense fallback="Carregando...">
+        <Router>
+          <AuthProvider>
+            <AppContext>
+              <main className="min-h-screen w-full bg-gray-50 flex flex-col">
+                <Navbar />
+                <div className="flex flex-grow">
+                  <SideNav />
+                  <Routes />
+                </div>
+              </main>
+            </AppContext>
+          </AuthProvider>
+        </Router>
+      </Suspense>
+    </RelayEnvironmentProvider>
   );
 };