feat(separate react): updates from code review. remove react-query from events app

Author: cmwhited

apps/events/package.json

@@ -18,8 +18,6 @@
     "@radix-ui/react-avatar": "^1.1.2",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-slot": "^1.1.1",
-    "@tanstack/react-query": "^5.64.1",
-    "@tanstack/react-query-devtools": "^5.64.1",
     "@tanstack/react-router": "^1.97.1",
     "@xstate/store": "^2.6.2",
     "class-variance-authority": "^0.7.1",

apps/events/src/components/todos.tsx

@@ -8,14 +8,9 @@ import { Input } from './ui/input';
 
 export const Todos = () => {
   const todos = Space.useQueryEntities(Todo);
-  const createEntity = Space.useCreateEntity(Todo, {
-    throwOnError(error) {
-      console.error(error);
-      return true;
-    },
-  });
+  const createEntity = Space.useCreateEntity(Todo);
   const updateEntity = Space.useUpdateEntity(Todo);
-  const deleteEntity = Space.useDeleteEntity(Todo);
+  const deleteEntity = Space.useDeleteEntity();
   const [newTodoTitle, setNewTodoTitle] = useState('');
 
   return (
@@ -25,23 +20,22 @@ export const Todos = () => {
         <Input type="text" value={newTodoTitle} onChange={(e) => setNewTodoTitle(e.target.value)} />
         <Button
           onClick={() => {
-            createEntity.mutate({ name: newTodoTitle, completed: false });
+            createEntity({ name: newTodoTitle, completed: false });
             setNewTodoTitle('');
           }}
         >
           Create Todo
         </Button>
-        <div>{JSON.stringify(createEntity.error ?? {})}</div>
       </div>
-      {(todos.data ?? []).map((todo) => (
+      {(todos ?? []).map((todo) => (
         <div key={todo.id} className="flex flex-row items-center gap-2">
           <h2>{todo.name}</h2>
           <input
             type="checkbox"
             checked={todo.completed}
-            onChange={(e) => updateEntity.mutate({ id: todo.id, data: { completed: e.target.checked } })}
+            onChange={(e) => updateEntity({ id: todo.id, data: { completed: e.target.checked } })}
           />
-          <Button onClick={() => deleteEntity.mutate({ id: todo.id })}>Delete</Button>
+          <Button onClick={() => deleteEntity(todo.id)}>Delete</Button>
         </div>
       ))}
     </>

apps/events/src/routes/space/$spaceId.tsx

@@ -1,6 +1,5 @@
 import { store } from '@graphprotocol/hypergraph';
 import { Hypergraph, Space as HypergraphSpace } from '@graphprotocol/hypergraph-react';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { createFileRoute } from '@tanstack/react-router';
 import { useSelector } from '@xstate/store/react';
 
@@ -60,7 +59,6 @@ function Space() {
         <div className="mt-12">
           <DevTool spaceId={spaceId} />
         </div>
-        <ReactQueryDevtools />
       </HypergraphSpace.HypergraphSpaceProvider>
     </div>
   );

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "type": "module",
-  "packageManager": "pnpm@9.14.4",
+  "packageManager": "pnpm@9.15.4",
   "workspaces": ["apps/*", "packages/*"],
   "scripts": {
     "clean": "node scripts/clean.mjs",