Skip to content

Commit ac290fa

Browse files
productdevbookproductdevbook
committed
feat: add fetch functionality for todos and posts, and enhance user creation and todo/post addition forms
1 parent e61eb50 commit ac290fa

File tree

1 file changed

+188
-52
lines changed

1 file changed

+188
-52
lines changed

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

Lines changed: 188 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,34 @@
3535
</ul>
3636
</div>
3737
</div>
38+
39+
<div>
40+
<button @click="fetchTodos" class="bg-indigo-500 text-white px-4 py-2 rounded">
41+
Fetch Todos
42+
</button>
43+
<div v-if="todos.length" class="mt-2">
44+
<h3 class="font-semibold">Todos:</h3>
45+
<ul class="list-disc list-inside">
46+
<li v-for="todo in todos" :key="todo.id" :class="{ 'line-through': todo.completed }">
47+
{{ todo.title }} - {{ todo.completed ? 'Completed' : 'Pending' }}
48+
</li>
49+
</ul>
50+
</div>
51+
</div>
52+
53+
<div>
54+
<button @click="fetchPosts" class="bg-cyan-500 text-white px-4 py-2 rounded">
55+
Fetch Posts
56+
</button>
57+
<div v-if="posts.length" class="mt-2">
58+
<h3 class="font-semibold">Posts:</h3>
59+
<ul class="list-disc list-inside">
60+
<li v-for="post in posts" :key="post.id">
61+
<strong>{{ post.title }}</strong> - {{ post.content }}
62+
</li>
63+
</ul>
64+
</div>
65+
</div>
3866
</div>
3967
</div>
4068

@@ -43,20 +71,64 @@
4371
<h2 class="text-xl font-semibold mb-4">GraphQL Mutations</h2>
4472

4573
<div class="space-y-4">
46-
<div>
47-
<input
48-
v-model="newUser.name"
49-
placeholder="Name"
50-
class="border p-2 rounded mr-2"
51-
>
52-
<input
53-
v-model="newUser.email"
54-
placeholder="Email"
55-
class="border p-2 rounded mr-2"
56-
>
57-
<button @click="createUser" class="bg-red-500 text-white px-4 py-2 rounded">
58-
Create User
59-
</button>
74+
<!-- Create User -->
75+
<div class="border-b pb-4">
76+
<h3 class="font-semibold mb-2">Create User</h3>
77+
<div class="flex gap-2">
78+
<input
79+
v-model="newUser.name"
80+
placeholder="Name"
81+
class="border p-2 rounded"
82+
>
83+
<input
84+
v-model="newUser.email"
85+
placeholder="Email"
86+
class="border p-2 rounded"
87+
>
88+
<button @click="createUser" class="bg-red-500 text-white px-4 py-2 rounded">
89+
Create User
90+
</button>
91+
</div>
92+
</div>
93+
94+
<!-- Add Todo -->
95+
<div class="border-b pb-4">
96+
<h3 class="font-semibold mb-2">Add Todo</h3>
97+
<div class="flex gap-2">
98+
<input
99+
v-model="newTodo.title"
100+
placeholder="Todo title"
101+
class="border p-2 rounded"
102+
>
103+
<button @click="addTodo" class="bg-green-500 text-white px-4 py-2 rounded">
104+
Add Todo
105+
</button>
106+
</div>
107+
</div>
108+
109+
<!-- Create Post -->
110+
<div class="border-b pb-4">
111+
<h3 class="font-semibold mb-2">Create Post</h3>
112+
<div class="flex gap-2">
113+
<input
114+
v-model="newPost.title"
115+
placeholder="Post title"
116+
class="border p-2 rounded"
117+
>
118+
<input
119+
v-model="newPost.content"
120+
placeholder="Post content"
121+
class="border p-2 rounded"
122+
>
123+
<input
124+
v-model="newPost.authorId"
125+
placeholder="Author ID"
126+
class="border p-2 rounded"
127+
>
128+
<button @click="createPost" class="bg-orange-500 text-white px-4 py-2 rounded">
129+
Create Post
130+
</button>
131+
</div>
60132
</div>
61133
</div>
62134
</div>
@@ -82,82 +154,146 @@
82154
</template>
83155

