feat: client type generate

Author: productdevbook

playground-nuxt/app/client/mutations.graphql renamed to playground-nuxt/app/graphql/mutations.graphql

@@ -1,4 +1,5 @@
 import type { LoadSchemaOptions, UnnormalizedTypeDefPointer } from '@graphql-tools/load'
+import type { Source } from '@graphql-tools/utils'
 import type { GraphQLSchema } from 'graphql'
 import type { CodegenClientConfig } from './types'
 import { codegen } from '@graphql-codegen/core'
@@ -97,12 +98,10 @@ export async function loadGraphQLDocuments(patterns: string | string[]) {
 
 export async function generateClientTypes(
   schema: GraphQLSchema,
-  patterns: string | string[],
+  docs: Source[],
   config: CodegenClientConfig = {},
   outputPath?: string,
 ) {
-  const docs = await loadGraphQLDocuments(patterns)
-
   if (docs.length === 0) {
     consola.info('[graphql] No client GraphQL files found. Skipping client type generation.')
     return ''

playground-nuxt/app/client/queries.graphql renamed to playground-nuxt/app/graphql/queries.graphql

@@ -1,16 +1,44 @@
 import type { Nitro } from 'nitropack/types'
-
 import { writeFileSync } from 'node:fs'
 import { fileURLToPath } from 'node:url'
+import { watch } from 'chokidar'
 import { defineNitroModule } from 'nitropack/kit'
 import { dirname, join, resolve } from 'pathe'
+
 import { rollupConfig } from './rollup'
 import { relativeWithDot, scanDefs, scanResolvers } from './utils'
-import { serverTypeGeneration } from './utils/server-type-generation'
+import { clientTypeGeneration, serverTypeGeneration } from './utils/server-type-generation'
 
 export default defineNitroModule({
   name: 'nitro-graphql',
   async setup(nitro: Nitro) {
+    nitro.graphql ||= {
+      buildDir: '',
+      watchDirs: [],
+    }
+    
+    const graphqlBuildDir = resolve(nitro.options.buildDir, 'graphql')
+    nitro.graphql.buildDir = graphqlBuildDir
+
+    const watchDirs: string[] = []
+
+    switch (nitro.options.framework.name) {
+      case 'nuxt':
+        watchDirs.push(join(nitro.options.rootDir, 'app', 'graphql'))
+        break
+      default:
+    }
+
+    watch(watchDirs, {
+      persistent: true,
+      ignoreInitial: true,
+      ignored: nitro.options.ignore,
+    }).on('all', async (event, path) => {
+      if (path.endsWith('.graphql') || path.endsWith('.gql')) {
+        await clientTypeGeneration(nitro, path)
+      }
+    })
+
     const tsConfigPath = resolve(
       nitro.options.buildDir,
       nitro.options.typescript.tsconfigPath,
@@ -34,28 +62,27 @@ export default defineNitroModule({
 
     await rollupConfig(nitro)
 
-    // Add GraphQL Yoga handlers
-    const aendpoint = '/api/graphql'
+    const endpoint = '/api/graphql'
 
     const runtime = fileURLToPath(
       new URL('routes', import.meta.url),
     )
     // Main GraphQL endpoint
     nitro.options.handlers.push({
-      route: aendpoint,
+      route: endpoint,
       handler: join(runtime, 'graphql'),
       method: 'get',
     })
 
     // Main GraphQL endpoint
     nitro.options.handlers.push({
-      route: aendpoint,
+      route: endpoint,
       handler: join(runtime, 'graphql'),
       method: 'post',
     })
 
     nitro.options.handlers.push({
-      route: aendpoint,
+      route: endpoint,
       handler: join(runtime, 'graphql'),
       method: 'options',
     })
@@ -133,12 +160,13 @@ declare module 'nitro-graphql/types' {
       types.tsConfig.compilerOptions.paths['#graphql/server'] = [
         relativeWithDot(tsconfigDir, join(typesDir, 'nitro-graphql-server.d.ts')),
       ]
-      // types.tsConfig.compilerOptions.paths['#graphql/client'] = [
-      //   relativeWithDot(tsconfigDir, join(typesDir, 'graphql-client.generated.ts')),
-      // ]
+      types.tsConfig.compilerOptions.paths['#graphql/client'] = [
+        relativeWithDot(tsconfigDir, join(typesDir, 'nitro-graphql-client.d.ts')),
+      ]
       types.tsConfig.include = types.tsConfig.include || []
       types.tsConfig.include.push(
         relativeWithDot(tsconfigDir, join(typesDir, 'nitro-graphql-server.d.ts')),
+        relativeWithDot(tsconfigDir, join(typesDir, 'nitro-graphql-client.d.ts')),
         relativeWithDot(tsconfigDir, join(typesDir, 'graphql.d.ts')),
       )
     })

src/client-codegen.ts

@@ -52,13 +52,23 @@ export async function rollupConfig(app: Nitro) {
         name: 'nitro-graphql-watcher',
         async buildStart() {
           const graphqlFiles = await scanGraphql(nitro)
+          // const clientGraphqlFiles = await scanClient(nitro)
 
           for (const file of graphqlFiles) {
             this.addWatchFile(file)
           }
 
+          // for (const file of clientGraphqlFiles) {
+          //   this.addWatchFile(file)
+          // }
+
           // 2. Directory watching (partial çalışır)
           this.addWatchFile('server/graphql/')
+
+          // 3. Client GraphQL files
+          // if (app.options.framework.name === 'nuxt') {
+          //   this.addWatchFile('app/graphql/')
+          // }
         },
       })
     }
@@ -69,12 +79,6 @@ export async function rollupConfig(app: Nitro) {
   })
 }
 
-declare module 'nitropack/types' {
-  interface Nitro {
-    scanDefs: string[]
-    scanResolvers: any
-  }
-}
 function getImportId(p: string, lazy?: boolean) {
   return (lazy ? '_lazy_' : '_') + hash(p).replace(/-/g, '').slice(0, 6)
 }

src/index.ts

@@ -7,6 +7,17 @@ import type { IncomingMessage, ServerResponse } from 'node:http'
 
 export type CodegenServerConfig = TypeScriptPluginConfig & TypeScriptResolversPluginConfig
 
+declare module 'nitropack/types' {
+  interface Nitro {
+    scanDefs: string[]
+    scanResolvers: any
+    graphql: {
+      buildDir: string
+      watchDirs: string[]
+    }
+  }
+}
+
 declare module 'nitropack' {
   interface NitroOptions {
     graphql?: NitroGraphQLOptions

src/rollup.ts

@@ -33,6 +33,16 @@ export function relativeWithDot(from: string, to: string) {
   return RELATIVE_RE.test(rel) ? rel : `./${rel}`
 }
 
+// export async function scanClient(nitro: Nitro) {
+//   if (nitro.options.framework.name === 'nuxt') {
+//     const graphql = join(nitro.options.rootDir, 'app')
+//     const files = await scanDir(nitro, graphql, 'graphql', '**/*.graphql')
+//     return files.map(f => f.fullPath)
+//   }
+
+//   return []
+// }
+
 export async function scanGraphql(nitro: Nitro) {
   const files = await scanFiles(nitro, 'graphql')
   return files.map(f => f.fullPath)

src/types.ts

@@ -1,11 +1,13 @@
 import type { Nitro } from 'nitropack'
 
-import { writeFileSync } from 'node:fs'
+import { mkdirSync, readFileSync, writeFileSync } from 'node:fs'
 import { loadFilesSync } from '@graphql-tools/load-files'
 import { mergeTypeDefs } from '@graphql-tools/merge'
+import { printSchemaWithDirectives } from '@graphql-tools/utils'
 import consola from 'consola'
-import { buildASTSchema } from 'graphql'
-import { resolve } from 'pathe'
+import { buildASTSchema, buildSchema } from 'graphql'
+import { dirname, join, resolve } from 'pathe'
+import { generateClientTypes, loadGraphQLDocuments } from '../client-codegen'
 import { generateTypes } from '../codegen'
 
 export async function serverTypeGeneration(app: Nitro) {
@@ -21,9 +23,39 @@ export async function serverTypeGeneration(app: Nitro) {
 
     const data = await generateTypes(schema, app.options.graphql?.codegen?.server ?? {})
 
-    writeFileSync(resolve(app.options.buildDir, 'types', 'nitro-graphql-server.d.ts'), data, 'utf-8')
+    const printSchema = printSchemaWithDirectives(schema)
+
+    const schemaPath = resolve(app.graphql.buildDir, 'schema.graphql')
+    mkdirSync(dirname(schemaPath), { recursive: true })
+    writeFileSync(schemaPath, printSchema, 'utf-8')
+
+    const serverTypesPath = resolve(app.options.buildDir, 'types', 'nitro-graphql-server.d.ts')
+    mkdirSync(dirname(serverTypesPath), { recursive: true })
+    writeFileSync(serverTypesPath, data, 'utf-8')
   }
   catch (error) {
     consola.error('Server schema generation error:', error)
   }
 }
+
+export async function clientTypeGeneration(
+  app: Nitro,
+  path: string,
+) {
+  try {
+    const root = app.graphql.watchDirs.find(dir => path.startsWith(dir)) || path
+    if (!root) {
+      return
+    }
+    const docs = await loadGraphQLDocuments(root)
+    const graphqlString = readFileSync(join(app.graphql.buildDir, 'schema.graphql'), 'utf-8')
+    const schema = buildSchema(graphqlString)
+
+    const types = await generateClientTypes(schema, docs)
+    const clientTypesPath = resolve(app.options.buildDir, 'types', 'nitro-graphql-client.d.ts')
+    writeFileSync(clientTypesPath, types, 'utf-8')
+  }
+  catch (error) {
+    consola.error('Client schema generation error:', error)
+  }
+}