kylefang/apollo
1
0
Fork 0
mirror of https://github.com/zhigang1992/apollo.git synced 2026-05-27 08:42:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Client: Add time to finish and helpful context (#292)

Browse Source 
* Update client.md

Some corrections/ improvements. Fixes https://github.com/apollographql/fullstack-tutorial/issues/36

Scott

* Update client.md

Add time to accomplish.

* Update client.md

* Update client.md

* Update client.md
This commit is contained in:
Scott
2019-01-17 20:13:23 +01:00
committed by Evans Hauser
parent 51909b3459
commit 014cfe7d33
1 changed files with 23 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
docs/source/tutorial/client.md
View File

@@ -3,6 +3,8 @@ title: "5. Connect your API to a client"
description: Hook up your graph to Apollo Client
---
Time to accomplish: _10 Minutes_
The next half of this tutorial exclusively focuses on connecting a graph API to a frontend with Apollo Client. **Apollo Client** is a complete data management solution for any client. It's view-layer agnostic, which means it can integrate with React, Vue, Angular, or even vanilla JS. Thanks to its intelligent cache, Apollo Client offers a single source of truth for all of the local and remote data in your application.
While Apollo Client works with any view layer, it's most commonly used with React. In this section, you'll learn how to connect the graph API you just built in the previous half of this tutorial to a React app. Even if you're more comfortable with Vue or Angular, you should still be able to follow many of the examples since the concepts are the same. Along the way, you'll also learn how to build essential features like authentication and pagination, as well as tips for optimizing your workflow.
@@ -28,8 +30,12 @@ While Apollo VSCode is not required to successfully complete the tutorial, setti
First, make a copy of the `.env.example` file located in `client/` and call it `.env`. Add your Engine API key that you already created in step #4 to the file:
```
ENGINE_API_KEY=service:your-key-here
ENGINE_API_KEY=service:<your-service-name>:<hash-from-apollo-engine>
```
The entry should basically look something like this:
```
ENGINE_API_KEY=service:my-service-439:E4VSTiXeFWaSSBgFWXOiSA
``` ```
Our key is now stored under the environment variable `ENGINE_API_KEY`. Apollo VSCode uses this API key to pull down your schema from the registry.
@@ -57,32 +63,39 @@ If you didn't complete the server portion, you can use the `uri` from the code b
_src/index.js_
```js
import { ApolloClient } from "apollo-client";
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';
const cache = new InMemoryCache();
const link = new HttpLink({
uri: 'http://localhost:4000/'
})
const client = new ApolloClient({
cache,
link: new HttpLink({
uri: 'http://localhost:4000/graphql',
}),
});
link
})
```
Our client is ready to fetch data! Let's try making a query in the next section.
In just a few lines of code, our client is ready to fetch data! Let's try making a query in the next section.
<h2 id="apollo-client-setup">Make your first query</h2>
Before we show you how to use the React integration for Apollo, let's send a query with vanilla JavaScript.
With a `client.query()` call, we can query our graph's API. Copy the code below and add it to `src/index.js`.
With a `client.query()` call, we can query our graph's API. Add the following line of code to your imports in `src/index.js`.
_src/index.js_
```js line=1
import gql from "graphql-tag";
```
And add this code to the bottom of `index.js`:
_src/index.js_
```
// ... above is the instantiation of the client object.
client
.query({
query: gql`
@@ -99,9 +112,9 @@ client
.then(result => console.log(result));
```
Open up your console and you should see an object with a `data` property containing the result of our query. You'll also see some other properties, like `loading` and `networkStatus`. This is because Apollo Client tracks the loading state of your query for you.
Open up your console and run `npm start`. This will compile your client app. Once it is finished, your browser should open to `http://localhost:3000/` automatically. When the index page opens, open up your [Developer Tools console](https://developers.google.com/web/tools/chrome-devtools/console/) and you should see an object with a `data` property containing the result of our query. You'll also see some other properties, like `loading` and `networkStatus`. This is because Apollo Client tracks the loading state of your query for you.
Apollo Client is designed to fetch graph data from any JavaScript frontend. No frameworks needed. However, there are view layer integrations for different frameworks that makes it easier to bind queries to UI.
Apollo Client is designed to fetch graph data from any JavaScript frontend. No frameworks needed. However, there are view layer integrations for different frameworks that makes it easier to bind queries to the UI.
Go ahead and delete the `client.query()` call you just made. Now, we'll connect our client to React.