iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 6
1
Data Technology

GraphQL + ApolloData 入門系列 第 6

ApolloData Client 基本設定

介紹
前幾篇文章都是在介紹 Server 的部分,因為 ApolloData 提供了許多前端的套件,這次先以用原生 ApolloClient來做一個 簡單設定並打出 Request 的步驟

安裝
ApolloData 剛升2.0版本 如果是使用2.0之前的版本請參考官方網站
以下是2.0基本設定

import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';

const client = new ApolloClient({
  // 如果沒有特別設定
  //  `/graphql` 將是預設的endpoint
  link: new HttpLink(),
  cache: new InMemoryCache()
}); 

link:中的HttpLink 可以設定任何網域的要連 GraphQL Server ,預設是在本機的 /graphql底下,
另外因為 ApolloData 有cache優化機制所以這邊也要預設給他一個 Cache

import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';

const client = new ApolloClient({
  link: new HttpLink({ uri: 'https://q80vw8qjp.lp.gql.zone/graphql' }),
  cache: new InMemoryCache()
});

client.query({ query: gql`{ hello }` }).then(console.log);

在還沒有搭配使用 React 或其他框架時候可以使用原生基本語法 client.query 的方式送出 payload

如果要使用middleware 做一些Token的傳值 可以使用 setContext 來把header 寫入一些token給後端發fetch的時候使用

import { setContext } from 'apollo-link-context';

https://github.com/apollographql/apollo-link/blob/master/packages/apollo-link/src/types.ts#L31

總結

設定 ApolloClient 時,主要設定了 link 與 chache, 設定後,直接使用 ApolloClient 去發 Request 到 GraphQL Server,好處是設定一次就不用每次發 Request 的時候都在設定一次網址 , days7 再來說明 React 如何透過 ApolloData 提供的 HOC 來發 Request


上一篇
ApolloData Server & GraphQL
下一篇
ApolloData Client & React
系列文
GraphQL + ApolloData 入門30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言