@quilted/create 0.1.81 → 0.1.83

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @quilted/create
 
+## 0.1.83
+
+### Patch Changes
+
+- [`b8b0e5e2`](https://github.com/lemonmade/quilt/commit/b8b0e5e2bac4192d8e6b17b93868acec8524c611) Thanks [@lemonmade](https://github.com/lemonmade)! - Fix some more GraphQL template type issues
+
+## 0.1.82
+
+### Patch Changes
+
+- [`c40bc1de`](https://github.com/lemonmade/quilt/commit/c40bc1deb3e3b48c30c881a4dd7bd98e2807a596) Thanks [@lemonmade](https://github.com/lemonmade)! - Fix more GraphQL template issues
+
 ## 0.1.81
 
 ### Patch Changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@quilted/create",
   "type": "module",
-  "version": "0.1.81",
+  "version": "0.1.83",
   "license": "MIT",
   "repository": {
     "type": "git",

package/templates/app-graphql/App.tsx

@@ -4,11 +4,7 @@ import {HTML} from '@quilted/quilt/html';
 import {Routing, useRoutes} from '@quilted/quilt/navigate';
 import {Localization, useLocaleFromEnvironment} from '@quilted/quilt/localize';
 import {type PropsWithChildren} from '@quilted/quilt/react/tools';
-import {
-  GraphQLContext,
-  createGraphQLHttpFetch,
-  type GraphQLFetch,
-} from '@quilted/quilt/graphql';
+import {GraphQLContext, type GraphQLFetch} from '@quilted/quilt/graphql';
 
 import {ReactQueryContext} from '@quilted/react-query';
 import {QueryClient} from '@tanstack/react-query';
@@ -25,7 +21,7 @@ import {
 } from './shared/context.ts';
 
 export interface AppProps extends AppContextType {
-  fetchGraphQL?: GraphQLFetch;
+  fetchGraphQL: GraphQLFetch;
 }
 
 // The root component for your application. You will typically render any
@@ -61,16 +57,14 @@ function Routes() {
 // This component renders any app-wide context.
 function AppContext({
   children,
-  fetchGraphQL: customFetchGraphQL,
+  fetchGraphQL,
   ...context
 }: PropsWithChildren<AppProps>) {
-  const {fetchGraphQL, queryClient} = useMemo(() => {
+  const {queryClient} = useMemo(() => {
     return {
-      fetchGraphQL:
-        customFetchGraphQL ?? createGraphQLHttpFetch({url: '/api/graphql'}),
       queryClient: new QueryClient(),
     };
-  }, [customFetchGraphQL]);
+  }, []);
 
   return (
     <GraphQLContext fetch={fetchGraphQL}>

package/templates/app-graphql/browser.tsx

@@ -1,8 +1,13 @@
 import '@quilted/quilt/globals';
+
 import {hydrateRoot} from 'react-dom/client';
+import {createGraphQLFetchOverHTTP} from '@quilted/quilt/graphql';
 
 import {App} from './App.tsx';
 
 const element = document.querySelector('#app')!;
 
-hydrateRoot(element, <App />);
+hydrateRoot(
+  element,
+  <App fetchGraphQL={createGraphQLFetchOverHTTP({url: '/api/graphql'})} />,
+);

package/templates/app-graphql/features/start/Start/Start.test.tsx

@@ -9,7 +9,9 @@ import startQuery from './StartQuery.graphql';
 describe('<Start />', () => {
   it('welcomes the user with their name', async () => {
     const name = 'Winston';
-    const graphql = new GraphQLController([fillGraphQL(startQuery, {name})]);
+    const graphql = new GraphQLController([
+      fillGraphQL(startQuery, {me: {name}}),
+    ]);
 
     const start = await renderApp(<Start />, {graphql});
 

package/templates/app-graphql/features/start/Start/Start.tsx

@@ -8,7 +8,7 @@ export default function Start() {
 
   return (
     <div className={styles.Start}>
-      {data ? `Hello ${data.name}!` : 'Hello!'}
+      {data ? `Hello ${data.me.name}!` : 'Hello!'}
     </div>
   );
 }

package/templates/app-graphql/features/start/Start/StartQuery.graphql

@@ -1,3 +1,5 @@
 query Start {
-  name
+  me {
+    name
+  }
 }

package/templates/app-graphql/server/graphql.ts

@@ -1,9 +1,13 @@
 import {graphql} from 'graphql';
+import {
+  toGraphQLSource,
+  type GraphQLFetch,
+  type GraphQLResult,
+} from '@quilted/quilt/graphql';
 import {
   createGraphQLSchema,
   createGraphQLResolverBuilder,
 } from '@quilted/quilt/graphql/server';
-import type {GraphQLResult, GraphQLSource} from '@quilted/quilt/graphql';
 
 import schemaSource, {type Schema} from '../graphql/schema.ts';
 
@@ -26,22 +30,13 @@ const Query = createQueryResolver({
 
 const schema = createGraphQLSchema(schemaSource, {Query, Person});
 
-export async function performGraphQLOperation<
-  Data = Record<string, unknown>,
-  Variables = Record<string, unknown>,
->(
-  operation: GraphQLSource<Data, Variables>,
-  {
-    variables,
-    operationName,
-  }: {variables?: Variables; operationName?: string} = {},
-) {
-  const result = await graphql({
-    schema,
-    source: operation,
-    operationName,
-    variableValues: variables,
-  });
-
-  return result as GraphQLResult<Data>;
-}
+export const performGraphQLOperation: GraphQLFetch =
+  async function performGraphQLOperation(operation, options) {
+    const result = await graphql({
+      schema,
+      source: toGraphQLSource(operation),
+      variableValues: options?.variables as Readonly<{}>,
+    });
+
+    return result as GraphQLResult<any>;
+  };

package/templates/app-graphql/server.tsx

@@ -1,7 +1,6 @@
 import '@quilted/quilt/globals';
 
 import {RequestRouter, JSONResponse} from '@quilted/quilt/request-router';
-import {type GraphQLFetch} from '@quilted/quilt/graphql';
 import {BrowserAssets} from '@quilted/quilt/magic/assets';
 
 const router = new RequestRouter();
@@ -29,23 +28,13 @@ router.get(async (request) => {
       import('@quilted/quilt/server'),
     ]);
 
-  // GraphQL API, called during server rendering
-  const fetchGraphQL: GraphQLFetch = async (operation, options) => {
-    const result = await performGraphQLOperation<any>(
-      (operation as any).source,
-      {
-        variables: options?.variables as any,
-        operationName: (operation as any).name,
-      },
-    );
-
-    return result;
-  };
-
-  const response = await renderToResponse(<App fetchGraphQL={fetchGraphQL} />, {
-    request,
-    assets,
-  });
+  const response = await renderToResponse(
+    <App fetchGraphQL={performGraphQLOperation} />,
+    {
+      request,
+      assets,
+    },
+  );
 
   return response;
 });