FINALLY got Relay test passing.

Author: RobJellinghaus

.gitignore

@@ -18,3 +18,6 @@ node_modules/
 # Logs
 fullstack.log
 playwright-server.log
+
+# Debug screenshots
+*-debug.png

frontend/src/App.tsx

@@ -3,6 +3,7 @@ import { RelayEnvironmentProvider } from 'react-relay'
 import { GraphQLPage } from './containers/GraphQLPage'
 import { useAuth, useAuthCheck } from './hooks/useAuth'
 import { useAuthenticatedRelayEnvironment } from './hooks/useAuthenticatedRelayEnvironment'
+import { RelayEnvironmentContext } from './hooks/useRelayEnvironmentContext'
 import { AccountPage } from './containers/AccountPage'
 import { LoginPage } from './containers/LoginPage'
 import { OauthLoginResultPage } from './containers/OauthLoginResultPage'
@@ -14,7 +15,6 @@ import React, { Suspense } from 'react'
 import './App.css'
 import { Home } from './containers/Home'
 import { Todos } from './containers/Todo'
-import { TodosGraphQL } from './containers/TodoGraphQL'
 import { TodoGraphQLRelay } from './containers/TodoGraphQLRelay'
 import { Files } from './containers/Files'
 import { Route, useNavigate, Routes } from 'react-router-dom'
@@ -31,12 +31,12 @@ const App = () => {
   // @ts-ignore
   return (
     <RelayEnvironmentProvider environment={relayEnvironment}>
-      <div className="App">
+      <RelayEnvironmentContext.Provider value={relayEnvironment}>
+        <div className="App">
         <div className="App-nav-header">
           <div style={{ display: 'flex', flex: 1 }}>
             <a className="NavButton" onClick={() => navigate('/')}>Home</a>
             <a className="NavButton" onClick={() => navigate('/todos')}>Todos (REST)</a>
-            <a className="NavButton" onClick={() => navigate('/todos-graphql')}>Todos (GraphQL)</a>
             <a className="NavButton" onClick={() => navigate('/todos-relay')}>Todos (Relay)</a>
           <a className="NavButton" onClick={() => navigate('/files')}>Files</a>
             {/* CRA: left-aligned nav buttons */}
@@ -54,7 +54,6 @@ const App = () => {
           <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/todos" element={<Todos />} />
-            <Route path="/todos-graphql" element={<TodosGraphQL />} />
             {/* 
               CRITICAL: Relay components that use useLazyLoadQuery MUST be wrapped in <Suspense>
               
@@ -90,6 +89,7 @@ const App = () => {
           </Routes>
         </div>
       </div>
+      </RelayEnvironmentContext.Provider>
     </RelayEnvironmentProvider>
   )
 }

frontend/src/containers/Todo.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import { useRelayEnvironment, invalidateRelayTodoCache } from '../hooks/useRelayEnvironmentContext'
 
 const TodoAPI = {
   get: async (page: number, size: number) =>
@@ -34,6 +35,9 @@ export const Todos = () => {
   const [page, setPage] = useState<number>(0)
   const [numPages, setPages] = useState<number>(1)
   const [processing, setProcessing] = useState<boolean>(false)
+  
+  // Get Relay environment for cache invalidation
+  const relayEnvironment = useRelayEnvironment()
 
   const createTodo = async (todo: string) => {
     setProcessing(true)
@@ -42,6 +46,10 @@ export const Todos = () => {
     setTodos(todos)
     setCreatedTodo(createdTodo)
     setText('')
+    
+    // Invalidate Relay cache so the Relay component picks up the changes
+    invalidateRelayTodoCache(relayEnvironment)
+    
     setProcessing(false)
   }
 
@@ -51,13 +59,21 @@ export const Todos = () => {
     setTodos(await TodoAPI.get(page, pageSize))
     setText('')
     editTodo(null)
+    
+    // Invalidate Relay cache so the Relay component picks up the changes
+    invalidateRelayTodoCache(relayEnvironment)
+    
     setProcessing(false)
   }
 
   const deleteTodo = async (todo: Todo) => {
     setProcessing(true)
     await TodoAPI.delete(todo.id)
     setTodos(await TodoAPI.get(page, pageSize))
+    
+    // Invalidate Relay cache so the Relay component picks up the changes
+    invalidateRelayTodoCache(relayEnvironment)
+    
     setProcessing(false)
   }