Skip to content

Commit 0e746fe

Browse files
productdevbookproductdevbook
authored
feat: add comprehensive Nuxt layer support with codebase cleanup (#36)
* feat: add comprehensive Nuxt layer support with codebase cleanup - Add Nuxt layer support for GraphQL files collection - Layer GraphQL file discovery (schemas, resolvers, directives, documents) - Dynamic path system replacing hardcoded assumptions - File watching with layer support - Auto-generated file ignore patterns - Deduplication to prevent conflicts - Comprehensive codebase cleanup - Fix TypeScript errors and improve type safety - Replace console.* with proper consola logging - Remove unnecessary comments and dead code - Optimize imports and exports for better readability - Fix ESLint issues and improve code quality - Layer integration testing with example layer - Added example layer with posts functionality - Updated playground to demonstrate layer support - Added posts page to showcase layer-based GraphQL operations Closes #35 * chore: update dependencies in pnpm-workspace.yaml - bump @antfu/eslint-config from ^5.2.1 to ^5.2.2 - bump @graphql-codegen/typescript-resolvers from ^4.5.1 to ^4.5.2 - bump @nuxt/kit and @nuxt/schema from ^4.0.3 to ^4.1.0 - bump @types/node from ^22.18.0 to ^22.18.1 - bump nitropack from ^2.12.4 to ^2.12.5 - bump nuxt from ^4.0.3 to ^4.1.0 - bump oxc-parser from ^0.82.3 to ^0.86.0 - bump tailwindcss from ^4.1.12 to ^4.1.13 - bump vue from ^3.5.20 to ^3.5.21 - bump zod from ^4.1.3 to ^4.1.5
1 parent 229a2ac commit 0e746fe

File tree

20 files changed

+1423
-660
lines changed

20 files changed

+1423
-660
lines changed

‎package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "nitro-graphql",
33
"type": "module",
44
"version": "1.3.0",
5-
"packageManager": "[email protected].0",
5+
"packageManager": "[email protected].1",
66
"description": "GraphQL integration for Nitro",
77
"license": "MIT",
88
"sideEffects": false,
@@ -111,7 +111,6 @@
111111
},
112112
"devDependencies": {
113113
"@antfu/eslint-config": "catalog:",
114-
115114
"@nuxt/kit": "catalog:",
116115
"@nuxt/schema": "catalog:",
117116
"@types/node": "catalog:",

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,39 @@ export const GetUserDocument = /*#__PURE__*/ `
5252
}
5353
}
5454
`;
55+
export const GetPostsDocument = /*#__PURE__*/ `
56+
query GetPosts {
57+
posts {
58+
id
59+
title
60+
content
61+
author
62+
createdAt
63+
}
64+
}
65+
`;
66+
export const GetPostDocument = /*#__PURE__*/ `
67+
query GetPost($id: ID!) {
68+
post(id: $id) {
69+
id
70+
title
71+
content
72+
author
73+
createdAt
74+
}
75+
}
76+
`;
77+
export const CreatePostDocument = /*#__PURE__*/ `
78+
mutation CreatePost($input: CreatePostInput!) {
79+
createPost(input: $input) {
80+
id
81+
title
82+
content
83+
author
84+
createdAt
85+
}
86+
}
87+
`;
5588
export type Requester<C = {}, E = unknown> = <R, V>(doc: string, vars?: V, options?: C) => Promise<ExecutionResult<R, E>> | AsyncIterable<ExecutionResult<R, E>>
5689
export function getSdk<C, E>(requester: Requester<C, E>) {
5790
return {
@@ -69,6 +102,15 @@ export function getSdk<C, E>(requester: Requester<C, E>) {
69102
},
70103
GetUser(variables: Types.GetUserQueryVariables, options?: C): Promise<ExecutionResult<Types.GetUserQuery, E>> {
71104
return requester<Types.GetUserQuery, Types.GetUserQueryVariables>(GetUserDocument, variables, options) as Promise<ExecutionResult<Types.GetUserQuery, E>>;
105+
},
106+
GetPosts(variables?: Types.GetPostsQueryVariables, options?: C): Promise<ExecutionResult<Types.GetPostsQuery, E>> {
107+
return requester<Types.GetPostsQuery, Types.GetPostsQueryVariables>(GetPostsDocument, variables, options) as Promise<ExecutionResult<Types.GetPostsQuery, E>>;
108+
},
109+
GetPost(variables: Types.GetPostQueryVariables, options?: C): Promise<ExecutionResult<Types.GetPostQuery, E>> {
110+
return requester<Types.GetPostQuery, Types.GetPostQueryVariables>(GetPostDocument, variables, options) as Promise<ExecutionResult<Types.GetPostQuery, E>>;
111+
},
112+
CreatePost(variables: Types.CreatePostMutationVariables, options?: C): Promise<ExecutionResult<Types.CreatePostMutation, E>> {
113+
return requester<Types.CreatePostMutation, Types.CreatePostMutationVariables>(CreatePostDocument, variables, options) as Promise<ExecutionResult<Types.CreatePostMutation, E>>;
72114
}
73115
};
74116
}

‎playground-nuxt/app/pages/index.vue‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
</p>
1212
</div>
1313

14-
<!-- Quick Stats -->
15-
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
14+
<!-- Navigation Links -->
15+
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
1616
<div class="bg-white rounded-lg shadow p-6">
1717
<div class="flex items-center">
1818
<div class="flex-shrink-0">
@@ -29,6 +29,24 @@
2929
</div>
3030
</div>
3131

32+
<div class="bg-white rounded-lg shadow p-6">
33+
<div class="flex items-center">
34+
<div class="flex-shrink-0">
35+
<div class="w-8 h-8 bg-purple-500 rounded-full flex items-center justify-center">
36+
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
37+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
38+
</svg>
39+
</div>
40+
</div>
41+
<div class="ml-3">
42+
<p class="text-sm font-medium text-gray-500">Layer Posts</p>
43+
<p class="text-sm text-gray-900">
44+
<NuxtLink to="/posts" class="text-purple-600 hover:text-purple-800">View Posts</NuxtLink>
45+
</p>
46+
</div>
47+
</div>
48+
</div>
49+
3250
<div class="bg-white rounded-lg shadow p-6">
3351
<div class="flex items-center">
3452
<div class="flex-shrink-0">
@@ -41,7 +59,7 @@
4159
<div class="ml-3">
4260
<p class="text-sm font-medium text-gray-500">GraphQL Playground</p>
4361
<p class="text-sm text-gray-900">
44-
<a href="/api/graphql" target="_blank" class="text-blue-600 hover:text-blue-800">Open Playground</a>
62+
<a href="/api/graphql" target="_blank" class="text-green-600 hover:text-green-800">Open Playground</a>
4563
</p>
4664
</div>
4765
</div>

‎playground-nuxt/app/pages/posts.vue‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<template>
2+
<div class="p-8">
3+
<h1 class="text-3xl font-bold mb-6">Posts from Layer</h1>
4+
5+
<div v-if="pending" class="text-center">
6+
Loading posts...
7+
</div>
8+
9+
<div v-else-if="error" class="text-red-500">
10+
Error loading posts: {{ error }}
11+
</div>
12+
13+
<div v-else class="space-y-4">
14+
<div
15+
v-for="post in data?.posts"
16+
:key="post.id"
17+
class="border border-gray-200 rounded-lg p-4"
18+
>
19+
<h2 class="text-xl font-semibold mb-2">{{ post.title }}</h2>
20+
<p class="text-gray-600 mb-2">{{ post.content }}</p>
21+
<div class="text-sm text-gray-500">
22+
By {{ post.author }} • {{ formatDate(post.createdAt) }}
23+
</div>
24+
</div>
25+
26+
<div class="mt-8 p-4 bg-green-100 rounded-lg">
27+
<h3 class="font-semibold text-green-800">✅ Layer Support Working!</h3>
28+
<p class="text-green-700">
29+
These posts are defined in a Nuxt layer at <code>layers/example-layer/</code>.
30+
The GraphQL schema and resolvers are automatically discovered and merged with the main application.
31+
</p>
32+
</div>
33+
</div>
34+
</div>
35+
</template>
36+
37+
<script setup lang="ts">
38+
import type { GetPostsQuery } from '#graphql/client'
39+
40+
const query = gql`
41+
query GetPosts {
42+
posts {
43+
id
44+
title
45+
content
46+
author
47+
createdAt
48+
}
49+
}
50+
`
51+
52+
const { data, pending, error } = await useFetch<{ data: GetPostsQuery }>('/api/graphql', {
53+
method: 'POST',
54+
body: {
55+
query: query,
56+
},
57+
transform: (result: any) => result.data
58+
})
59+
60+
function formatDate(dateString: string) {
61+
return new Date(dateString).toLocaleDateString()
62+
}
63+
</script>

‎playground-nuxt/layers/example-layer/app/graphql/posts.graphql‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Client queries from layer
2+
query GetPosts {
3+
posts {
4+
id
5+
title
6+
content
7+
author
8+
createdAt
9+
}
10+
}
11+
12+
query GetPost($id: ID!) {
13+
post(id: $id) {
14+
id
15+
title
16+
content
17+
author
18+
createdAt
19+
}
20+
}
21+
22+
mutation CreatePost($input: CreatePostInput!) {
23+
createPost(input: $input) {
24+
id
25+
title
26+
content
27+
author
28+
createdAt
29+
}
30+
}

‎playground-nuxt/layers/example-layer/nuxt.config.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default defineNuxtConfig({
2+
// This makes this directory a Nuxt layer
3+
})

‎playground-nuxt/layers/example-layer/server/graphql/posts.graphql‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Layer GraphQL Schema - Posts
2+
type Post {
3+
id: ID!
4+
title: String!
5+
content: String!
6+
author: String!
7+
createdAt: DateTime!
8+
}
9+
10+
extend type Query {
11+
posts: [Post!]!
12+
post(id: ID!): Post
13+
}
14+
15+
extend type Mutation {
16+
createPost(input: CreatePostInput!): Post!
17+
test101010: String!
18+
}
19+
20+
input CreatePostInput {
21+
title: String!
22+
content: String!
23+
author: String!
24+
}

‎playground-nuxt/layers/example-layer/server/graphql/posts.resolver.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
// Layer GraphQL Resolvers - Posts
2+
const mockPosts = [
3+
{
4+
id: '1',
5+
title: 'First Post from Layer',
6+
content: 'This is a post defined in a Nuxt layer!',
7+
author: 'Layer Author',
8+
createdAt: new Date().toISOString(),
9+
},
10+
{
11+
id: '2',
12+
title: 'GraphQL Layers Example',
13+
content: 'Demonstrating how GraphQL schemas can be shared across Nuxt layers.',
14+
author: 'Nitro GraphQL',
15+
createdAt: new Date().toISOString(),
16+
},
17+
]
18+
19+
export const postQueries = defineQuery({
20+
posts: () => mockPosts,
21+
post: (parent, { id }) => mockPosts.find(post => post.id === id),
22+
})
23+
24+
export const postMutations = defineMutation({
25+
createPost: (parent, { input }) => {
26+
const newPost = {
27+
id: String(mockPosts.length + 1),
28+
...input,
29+
createdAt: new Date().toISOString(),
30+
}
31+
mockPosts.push(newPost)
32+
return newPost
33+
},
34+
})

‎playground-nuxt/nuxt.config.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
export default defineNuxtConfig({
22
compatibilityDate: '2024-07-01',
33
devtools: { enabled: true },
4+
// Extend from the example layer to test layer support
5+
extends: ['./layers/example-layer'],
46
modules: [
57
'nitro-graphql/nuxt',
68
'@nuxtjs/tailwindcss',

‎playground-nuxt/server/graphql/_directives.graphql‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# WARNING: This file is auto-generated by nitro-graphql
2+
# Do not modify this file directly. It will be overwritten.
3+
# To define custom directives, create .directive.ts files using defineDirective()
4+
5+
directive @layerTest on FIELD_DEFINITION

0 commit comments

Comments
 (0)