Skip to content

Commit a526250

Browse files
JoviDeCroockyaacovCR
JoviDeCroock
authored and
yaacovCR
committed
Add overview page and add stackblitz to tutorial (#4283)
Not quite sure yet about contents of the overview page, also the header is pretty odd, feels like a nextra bug or I goofed the CSS up 😅 generally though it looks like the extra-button and search/... aren't in their own container preventing a good space-between. The absence of links seems to cause thsi.
1 parent 6211aa8 commit a526250

File tree

4 files changed

+90
-68
lines changed

4 files changed

+90
-68
lines changed

‎website/pages/_document.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export default function Document() {
44
return (
55
<Html lang="en">
66
<Head />
7-
<body className="flex _flex">
7+
<body>
88
<Main />
99
<NextScript />
1010
</body>

‎website/pages/_meta.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
const meta = {
2+
index: '',
23
'-- 1': {
34
type: 'separator',
45
title: 'GraphQL.JS Tutorial',
56
},
6-
index: '',
7+
'getting-started': '',
78
'running-an-express-graphql-server': '',
89
'graphql-clients': '',
910
'basic-types': '',

‎website/pages/getting-started.mdx

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
---
2+
title: Getting Started With GraphQL.js
3+
sidebarTitle: Getting Started
4+
---
5+
6+
{/* title can be removed in Nextra 4, since sidebar title will take from first h1 */}
7+
8+
# Getting Started With GraphQL.js
9+
10+
## Prerequisites
11+
12+
Before getting started, you should have Node v6 installed, although the examples should mostly work in previous versions of Node as well.
13+
For this guide, we won't use any language features that require transpilation, but we will use some ES6 features like
14+
[Promises](http://www.html5rocks.com/en/tutorials/es6/promises/), classes,
15+
and arrow functions, so if you aren't familiar with them you might want to read up on them first.
16+
17+
> Alternatively you can start from [this StackBlitz](https://stackblitz.com/edit/stackblitz-starters-znvgwr) - if you choose
18+
> this route you can skip to [Basic Types](./basic-types.mdx).
19+
20+
To create a new project and install GraphQL.js in your current directory:
21+
22+
```bash
23+
npm init
24+
npm install graphql --save
25+
```
26+
27+
## Writing Code
28+
29+
To handle GraphQL queries, we need a schema that defines the `Query` type, and we need an API root with a function called a “resolver” for each API endpoint. For an API that just returns “Hello world!”, we can put this code in a file named `server.js`:
30+
31+
```javascript
32+
let { graphql, buildSchema } = require('graphql');
33+
34+
// Construct a schema, using GraphQL schema language
35+
let schema = buildSchema(`
36+
type Query {
37+
hello: String
38+
}
39+
`);
40+
41+
// The rootValue provides a resolver function for each API endpoint
42+
let rootValue = {
43+
hello() {
44+
return 'Hello world!';
45+
},
46+
};
47+
48+
// Run the GraphQL query '{ hello }' and print out the response
49+
graphql({
50+
schema,
51+
source: '{ hello }',
52+
rootValue,
53+
}).then((response) => {
54+
console.log(JSON.stringify(response, null, 2));
55+
});
56+
```
57+
58+
If you run this with:
59+
60+
```sh
61+
node server.js
62+
```
63+
64+
You should see the GraphQL response printed out:
65+
66+
```json
67+
{
68+
"data": {
69+
"hello": "Hello world!"
70+
}
71+
}
72+
```
73+
74+
Congratulations - you just executed a GraphQL query!
75+
76+
For practical applications, you'll probably want to run GraphQL queries from an API server, rather than executing GraphQL with a command line tool. To use GraphQL for an API server over HTTP, check out [Running an Express GraphQL Server](/running-an-express-graphql-server/).

‎website/pages/index.mdx

Lines changed: 11 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,18 @@
11
---
2-
title: Getting Started With GraphQL.js
3-
sidebarTitle: Getting Started
2+
title: Overview
3+
sidebarTitle: Overview
44
---
55

6-
{/* title can be removed in Nextra 4, since sidebar title will take from first h1 */}
6+
GraphQL.JS is the reference implementation to the [GraphQL Specification](https://spec.graphql.org/draft/), it's designed to be simple to use and easy to understand
7+
while closely following the Specification.
78

8-
# Getting Started With GraphQL.js
9+
You can build GraphQL servers, clients, and tools with this library, it's designed so you can choose which parts you use, for example, you can build your own parser
10+
and use the execution/validation from the library. There also a lot of useful utilities for schema-diffing, working with arguments and [many more](./utilities.mdx).
911

10-
## Prerequisites
12+
In the following chapters you'll find out more about the three critical pieces of this library
1113

12-
Before getting started, you should have Node v6 installed, although the examples should mostly work in previous versions of Node as well.
13-
For this guide, we won't use any language features that require transpilation, but we will use some ES6 features like
14-
[Promises](http://www.html5rocks.com/en/tutorials/es6/promises/), classes,
15-
and arrow functions, so if you aren't familiar with them you might want to read up on them first.
14+
- The GraphQL language
15+
- Document validation
16+
- GraphQL Execution
1617

17-
To create a new project and install GraphQL.js in your current directory:
18-
19-
```bash
20-
npm init
21-
npm install graphql --save
22-
```
23-
24-
## Writing Code
25-
26-
To handle GraphQL queries, we need a schema that defines the `Query` type, and we need an API root with a function called a “resolver” for each API endpoint. For an API that just returns “Hello world!”, we can put this code in a file named `server.js`:
27-
28-
```javascript
29-
let { graphql, buildSchema } = require('graphql');
30-
31-
// Construct a schema, using GraphQL schema language
32-
let schema = buildSchema(`
33-
type Query {
34-
hello: String
35-
}
36-
`);
37-
38-
// The rootValue provides a resolver function for each API endpoint
39-
let rootValue = {
40-
hello() {
41-
return 'Hello world!';
42-
},
43-
};
44-
45-
// Run the GraphQL query '{ hello }' and print out the response
46-
graphql({
47-
schema,
48-
source: '{ hello }',
49-
rootValue,
50-
}).then((response) => {
51-
console.log(JSON.stringify(response, null, 2));
52-
});
53-
```
54-
55-
If you run this with:
56-
57-
```sh
58-
node server.js
59-
```
60-
61-
You should see the GraphQL response printed out:
62-
63-
```json
64-
{
65-
"data": {
66-
"hello": "Hello world!"
67-
}
68-
}
69-
```
70-
71-
Congratulations - you just executed a GraphQL query!
72-
73-
For practical applications, you'll probably want to run GraphQL queries from an API server, rather than executing GraphQL with a command line tool. To use GraphQL for an API server over HTTP, check out [Running an Express GraphQL Server](/running-an-express-graphql-server/).
18+
You can also code along on [a tutorial](./getting-started.mdx).

0 commit comments

Comments
 (0)