iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 11
0
Modern Web

Next.js + 各種套件組合系列 第 11

Next.js & ApolloData(二) 基本設定

  • 分享至 

  • xImage
  •  

介紹
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第二個參數

​
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 語法 , 在組裝元件中使用了 recompose 讓組裝更方便簡單


上一篇
Next.js & ApolloData(一) 基本設定
下一篇
Next.js & ApolloData(三) Query & Mutation
系列文
Next.js + 各種套件組合30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言