84156
<script setup lang="ts">
85-
const helloResult = ref()
86-
const greetingResult = ref('')
87-
const users = ref([])
88-
const newUser = ref({ name: '', email: '' })
157+
import type { GetUsersQuery, GetTodosQuery, GetPostsQuery } from '#graphql/client'
158+
159+
// API instance
89160
const api = useGraphQL()
90161
162+
// Reactive state
163+
const helloResult = ref<string>('')
164+
const greetingResult = ref<string>('')
165+
const users = ref<GetUsersQuery['users']>([])
166+
const todos = ref<GetTodosQuery['todos']>([])
167+
const posts = ref<GetPostsQuery['posts']>([])
168+
169+
// Form data
170+
const newUser = ref({ name: '', email: '' })
171+
const newTodo = ref({ title: '' })
172+
const newPost = ref({ title: '', content: '', authorId: '' })
173+
174+
// Query functions
91175
const testHello = async () => {
92176
try {
93177
const response = await api.GetUsers()
94-
helloResult.value = response.users
178+
helloResult.value = `Found ${response.users.length} users`
95179
} catch (error) {
96180
console.error('Hello query failed:', error)
181+
helloResult.value = 'Error occurred'
97182
}
98183
}
99184
100185
const testGreeting = async () => {
101186
try {
102-
const response = await $fetch('/api/graphql', {
103-
method: 'POST',
104-
body: {
105-
query: `query { greeting(name: "Nuxt User") }`
106-
}
107-
})
108-
greetingResult.value = response.data.greeting
187+
// This would need a greeting query in your GraphQL schema
188+
// For now, let's just show a message
189+
greetingResult.value = 'Hello from Nuxt User!'
109190
} catch (error) {
110191
console.error('Greeting query failed:', error)
111-
greetingResult.value = 'Error: ' + error.message
192+
greetingResult.value = 'Error: ' + (error as Error).message
112193
}
113194
}
114195
115196
const fetchUsers = async () => {
116197
try {
117-
const response = await $fetch('/api/graphql', {
118-
method: 'POST',
119-
body: {
120-
query: `query { users { id name email createdAt } }`
121-
}
122-
})
123-
users.value = response.data.users
198+
const response = await api.GetUsers()
199+
users.value = response.users
124200
} catch (error) {
125201
console.error('Users query failed:', error)
126202
}
127203
}
128204
205+
const fetchTodos = async () => {
206+
try {
207+
const response = await api.GetTodos()
208+
todos.value = response.todos
209+
} catch (error) {
210+
console.error('Todos query failed:', error)
211+
}
212+
}
213+
214+
const fetchPosts = async () => {
215+
try {
216+
const response = await api.GetPosts()
217+
posts.value = response.posts
218+
} catch (error) {
219+
console.error('Posts query failed:', error)
220+
}
221+
}
222+
223+
// Mutation functions
129224
const createUser = async () => {
130225
if (!newUser.value.name || !newUser.value.email) {
131226
alert('Please fill in both name and email')
132227
return
133228
}
134229
135230
try {
136-
const response = await $fetch('/api/graphql', {
137-
method: 'POST',
138-
body: {
139-
query: `
140-
mutation CreateUser($input: CreateUserInput!) {
141-
createUser(input: $input) {
142-
id
143-
name
144-
email
145-
createdAt
146-
}
147-
}
148-
`,
149-
variables: {
150-
input: newUser.value
151-
}
231+
const response = await api.CreateUser({
232+
input: {
233+
name: newUser.value.name,
234+
email: newUser.value.email
152235
}
153236
})
154237
155-
console.log('User created:', response.data.createUser)
238+
console.log('User created:', response.createUser)
156239
newUser.value = { name: '', email: '' }
157240
await fetchUsers() // Refresh users list
158241
} catch (error) {
159242
console.error('Create user failed:', error)
160-
alert('Failed to create user: ' + error.message)
243+
alert('Failed to create user: ' + (error as Error).message)
161244
}
162245
}
246+
247+
const addTodo = async () => {
248+
if (!newTodo.value.title) {
249+
alert('Please enter a todo title')
250+
return
251+
}
252+
253+
try {
254+
const response = await api.AddTodo({
255+
title: newTodo.value.title
256+
})
257+
258+
console.log('Todo added:', response.addTodo)
259+
newTodo.value = { title: '' }
260+
await fetchTodos() // Refresh todos list
261+
} catch (error) {
262+
console.error('Add todo failed:', error)
263+
alert('Failed to add todo: ' + (error as Error).message)
264+
}
265+
}
266+
267+
const createPost = async () => {
268+
if (!newPost.value.title || !newPost.value.content || !newPost.value.authorId) {
269+
alert('Please fill in all fields')
270+
return
271+
}
272+
273+
try {
274+
const response = await api.CreatePost({
275+
input: {
276+
title: newPost.value.title,
277+
content: newPost.value.content,
278+
authorId: newPost.value.authorId
279+
}
280+
})
281+
282+
console.log('Post created:', response.createPost)
283+
newPost.value = { title: '', content: '', authorId: '' }
284+
await fetchPosts() // Refresh posts list
285+
} catch (error) {
286+
console.error('Create post failed:', error)
287+
alert('Failed to create post: ' + (error as Error).message)
288+
}
289+
}
290+
291+
// Load initial data
292+
onMounted(async () => {
293+
await Promise.all([
294+
fetchUsers(),
295+
fetchTodos(),
296+
fetchPosts()
297+
])
298+
})
163299
</script>

0 commit comments

Comments
 (0)