Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 1df83b2

Browse files
committed
Add list of sections
1 parent 9a11201 commit 1df83b2

File tree

6 files changed

+91
-85
lines changed

6 files changed

+91
-85
lines changed

‎apollo.config.js‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,8 @@ module.exports = {
22
client: {
33
service: {
44
name: 'guide-api',
5-
url: 'https://api.graphql.guide/graphql',
5+
url: 'https://api.graphql.guide/graphql'
66
},
7-
includes: [
8-
'src/**/*.vue',
9-
'src/**/*.js',
10-
],
11-
},
12-
}
7+
includes: ['src/**/*.vue', 'src/**/*.js']
8+
}
9+
}

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width,initial-scale=1.0">
77
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8-
<title><%= htmlWebpackPlugin.options.title %></title>
8+
<title>The GraphQL Guide</title>
99
</head>
1010
<body>
1111
<div id="app"></div>

‎src/App.vue‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
<template>
2-
<div id="app">
3-
<img alt="Vue logo" src="./assets/logo.png" />
4-
<TableOfContents />
5-
</div>
2+
<img alt="Vue logo" src="./assets/logo.png" />
3+
<TableOfContents />
64
</template>
75

86
<script>
9-
import { provide } from 'vue'
107
import { ApolloClient, InMemoryCache } from '@apollo/client/core'
118
import { DefaultApolloClient } from '@vue/apollo-composable'
9+
import { provide } from 'vue'
1210
1311
import TableOfContents from './components/TableOfContents.vue'
1412
@@ -27,5 +25,3 @@ export default {
2725
}
2826
}
2927
</script>
30-
31-
<style></style>

‎src/components/HelloWorld.vue‎

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎src/components/SectionList.vue‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<template>
2+
<h2>Sections</h2>
3+
4+
<div v-if="loading">Loading...</div>
5+
6+
<div v-else-if="error">Error: {{ error.message }}</div>
7+
8+
<div v-else-if="noSections">This chapter has no sections</div>
9+
10+
<ul v-else>
11+
<li v-for="section of sections" :key="section.id">
12+
{{ section.number }}. {{ section.title }}
13+
</li>
14+
</ul>
15+
</template>
16+
17+
<script>
18+
import { useQuery, useResult } from '@vue/apollo-composable'
19+
import { gql } from '@apollo/client/core'
20+
import { computed } from 'vue'
21+
22+
export default {
23+
name: 'SectionList',
24+
props: {
25+
id: {
26+
type: Number,
27+
required: true
28+
}
29+
},
30+
setup(props) {
31+
const { result, loading, error } = useQuery(
32+
gql`
33+
query SectionList($id: Int!) {
34+
chapter(id: $id) {
35+
sections {
36+
id
37+
number
38+
title
39+
}
40+
}
41+
}
42+
`,
43+
props
44+
)
45+
46+
const sections = useResult(result, [], data => data.chapter.sections)
47+
48+
return {
49+
loading,
50+
error,
51+
noSections: computed(() => sections.value.length === 1),
52+
sections
53+
}
54+
}
55+
}
56+
</script>

‎src/components/TableOfContents.vue‎

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,57 @@
11
<template>
2-
<div class="TableOfContents">
2+
<h1>The GraphQL Guide</h1>
3+
4+
<div v-if="loading">Loading...</div>
5+
6+
<div v-else-if="error">Error: {{ error.message }}</div>
7+
8+
<ul>
39
<li v-for="chapter of chapters" :key="chapter.id">
4-
{{ chapter.title }}
10+
<a @click="updateCurrentSection(chapter.id)">
11+
{{ (chapter.number ? chapter.number + '. ' : '') + chapter.title }}
12+
</a>
513
</li>
6-
</div>
14+
</ul>
15+
16+
<SectionList v-bind:id="currentSection" />
717
</template>
818

919
<script>
1020
import { useQuery, useResult } from '@vue/apollo-composable'
1121
import { gql } from '@apollo/client/core'
22+
import { ref } from 'vue'
23+
24+
import SectionList from './SectionList.vue'
25+
26+
const PREFACE_ID = -2
1227
1328
export default {
1429
name: 'TableOfContents',
30+
components: {
31+
SectionList
32+
},
1533
setup() {
1634
const { result, loading, error } = useQuery(gql`
17-
query ChapterQuery {
35+
query ChapterList {
1836
chapters {
1937
id
2038
number
2139
title
22-
sections {
23-
id
24-
number
25-
title
26-
}
2740
}
2841
}
2942
`)
3043
3144
const chapters = useResult(result, [])
3245
46+
const currentSection = ref(PREFACE_ID)
47+
3348
return {
3449
loading,
3550
error,
36-
chapters
51+
chapters,
52+
currentSection,
53+
updateCurrentSection: newSection => (currentSection.value = newSection)
3754
}
3855
}
3956
}
4057
</script>
41-
42-
<style scoped></style>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /