Skip to content

Commit 2babe6f

Browse files
productdevbookproductdevbook
committed
feat: enhance Nuxt integration with new module options and client type generation
1 parent 4d25474 commit 2babe6f

File tree

12 files changed

+246
-13
lines changed

12 files changed

+246
-13
lines changed

‎package.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,10 @@
3838
"./internal": {
3939
"types": "./dist/internal/index.d.ts",
4040
"import": "./dist/internal/index.js"
41+
},
42+
"./nuxt": {
43+
"types": "./dist/ecosystem/nuxt.d.ts",
44+
"import": "./dist/ecosystem/nuxt.js"
4145
}
4246
},
4347
"main": "./dist/index.js",
@@ -85,6 +89,9 @@
8589
},
8690
"devDependencies": {
8791
"@antfu/eslint-config": "^4.16.2",
92+
"@graphql-codegen/import-types-preset": "^3.0.1",
93+
"@nuxt/kit": "4.0.0-rc.0",
94+
"@nuxt/schema": "4.0.0-rc.0",
8895
"@types/node": "^20.19.7",
8996
"bumpp": "^10.2.0",
9097
"changelogen": "^0.6.2",

‎playground-nuxt/app/app.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
</div>
55
</template>
66

7-
<script setup>
7+
<script setup lang="ts">
88
useHead({
99
title: 'Nuxt + nitro-graphql Example',
1010
meta: [

‎playground-nuxt/app/graphql/sdk.ts‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
// THIS FILE IS GENERATED, DO NOT EDIT!
2+
/* eslint-disable eslint-comments/no-unlimited-disable */
3+
/* tslint:disable */
4+
/* eslint-disable */
5+
/* prettier-ignore */
6+
import * as Types from '#graphql-client';
7+
8+
export type GetUsersQueryVariables = Types.Exact<{ [key: string]: never; }>;
9+
10+
11+
export type GetUsersQuery = { __typename?: 'Query', users: Array<{ __typename?: 'User', id: string, name: string, email: string, createdAt: any }> };
12+
13+
export type GetUserQueryVariables = Types.Exact<{
14+
id: Types.Scalars['ID']['input'];
15+
}>;
16+
17+
18+
export type GetUserQuery = { __typename?: 'Query', user?: { __typename?: 'User', id: string, name: string, email: string, createdAt: any } | null };
19+
20+
export type GetTodosQueryVariables = Types.Exact<{ [key: string]: never; }>;
21+
22+
23+
export type GetTodosQuery = { __typename?: 'Query', todos: Array<{ __typename?: 'Todo', id: string, title: string, completed: boolean, createdAt: any }> };
24+
25+
export type GetPostsQueryVariables = Types.Exact<{ [key: string]: never; }>;
26+
27+
28+
export type GetPostsQuery = { __typename?: 'Query', posts: Array<{ __typename?: 'Post', id: string, title: string, content: string, authorId: string }> };
29+
30+
export type GetPostWithCommentsQueryVariables = Types.Exact<{
31+
postId: Types.Scalars['ID']['input'];
32+
}>;
33+
34+
35+
export type GetPostWithCommentsQuery = { __typename?: 'Query', post?: { __typename?: 'Post', id: string, title: string, content: string, authorId: string } | null, comments: Array<{ __typename?: 'Comment', id: string, content: string, authorId: string }> };
36+
37+
38+
export const GetUsersDocument = /*#__PURE__*/ `
39+
query GetUsers {
40+
users {
41+
id
42+
name
43+
email
44+
createdAt
45+
}
46+
}
47+
`;
48+
export const GetUserDocument = /*#__PURE__*/ `
49+
query GetUser($id: ID!) {
50+
user(id: $id) {
51+
id
52+
name
53+
email
54+
createdAt
55+
}
56+
}
57+
`;
58+
export const GetTodosDocument = /*#__PURE__*/ `
59+
query GetTodos {
60+
todos {
61+
id
62+
title
63+
completed
64+
createdAt
65+
}
66+
}
67+
`;
68+
export const GetPostsDocument = /*#__PURE__*/ `
69+
query GetPosts {
70+
posts {
71+
id
72+
title
73+
content
74+
authorId
75+
}
76+
}
77+
`;
78+
export const GetPostWithCommentsDocument = /*#__PURE__*/ `
79+
query GetPostWithComments($postId: ID!) {
80+
post(id: $postId) {
81+
id
82+
title
83+
content
84+
authorId
85+
}
86+
comments(postId: $postId) {
87+
id
88+
content
89+
authorId
90+
}
91+
}
92+
`;
93+
export type Requester<C = {}> = <R, V>(doc: string, vars?: V, options?: C) => Promise<R> | AsyncIterable<R>
94+
export function getSdk<C>(requester: Requester<C>) {
95+
return {
96+
GetUsers(variables?: Types.GetUsersQueryVariables, options?: C): Promise<Types.GetUsersQuery> {
97+
return requester<Types.GetUsersQuery, Types.GetUsersQueryVariables>(GetUsersDocument, variables, options) as Promise<Types.GetUsersQuery>;
98+
},
99+
GetUser(variables: Types.GetUserQueryVariables, options?: C): Promise<Types.GetUserQuery> {
100+
return requester<Types.GetUserQuery, Types.GetUserQueryVariables>(GetUserDocument, variables, options) as Promise<Types.GetUserQuery>;
101+
},
102+
GetTodos(variables?: Types.GetTodosQueryVariables, options?: C): Promise<Types.GetTodosQuery> {
103+
return requester<Types.GetTodosQuery, Types.GetTodosQueryVariables>(GetTodosDocument, variables, options) as Promise<Types.GetTodosQuery>;
104+
},
105+
GetPosts(variables?: Types.GetPostsQueryVariables, options?: C): Promise<Types.GetPostsQuery> {
106+
return requester<Types.GetPostsQuery, Types.GetPostsQueryVariables>(GetPostsDocument, variables, options) as Promise<Types.GetPostsQuery>;
107+
},
108+
GetPostWithComments(variables: Types.GetPostWithCommentsQueryVariables, options?: C): Promise<Types.GetPostWithCommentsQuery> {
109+
return requester<Types.GetPostWithCommentsQuery, Types.GetPostWithCommentsQueryVariables>(GetPostWithCommentsDocument, variables, options) as Promise<Types.GetPostWithCommentsQuery>;
110+
}
111+
};
112+
}
113+
export type Sdk = ReturnType<typeof getSdk>;

‎playground-nuxt/nuxt.config.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,11 @@ import 'nitro-graphql/types'
44
export default defineNuxtConfig({
55
compatibilityDate: '2024-07-01',
66
devtools: { enabled: true },
7-
7+
modules: [
8+
'nitro-graphql/nuxt',
9+
],
810
nitro: {
911
modules: ['nitro-graphql'],
10-
experimental: {
11-
wasm: true,
12-
},
1312
// GraphQL Yoga configuration
1413
graphql: {
1514
endpoint: '/api/graphql',

‎playground-nuxt/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
"build": "nuxt build",
77
"dev": "nuxt dev",
88
"generate": "nuxt generate",
9-
"preview": "nuxt preview",
10-
"postinstall": "nuxt prepare"
9+
"preview": "nuxt preview"
1110
},
1211
"dependencies": {
1312
"nitro-graphql": "link:../",

‎pnpm-lock.yaml‎

Lines changed: 37 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/client-codegen.ts‎

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import type { Source } from '@graphql-tools/utils'
33
import type { GraphQLSchema } from 'graphql'
44
import type { CodegenClientConfig } from './types'
55
import { codegen } from '@graphql-codegen/core'
6+
import { preset } from '@graphql-codegen/import-types-preset'
67
import { plugin as typescriptPlugin } from '@graphql-codegen/typescript'
78
import { plugin as typescriptGenericSdk } from '@graphql-codegen/typescript-generic-sdk'
89
import { plugin as typescriptOperations } from '@graphql-codegen/typescript-operations'
@@ -104,7 +105,7 @@ export async function generateClientTypes(
104105
) {
105106
if (docs.length === 0) {
106107
consola.info('[graphql] No client GraphQL files found. Skipping client type generation.')
107-
return ''
108+
return false
108109
}
109110

110111
consola.info(`[graphql] Found ${docs.length} client GraphQL documents`)
@@ -138,20 +139,55 @@ export async function generateClientTypes(
138139
{ pluginContent: {} },
139140
{ typescript: {} },
140141
{ typescriptOperations: {} },
141-
{ typescriptGenericSdk: { rawRequest: false } },
142142
],
143143
pluginMap: {
144144
pluginContent: { plugin: pluginContent },
145145
typescript: { plugin: typescriptPlugin },
146146
typescriptOperations: { plugin: typescriptOperations },
147+
},
148+
})
149+
150+
const sdkOutput = await preset.buildGeneratesSection({
151+
baseOutputDir: outputPath || 'client-types.generated.ts',
152+
schema: parse(printSchemaWithDirectives(schema)),
153+
documents: [...docs],
154+
config: {
155+
documentMode: 'string',
156+
pureMagicComment: true,
157+
strictScalars: true,
158+
scalars: {
159+
DateTime: 'Date',
160+
},
161+
},
162+
presetConfig: {
163+
typesPath: '#graphql-client',
164+
165+
},
166+
plugins: [
167+
{ pluginContent: {} },
168+
{ typescriptOperations: {} },
169+
{ typescriptGenericSdk: { rawRequest: false } },
170+
],
171+
pluginMap: {
172+
pluginContent: { plugin: pluginContent },
173+
typescriptOperations: { plugin: typescriptOperations },
147174
typescriptGenericSdk: { plugin: typescriptGenericSdk },
148175
},
149176
})
150177

151-
return output
178+
const results = await Promise.all(
179+
sdkOutput.map(async (config) => {
180+
return { file: config.filename, content: await codegen(config) }
181+
}),
182+
)
183+
184+
return {
185+
types: output,
186+
sdk: results[0]?.content || '',
187+
}
152188
}
153189
catch (error) {
154190
consola.warn('[graphql] Client type generation failed:', error)
155-
return ''
191+
return false
156192
}
157193
}

‎src/ecosystem/nuxt.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import type { VueTSConfig } from '@nuxt/schema'
2+
import { defineNuxtModule } from '@nuxt/kit'
3+
4+
export interface ModuleOptions {
5+
6+
}
7+
8+
export default defineNuxtModule<ModuleOptions>({
9+
meta: {
10+
name: 'nitro-graphql-nuxt',
11+
configKey: 'nitro-graphql-nuxt',
12+
compatibility: {
13+
nuxt: '>=3.16.0',
14+
},
15+
},
16+
defaults: {},
17+
setup: (options, nuxt) => {
18+
nuxt.hooks.hook('prepare:types', (options) => {
19+
options.references.push({ path: 'types/nitro-graphql-client.d.ts' })
20+
21+
options.tsConfig ??= {} as VueTSConfig
22+
options.tsConfig.compilerOptions ??= {}
23+
options.tsConfig.compilerOptions.paths ??= {}
24+
options.tsConfig.compilerOptions.paths['#graphql-client'] = [
25+
'./types/nitro-graphql-client.d.ts',
26+
]
27+
options.tsConfig.include = options.tsConfig.include || []
28+
options.tsConfig.include.push('./types/nitro-graphql-client.d.ts')
29+
})
30+
},
31+
})

‎src/index.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,9 @@ export default defineNitroModule({
1515
nitro.graphql ||= {
1616
buildDir: '',
1717
watchDirs: [],
18+
clientDir: '',
1819
}
19-
20+
2021
const graphqlBuildDir = resolve(nitro.options.buildDir, 'graphql')
2122
nitro.graphql.buildDir = graphqlBuildDir
2223

@@ -25,6 +26,7 @@ export default defineNitroModule({
2526
switch (nitro.options.framework.name) {
2627
case 'nuxt':
2728
watchDirs.push(join(nitro.options.rootDir, 'app', 'graphql'))
29+
nitro.graphql.clientDir = resolve(nitro.options.rootDir, 'app', 'graphql')
2830
break
2931
default:
3032
}

‎src/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ declare module 'nitropack/types' {
1414
graphql: {
1515
buildDir: string
1616
watchDirs: string[]
17+
clientDir: string
1718
}
1819
}
1920
}

0 commit comments

Comments
 (0)