---
# System prepended metadata

title: GraphQL 前端實作
tags: [GraphQL]

---

# GraphQL 前端實作

###### tags: `GraphQL`

## GraphiQL
![](https://i.imgur.com/xbzoK7N.jpg)

:arrow_up: **GraphiQL** 的介面 

<br >

![](https://i.imgur.com/9bnwsKG.jpg)

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

<br >

***

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

<br >

![](https://i.imgur.com/HyaPwPd.jpg)

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

<br >


![](https://i.imgur.com/zpg6QGL.jpg)

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

<br >


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


