iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 7
0

介紹
ApolloDataClient 在 React 部分提供了 React Native and Expo 可以直接用的功能,對於各種的 React Router 也友善支持,SSR部分也很容易設定,除了 HOC 用 Recompose 在組合ApolloData更有彈性 , Next.js 已經是 React 主流SSR框架之一,ApolloData 也為 Next.js 使用者提供一個使用範例,可以更容易使用

官方範例
https://github.com/zeit/next.js/tree/master/examples/with-apollo

開始使用 React ApolloClient,至於ApolloClient 設定方法可以參考 前篇 https://ithelp.ithome.com.tw/articles/10191332
這裡的差異性主要是 React 需要使用 ApolloProvider 包在TopLevel 並且給他client設定檔,
以下是 React 基本設定


import { ApolloProvider } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';

const client = new ApolloClient({
  link: new HttpLink(),
  cache: new InMemoryCache()
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <MyAppComponent />
  </ApolloProvider>,
  document.getElementById('root')
)

使用 React 發出一個 Request ,Client 的語法都是使用 gql Es6 template literals寫作方式,ApolloData 2.0 使用 import gql from 'graphql-tag' , gql 的方式來寫作 Json payload (1.X的引用gql套件不一樣這邊要注意),另外這個元件必須有被 Wrap ApolloProvider,發出request 方法只需要使用 graphql Hoc 把 gql 與元件綁定,這樣就可以做 Request 發 Query 到設定檔指定的目錄的位置


import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';

const MY_QUERY = gql`query { todos { text } }`;

const MyComponentWithData = graphql(MY_QUERY)(props => <div>...</div>);

總結

ApolloData 提供了 React graphql HOC綁定 gql 語法 再把結果當作 Props 傳遞到元件之中
,前端工作只要寫好 Json payload 直接透過 graphql(語法)(元件) 綁好 一切就搞定了,上面案例如果Query有打資料回來就可以在元件中的 props.data 找到 server 回傳資料


上一篇
ApolloData Client 基本設定
下一篇
ApolloData & ApolloClient 設定檔介紹
系列文
GraphQL + ApolloData 入門30

尚未有邦友留言

立即登入留言