Skip to content

Commit c3c1de3

Browse files
unicodeveloperpeggyrayzis
authored andcommitted
Add images
1 parent 23ac30a commit c3c1de3

File tree

6 files changed

+104
-0
lines changed

6 files changed

+104
-0
lines changed

.DS_Store

6 KB
Binary file not shown.
1.03 MB
Loading
504 KB
Loading
1.03 MB
Loading

docs/source/images/schematab.png

865 KB
Loading

docs/source/tutorial/schema.md

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,3 +124,107 @@ module.exports = typeDefs;
124124
```
125125

126126
<h2 id="apollo-server-run">Run your server</h2>
127+
128+
Now that we have scoped out our app's schema, let's run the server. Before running the server, make sure you have the following installed:
129+
130+
* **Node.js and npm**: At least [Node.js v8.0 and npm v5](https://nodejs.org/en/download).
131+
* **nodemon**: Ensure that you have [nodemon](https://www.npmjs.com/package/nodemon) installed globally.
132+
133+
After that, create a directory and run `npm init --y` to create a `package.json` file. Within this directory, go ahead and create an `index.js` file. Now, add the code below to the file.
134+
135+
_index.js_
136+
137+
```js
138+
const { ApolloServer, gql } = require('apollo-server');
139+
140+
const typeDefs = gql`
141+
type Query {
142+
launches(pageSize: Int, cursor: String): [Launch]!
143+
launch(id: ID!): Launch
144+
user(id: ID!): User
145+
}
146+
147+
type Mutation {
148+
bookTrips(userId: ID!, tripId: [ID!]): Boolean!
149+
cancelTrip(userId: ID!, tripId: ID!): Boolean!
150+
login(email: String): String
151+
}
152+
153+
type Launch {
154+
id: ID!
155+
cursor: String
156+
year: String!
157+
date: String!
158+
mission: Mission!
159+
rocket: Rocket!
160+
launchSuccess: Boolean
161+
}
162+
163+
type Rocket {
164+
id: ID!
165+
name: String!
166+
type: String!
167+
}
168+
169+
type User {
170+
id: ID!
171+
email: String!
172+
avatar: String
173+
trips: [Launch]
174+
}
175+
176+
type Mission {
177+
name: String!
178+
missionPatch: String
179+
}
180+
`;
181+
182+
const server = new ApolloServer({ typeDefs });
183+
184+
server.listen().then(({ url }) => {
185+
console.log(`🚀 Server ready at ${url}`);
186+
});
187+
188+
```
189+
190+
**Line 182 - 186** indicates the portion of the code that runs the GraphQL server. The `typeDefs` is passed to the `ApolloServer` constructor, then `ApolloServer`'s `listen()` method is invoked to run the server.
191+
192+
On your terminal, run:
193+
194+
```bash
195+
nodemon index.js
196+
```
197+
198+
Apollo Server will now be available on port 4000. By default, it supports [GraphQL Playground](https://www.apollographql.com/docs/apollo-server/features/graphql-playground.html). The Playground is an interactive, in-browser GraphQL IDE for testing your queries. Apollo Server automatically serves the GraphQL Playground GUI to web browsers in development. When `NODE_ENV` is set to production, GraphQL Playground is disabled as a production best-practice.
199+
200+
**Note:** By default, Apollo Server runs on port 4000. See the [API reference](https://www.apollographql.com/docs/apollo-server/v2/api/apollo-server.html) for additional listen options, including how to configure the port.
201+
202+
<div style="text-align:center">
203+
![Apollo Server running on port 4000](../images/noresolversjustquery.png)
204+
<br></br>
205+
</div>
206+
207+
Run a simple query like the one above. It will return null because the queries are not connected to any resolvers just yet.
208+
209+
The GraphQL Playground provides the ability to introspect your schemas. Check out the right hand side of the playground and click on the `schema` button.
210+
211+
<div style="text-align:center">
212+
![Schema button](../images/schematab.png)
213+
<br></br>
214+
</div>
215+
216+
The schema types are shown like you have below:
217+
218+
<div style="text-align:center">
219+
![Introspection](../images/introspection.png)
220+
<br></br>
221+
</div>
222+
223+
You can quickly have access to the documentation of a GraphQL API via the `schema` button.
224+
225+
<div style="text-align:center">
226+
![More details on a Schema Type](../images/moredetailsonatype.png)
227+
<br></br>
228+
</div>
229+
230+
That's all for running Apollo Server for now. Let's move on to the next part of our tutorial.

0 commit comments

Comments
 (0)