Apollo ready to get data

라이브러리 설치

npx install --save apollo-boost
react-apollo
graphql-tag
graphql

react apollo 구조 정리

 

react 환경에서 apollo 를 사용해서 graphQL data 를 가져오려면 먼저 apollo client 에서 서버와 연결하고 

 

apollo privider 로 사용할 react 의 최상단 component 를 감싸준다.

 

data 의 스키마에서 필요한 부분을 따로 정의하고 가져올 수 있는 양식을 만든다.
(ex. 스키마에 id,nickname,password,email 등 많은 정보가 있어도 직접 정의해서 

id , nickname 등 필요한 정보만 가져와서 overfetching 을 방지할 수 있다.)

 

react 에서 필요한 부분에서 <Query query = { 정의한 양식 명 }> 내용 </Query> 로 불러와서 사용할 수 있다.

* 내용부분에서 data 에 상태에 따라 ( loading 일 때 , 도착했을 때 , error 일 때) 맞는 component 를 불러올 수 있다.

 

위 내용에 따라 크게 4개의 구조로 나누어진다.

 

---

1. render 될 page 코드

 

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


class 컴포넌트명 extends Component {
  render(){
	return (
		<div>
			<Query query={ 정한 gql 명 }>
              { 
			    ({ loadimg , data , error }) => {
					if(loading) something
					if(error)   something
                    if(data) // else
					
                    	return data.query내부명칭.map() // or 다른 방식
				  }
                })
              }
            </Query>
        </div>
    )
  }
}

 

2. apollo client = graphQL 서버와 연결하는 부분.

 

import ApolloClient from 'apollo-boost'

const client = new ApolloClient({
	uri : '서버 주소'
})

export default client;

 

3. query 를 정의하는 코드

 

import gql from 'graphql-tag'

const 쿼리문 이름 = gql`
	query {
    	테이블 이름 {
		  필요한 정보 1
          필요한 정보 2
          필요한 정보 3
        }
    }
`

 

4. 최상단 부분

 

import React, { Component } from 'react';
import { ApolloProvider } from 'react-apollo'
import client from 'apolloclient 가 있는 파일'
import 컴포넌트 명 from '컴포넌트가 있는 파일'

class 최상단 컴포넌트 extends Component {
	render() {
		return (
			<ApolloProvider client={client}>
				<컴포넌트 명 />
			</ApolloProvider>
        )
    }
}

export default 최상단 컴포넌트