taro压缩_taro-apollo
apollo for Taro
taro-apollo
仿照 react-apollo 1.x版本 以及 taro-redux做的 graphql componet wrapper
安装
npm install taro-apollo --save
yarn add taro-apollo
使用
初始化apollo client
这里我使用的是我的wx-apollo-fetcher 你可以使用自己的或者其他fetch polyfill
import { ApolloClient } from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import { HttpLink } from "apollo-link-http";
import wxApolloFetcher from "wx-apollo-fetcher";
import { setApolloClient } from "taro-apollo";
const client = new ApolloClient({
link: new HttpLink({
uri: "xxx",
fetch: wxApolloFetcher,
}),
cache: new InMemoryCache(),
});
setApolloClient(client);
apollo组件化
import { withQuery } from "taro-apollo";
import gql from "graphql-tag";
const query = gql`
query xxx{
xxxx
}
`;
@withQuery({
query: query,
fetchPolicy: XXX,
ignoreCache: true/false, // 设置 fetchPolicy = "network-only"， 为了省事。。
variables: (props, state) => {
return {
// xxx
};
},
})
export default class MyComponent extends Taro.Component {
render() {
const { data, loading, error } = this.props;
return (
{loading && 加载中}
{error && 出错啦}
{data && xxxx}
);
}
}
有需要注意的是我把原有skip和variables逻辑二合一了 当query需要variables && variables结果为空时自动skip
fetchMore/refetch
render(){
const {fetchMore, refetch} = this.props;
// 参数和 apollo-client一样
}
直发query/mutation
import { sendQuery, sendMutation } from "taro-apollo";
sendQuery(query, variables, ignoreCache)
.then(data => {
// do something
})
.catch(err => {
// handle error
});
sendMutation(mutation, variables, refetchQueries)
.then(data => {
// do something
})
.catch(err => {
// handle error
});
TODO
withMutation
一些推荐用的apollo link
HomePage
Repository
git@github.com:kdong007/taro-apollo.git