# GraphQL 前端實作

###### tags: `GraphQL`

## GraphiQL

:arrow_up: **GraphiQL** 的介面

<br >


:arrow_up: **GraphiQL** 運作原理

<br >

***

## Apollo
> ### 串接 React 與 GraphQL （扮演 GraphQL client 的角色）
> 幫忙我們 create query, 並且將 query 與 component 串接在一起

<br >


:arrow_up: 用 **Apollo** 作為 middleware 來做 React 與 GraphQL 之間串接

<br >


:arrow_up: **Apollo** 可以讓 component 分別去拿取 Back-End 的 data

<br >

### React with Apollo 實作範例
<img src="https://i.imgur.com/LFrw8Ta.jpg" width="500px">
![]()