前置條件
我們以小程序框架 Taro 為前提恨溜,在項(xiàng)目中使用 GraphQL 查詢數(shù)據(jù),具體步驟如下:
一、安裝
yarn add graphql apollo-boost
柑司,安裝好后,package.json 中添加如下兩個(gè)依賴:
"dependencies": {
...
"apollo-boost": "^0.3.1",
"graphql": "^14.2.1"
...
},
apollo-boost 是什么
Apollo Boost 是一個(gè)零配置的 Apollo Client乓诽,包含很多省心的默認(rèn)配置帜羊,比如 InMemoryCache
和 HttpLink
,我們都是用的合理默認(rèn)配置鸠天。當(dāng)然也包含 graphql-tag
讼育,用 apollo 全家桶,真香稠集!
二奶段、封裝 client
graphql-client.js
import Taro from '@tarojs/taro'
import ApolloClient from 'apollo-boost';
const client = new ApolloClient({
uri: 'https://openapi.baichanghui.com/graphql',
fetch: (url, options) => Taro.request({
url,
method: options.method,
data: options.body,
header: options.headers,
}).then(({data, statusCode}) => {
return {
ok: () => {
return statusCode >= 200 && statusCode < 300;
},
text: () => {
return Promise.resolve(JSON.stringify(data));
}
}
})
});
export default client
注:這里的 openapi.baichanghui.com 是一個(gè)可供臨時(shí)測(cè)試用的接口
三、引用
import { gql } from 'graphql-boost';
import graphqlClient from "../../utils/graphql-client";
四剥纷、獲取數(shù)據(jù)
getData = () => {
const query = gql`{
hello { message info version }
product(id: "R4MGX4") { title city routeDays totalSellNum minHeadCount id }
products { items { id } }
}`;
graphqlClient.query({query, variables: {}}).then(result => {
console.log('result===', result.data);
});
};
友情提示:字段間可以用空格痹籍,逗號(hào)或者換行
五、調(diào)用
<Button onClick={this.getData}>
獲取數(shù)據(jù)
</Button>
六晦鞋、請(qǐng)求
雖然我們?cè)趯?query 語(yǔ)句 { title city routeDays totalSellNum minHeadCount id }
時(shí)字段之間是空格分隔的蹲缠,但被 gql
轉(zhuǎn)換成 \n title\n city\n routeDays\n totalSellNum\n minHeadCount\n id\n
如圖所示:
七、響應(yīng)
在微信開(kāi)發(fā)工具的 network 里就能看到返回?cái)?shù)據(jù)悠垛,實(shí)現(xiàn) 1 次請(qǐng)求返回傳統(tǒng)要請(qǐng)求 3 次接口的數(shù)據(jù)量线定。
如圖所示:
八、完整代碼
https://github.com/Kennytian/graphql-wechat
今天确买,你 GraphQL 了嗎斤讥?