介紹
ApolloClient & ApolloProvider 之中有提供幾個不錯的功能，來介紹一下有哪些參數可以使用

• link: Apollo Client提供一了一個網絡層,除了可以發request到 GraphQL Server EndPoint設定

• cache: cahce層 ，預設值使用 apollo-cache-inmemory 只要引入 { InMemoryCache } 直接可以用，官方有更多cache的文件可以參考

• ssrMode: 當打開ssrMode的時候 React Apollo’s getDataFromTree 前端的method就會提供給SSR當 promise去異步請求資料.

• ssrForceFetchDelay: 強制延遲ApolloClient在SSR之後在發Request

• connectToDevTools: Apollo 有提供介面可以連結到開發工具介面,可以參考網址
  https://www.apollographql.com/docs/react/features/developer-tooling.html

• queryDeduplication: 一般Apollo有Cache機制，如果重複查詢的話會找本機的資源，如果這邊使用 false 就會強制到 Server 要資源

• defaultOptions: 設定每個行爲的網路模式如下

const defaultOptions = { 
  watchQuery：{ 
    fetchPolicy：'cache-and-network'，
    errorPolicy：'ignore'，
  }，
  query：{ 
    fetchPolicy：'network-only'，
    errorPolicy：'all'，
  }，
  mutate：{ 
    errorPolicy：' all'
   } 
}

ApolloProvider組件提供一個 ApolloClient 實例來獲取數據， graphql 函數將能夠提供對GraphQL打payload，可以操作三種方法 Query，Mutation，Subscription 三種

再打這些操作時候有 config 可以使用，在 graphql第二個參數，以下展示已 React 為主

export default graphql(
  gql`{ ... }`, //<- Json payload
  config, // <- The `config` object.
)(MyComponent);

config.options: 參數傳遞, 通常用在gql有參數的狀況使用,也可以給初始化預設值

export default graphql(gql`{ ... }`, {
  options: (props) => ({
    // Options are computed from `props` here.
  }),
})(MyComponent);

config.props: 這邊與recomopse一樣操作方式 可以透過組裝傳遞參數或是函數到組件之中
以下面的例子就會把 props 加上 onLoadMore 的 method

export default graphql(gql`{ ... }`, {
  props: ({ data: { fetchMore } }) => ({
    onLoadMore: () => {
      fetchMore({ ... });
    },
  }),
})(MyComponent);

function MyComponent({ onLoadMore }) {
  return (
    <button onClick={onLoadMore}>
      Load More!
    </button>
  );
}

config.skip: 如果為 true grpahql 就忽略 graphql method ，但不要直接設定 boolean值而是使用一個 可以有切換的function當作開關使用

export default graphql(gql`{ ... }`, {
  skip: props => !!props.skip,
})(MyComponent);

config.name: 因為如果透過compose 去組裝很多 graphql ，因為都是透過對props加工，意味如果沒有定義名稱則會有props覆蓋的問題，定義好名稱後就可以透過 props 取到各自的資料

export default compose(
  graphql(gql`mutation (...) { ... }`, { name: 'createTodo' }),
  graphql(gql`mutation (...) { ... }`, { name: 'updateTodo' }),
  graphql(gql`mutation (...) { ... }`, { name: 'deleteTodo' }),
)(MyComponent);

function MyComponent(props) {
  // Instead of the default prop name, `mutate`,
  // we have three different prop names.
  console.log(props.createTodo);
  console.log(props.updateTodo);
  console.log(props.deleteTodo);

  return null;
}

總結

ApolloClient 提供許多參數可以套用 ， ApolloProvder 底下的元件都可以透過 graphql 這個 method 來對 GraphQL Server 發Request， 只需要設定好 ApolloClient 其他元件的開發只需要專注在 gql 的Json PayLoad 語法 ， 在組裝元件中使用了 compose 讓組裝更方便簡單