chore(examples): fix up the start-trellaux example (#3675)

Author: SeanCassiere

examples/react/start-trellaux/app/components/Board.tsx

@@ -57,8 +57,9 @@ export function Board({ boardId }: { boardId: string }) {
         <EditableText
           value={
             // optimistic update
-            updateBoardMutation.isPending && updateBoardMutation.variables.name
-              ? updateBoardMutation.variables.name
+            updateBoardMutation.isPending &&
+            updateBoardMutation.variables.data.name
+              ? updateBoardMutation.variables.data.name
               : board.name
           }
           fieldName="name"
@@ -68,8 +69,10 @@ export function Board({ boardId }: { boardId: string }) {
           inputLabel="Edit board name"
           onChange={(value) => {
             updateBoardMutation.mutate({
-              id: board.id,
-              name: value,
+              data: {
+                id: board.id,
+                name: value,
+              },
             })
           }}
         />

examples/react/start-trellaux/app/components/Card.tsx

@@ -62,11 +62,13 @@ export const Card = forwardRef<HTMLLIElement, CardProps>(
           const moveOrder = (droppedOrder + order) / 2
 
           moveCard.mutate({
-            order: moveOrder,
-            columnId,
-            boardId,
-            id: transfer.id,
-            title: transfer.title,
+            data: {
+              order: moveOrder,
+              columnId,
+              boardId,
+              id: transfer.id,
+              title: transfer.title,
+            },
           })
 
           setAcceptDrop('none')
@@ -98,12 +100,12 @@ export const Card = forwardRef<HTMLLIElement, CardProps>(
             onSubmit={(event) => {
               event.preventDefault()
 
-              deleteCard.mutate(
-                deleteItemSchema.parse({
+              deleteCard.mutate({
+                data: deleteItemSchema.parse({
                   id,
                   boardId,
                 }),
-              )
+              })
             }}
           >
             <button

examples/react/start-trellaux/app/components/Column.tsx

@@ -84,11 +84,13 @@ export const Column = forwardRef<HTMLDivElement, ColumnProps>(
         invariant(transfer.title, 'missing transfer.title')
 
         updateCardMutation.mutate({
-          order: (sortedItems[sortedItems.length - 1]?.order ?? 0) + 1,
-          columnId: columnId,
-          boardId,
-          id: transfer.id,
-          title: transfer.title,
+          data: {
+            order: (sortedItems[sortedItems.length - 1]?.order ?? 0) + 1,
+            columnId: columnId,
+            boardId,
+            id: transfer.id,
+            title: transfer.title,
+          },
         })
 
         setAcceptCardDrop(false)
@@ -126,9 +128,11 @@ export const Column = forwardRef<HTMLDivElement, ColumnProps>(
           const moveOrder = (droppedOrder + order) / 2
 
           updateColumnMutation.mutate({
-            boardId,
-            id: transfer.id,
-            order: moveOrder,
+            data: {
+              boardId,
+              id: transfer.id,
+              order: moveOrder,
+            },
           })
 
           setAcceptColumnDrop('none')
@@ -164,8 +168,8 @@ export const Column = forwardRef<HTMLDivElement, ColumnProps>(
               value={
                 // optimistic update
                 updateColumnMutation.isPending &&
-                updateColumnMutation.variables.name
-                  ? updateColumnMutation.variables.name
+                updateColumnMutation.variables.data.name
+                  ? updateColumnMutation.variables.data.name
                   : name
               }
               inputLabel="Edit column name"
@@ -174,9 +178,11 @@ export const Column = forwardRef<HTMLDivElement, ColumnProps>(
               buttonClassName="block rounded-lg text-left w-full border border-transparent py-1 px-2 font-medium text-slate-600"
               onChange={(value) => {
                 updateColumnMutation.mutate({
-                  boardId,
-                  id: columnId,
-                  name: value,
+                  data: {
+                    boardId,
+                    id: columnId,
+                    name: value,
+                  },
                 })
               }}
             />
@@ -230,8 +236,10 @@ export const Column = forwardRef<HTMLDivElement, ColumnProps>(
               event.preventDefault()
 
               deleteColumnMutation.mutate({
-                id: columnId,
-                boardId,
+                data: {
+                  id: columnId,
+                  boardId,
+                },
               })
             }}
           >

examples/react/start-trellaux/app/components/NewCard.tsx

@@ -36,7 +36,9 @@ export function NewCard({
         invariant(textAreaRef.current)
         textAreaRef.current.value = ''
 
-        mutate(itemSchema.parse(Object.fromEntries(formData.entries())))
+        mutate({
+          data: itemSchema.parse(Object.fromEntries(formData.entries())),
+        })
       }}
       onBlur={(event) => {
         if (!event.currentTarget.contains(event.relatedTarget)) {

examples/react/start-trellaux/app/components/NewColumn.tsx

@@ -28,8 +28,10 @@ export function NewColumn({
         invariant(inputRef.current, 'missing input ref')
 
         newColumnMutation.mutate({
-          boardId,
-          name: inputRef.current.value,
+          data: {
+            boardId,
+            name: inputRef.current.value,
+          },
         })
 
         inputRef.current.value = ''

examples/react/start-trellaux/app/queries.ts

@@ -21,7 +21,7 @@ export const boardQueries = {
   detail: (id: string) =>
     queryOptions({
       queryKey: ['boards', 'detail', id],
-      queryFn: () => getBoard(id),
+      queryFn: () => getBoard({ data: id }),
     }),
 }
 
@@ -32,15 +32,15 @@ export function useCreateColumnMutation() {
     onMutate: async (variables) => {
       await queryClient.cancelQueries()
       queryClient.setQueryData(
-        boardQueries.detail(variables.boardId).queryKey,
+        boardQueries.detail(variables.data.boardId).queryKey,
         (board) =>
           board
             ? {
                 ...board,
                 columns: [
                   ...board.columns,
                   {
-                    ...variables,
+                    ...variables.data,
                     order: board.columns.length + 1,
                     id: Math.random() + '',
                   },
@@ -60,12 +60,12 @@ export function useCreateItemMutation() {
     onMutate: async (variables) => {
       await queryClient.cancelQueries()
       queryClient.setQueryData(
-        boardQueries.detail(variables.boardId).queryKey,
+        boardQueries.detail(variables.data.boardId).queryKey,
         (board) =>
           board
             ? {
                 ...board,
-                items: [...board.items, variables],
+                items: [...board.items, variables.data],
               }
             : undefined,
       )
@@ -81,13 +81,13 @@ export function useUpdateCardMutation() {
     onMutate: async (variables) => {
       await queryClient.cancelQueries()
       queryClient.setQueryData(
-        boardQueries.detail(variables.boardId).queryKey,
+        boardQueries.detail(variables.data.boardId).queryKey,
         (board) =>
           board
             ? {
                 ...board,
                 items: board.items.map((i) =>
-                  i.id === variables.id ? variables : i,
+                  i.id === variables.data.id ? variables.data : i,
                 ),
               }
             : undefined,
@@ -105,12 +105,14 @@ export function useDeleteCardMutation() {
       await queryClient.cancelQueries()
 
       queryClient.setQueryData(
-        boardQueries.detail(variables.boardId).queryKey,
+        boardQueries.detail(variables.data.boardId).queryKey,
         (board) =>
           board
             ? {
                 ...board,
-                items: board.items.filter((item) => item.id !== variables.id),
+                items: board.items.filter(
+                  (item) => item.id !== variables.data.id,
+                ),
               }
             : undefined,
       )
@@ -127,16 +129,16 @@ export function useDeleteColumnMutation() {
       await queryClient.cancelQueries()
 
       queryClient.setQueryData(
-        boardQueries.detail(variables.boardId).queryKey,
+        boardQueries.detail(variables.data.boardId).queryKey,
         (board) =>
           board
             ? {
                 ...board,
                 columns: board.columns.filter(
-                  (column) => column.id !== variables.id,
+                  (column) => column.id !== variables.data.id,
                 ),
                 items: board.items.filter(
-                  (item) => item.columnId !== variables.id,
+                  (item) => item.columnId !== variables.data.id,
                 ),
               }
             : undefined,
@@ -160,13 +162,13 @@ export function useUpdateColumnMutation() {
       await queryClient.cancelQueries()
 
       queryClient.setQueryData(
-        boardQueries.detail(variables.boardId).queryKey,
+        boardQueries.detail(variables.data.boardId).queryKey,
         (board) =>
           board
             ? {
                 ...board,
                 columns: board.columns.map((c) =>
-                  c.id === variables.id
+                  c.id === variables.data.id
                     ? {
                         ...c,
                         ...variables,

examples/react/start-trellaux/app/router.tsx

@@ -40,6 +40,9 @@ export function createRouter() {
       defaultErrorComponent: DefaultCatchBoundary,
       defaultNotFoundComponent: () => <NotFound />,
       scrollRestoration: true,
+      context: {
+        queryClient,
+      },
     }),
     queryClient,
   )