GraphQL 在小程序中的調(diào)用示例

前置條件

我們以小程序框架 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)配置帜羊,比如 InMemoryCacheHttpLink,我們都是用的合理默認(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 了嗎斤讥?

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市湾趾,隨后出現(xiàn)的幾起案子芭商,更是在濱河造成了極大的恐慌派草,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,839評(píng)論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件铛楣,死亡現(xiàn)場(chǎng)離奇詭異近迁,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)蛉艾,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門钳踊,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人勿侯,你說(shuō)我怎么就攤上這事拓瞪。” “怎么了助琐?”我有些...
    開(kāi)封第一講書人閱讀 153,116評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵祭埂,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我兵钮,道長(zhǎng)蛆橡,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書人閱讀 55,371評(píng)論 1 279
  • 正文 為了忘掉前任掘譬,我火速辦了婚禮泰演,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘葱轩。我一直安慰自己睦焕,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,384評(píng)論 5 374
  • 文/花漫 我一把揭開(kāi)白布靴拱。 她就那樣靜靜地躺著垃喊,像睡著了一般。 火紅的嫁衣襯著肌膚如雪袜炕。 梳的紋絲不亂的頭發(fā)上本谜,一...
    開(kāi)封第一講書人閱讀 49,111評(píng)論 1 285
  • 那天,我揣著相機(jī)與錄音偎窘,去河邊找鬼乌助。 笑死,一個(gè)胖子當(dāng)著我的面吹牛陌知,可吹牛的內(nèi)容都是我干的眷茁。 我是一名探鬼主播,決...
    沈念sama閱讀 38,416評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼纵诞,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了培遵?” 一聲冷哼從身側(cè)響起浙芙,我...
    開(kāi)封第一講書人閱讀 37,053評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤登刺,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后嗡呼,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體纸俭,經(jīng)...
    沈念sama閱讀 43,558評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡摊聋,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,007評(píng)論 2 325
  • 正文 我和宋清朗相戀三年嘹狞,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了绩卤。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片靡羡。...
    茶點(diǎn)故事閱讀 38,117評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡歇僧,死狀恐怖薛躬,靈堂內(nèi)的尸體忽然破棺而出粒氧,到底是詐尸還是另有隱情度迂,我是刑警寧澤敌买,帶...
    沈念sama閱讀 33,756評(píng)論 4 324
  • 正文 年R本政府宣布简珠,位于F島的核電站,受9級(jí)特大地震影響虹钮,放射性物質(zhì)發(fā)生泄漏聋庵。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,324評(píng)論 3 307
  • 文/蒙蒙 一芙粱、第九天 我趴在偏房一處隱蔽的房頂上張望祭玉。 院中可真熱鬧,春花似錦春畔、人聲如沸脱货。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 30,315評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)蹭劈。三九已至,卻和暖如春线召,著一層夾襖步出監(jiān)牢的瞬間铺韧,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 31,539評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工缓淹, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留哈打,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,578評(píng)論 2 355
  • 正文 我出身青樓讯壶,卻偏偏與公主長(zhǎng)得像料仗,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子伏蚊,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,877評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容