介紹
ApolloClient & ApolloProvider 之中有提供幾個不錯的功能,來介紹一下有哪些參數可以使用
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 讓組裝更方便簡單