@quilted/create 0.1.81 → 0.1.82

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @quilted/create
 
+## 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.82",
   "license": "MIT",
   "repository": {
     "type": "git",

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;
 });