GraphQL + React 시작하기(Apollo)

GraphQl 을 리액트에서 사용하기 위해 아폴로 클라이언트를 사용한다

import ApolloCilent from 'apollo-client';
import {ApolloProvider} from 'react-apollo';

import SongList from './components/SongList';


const client = new ApolloCilent({})

const Root = () => {
  return (
    <ApolloProvider client = {client}>
        <SongList/>
      </ApolloProvider>
    );
};

ㅇ 

 

아폴로 프로바이더 를 최상단 레이어에 깔아 모든 컴포넌트에서 graphql에 접근 할수있게한다.

 

다음은 쿼리를 작성해보자 쿼리를 위해서는 grapqhql-tag 라이브러리 가 필요하다

import gql from 'graphql-tag';
const query = gql`
    {
        songs{
            title
        }
    }
`;

 이렇게 gql 를 사용해 쿼리를 작성한다

쿼리를 사용해 데이터를 fetch하려면 react-apollo로 쉽게할수있다.

import {graphql} from 'react-apollo';
export default graphql(query)(SongList); //SongList 는 컴포넌트 이름

 

export 부분에 graphql(query) 를 넣었다.

graphql 함수는 함수를 리턴하고 그함수에 해당 컴포넌트를 매개변수로 넣어줌으로써

해당 컴포넌트에 fetch 한 데이터가 props 로 들어간다.

즉 SongList 의 props 에서 데이터를 확인 할수있다.

class SongList extends Component{
    render(){
        console.log(this.props);
        return (
            <div>
                SongList
            </div>
        )
    }
}

데이터