Improve app context in GraphQL template

.changeset/fluffy-guests-switch.md

@@ -0,0 +1,5 @@
+---
+'@quilted/create': patch
+---
+
+Improve app context in GraphQL template

packages/create/templates/app-graphql/App.tsx

@@ -48,7 +48,10 @@ function AppContext({children, context}: RenderableProps<AppProps>) {
 
   return (
     <AppContextReact.Provider value={context}>
-      <GraphQLContext fetch={context.fetchGraphQL} cache={context.graphQLCache}>
+      <GraphQLContext
+        fetch={context.graphql.fetch}
+        cache={context.graphql.cache}
+      >
         <Localization locale={locale}>
           <Routing>{children}</Routing>
         </Localization>

packages/create/templates/app-graphql/browser.tsx

@@ -11,12 +11,14 @@ import {App} from './App.tsx';
 const element = document.querySelector('#app')!;
 const browser = new Browser();
 
-const fetchGraphQL = createGraphQLFetch({url: '/api/graphql'});
-const graphQLCache = new GraphQLCache({fetch: fetchGraphQL});
+const graphQLFetch = createGraphQLFetch({url: '/api/graphql'});
+const graphQLCache = new GraphQLCache({fetch: graphQLFetch});
 
 const context = {
-  fetchGraphQL,
-  graphQLCache,
+  graphql: {
+    fetch: graphQLFetch,
+    cache: graphQLCache,
+  },
 } satisfies AppContext;
 
 // Makes key parts of the app available in the browser console

packages/create/templates/app-graphql/server.tsx

@@ -3,6 +3,8 @@ import '@quilted/quilt/globals';
 import {RequestRouter, JSONResponse} from '@quilted/quilt/request-router';
 import {BrowserAssets} from 'quilt:module/assets';
 
+import type {AppContext} from '~/shared/context.ts';
+
 const router = new RequestRouter();
 const assets = new BrowserAssets();
 
@@ -29,18 +31,17 @@ router.get(async (request) => {
       import('@quilted/quilt/server'),
     ]);
 
-  const response = await renderToResponse(
-    <App
-      context={{
-        fetchGraphQL: performGraphQLOperation,
-        graphQLCache: new GraphQLCache(),
-      }}
-    />,
-    {
-      request,
-      assets,
+  const context = {
+    graphql: {
+      fetch: performGraphQLOperation,
+      cache: new GraphQLCache(),
     },
-  );
+  } satisfies AppContext;
+
+  const response = await renderToResponse(<App context={context} />, {
+    request,
+    assets,
+  });
 
   return response;
 });

packages/create/templates/app-graphql/shared/graphql.ts

@@ -2,8 +2,10 @@ import type {GraphQLFetch, GraphQLCache} from '@quilted/quilt/graphql';
 
 declare module '~/shared/context.ts' {
   interface AppContext {
-    readonly fetchGraphQL: GraphQLFetch;
-    readonly graphQLCache: GraphQLCache;
+    readonly graphql: {
+      readonly fetch: GraphQLFetch;
+      readonly cache: GraphQLCache;
+    };
   }
 }