React Grapqhl 아폴로를 이용한 클라이언트 환경 만들기.

React Grapqhl 아폴로를 이용한 클라이언트 환경 만들기.

 

1. 환경설치

yarn add react-router-dom graphql graphql-tag react-apollo@2.5 apollo-boost

 

2. 아폴로 클라이언트 프로바이더 만들기

------------------------------------------------------------ 아폴로 클라이언트 설정 : 어디서 데이터를 얻어올건가

import ApolloClient from "apollo-boost";

const client = new ApolloClient({
  uri: "http://localhost:4000/"
});

export default client;

------------------------------------------------------------ 아폴로 프로바이더 컴포넌트로 - Query컴포넌트를 사용할수 있겠끔 기능 녹이기
import { ApolloProvider } from "react-apollo";
import client from "../apolloClient";

    <ApolloProvider client={client}>
      <Router />
      <GlobalStyles />
    </ApolloProvider>

 

3. 쿼리 사용하기

------------------------------------------------------------ 쿼리문 작성
import gql from "graphql-tag";

export const HOME_PAGE = gql`
  {
    Users {
      id
      name
      password
      picture
    }
  }
`;
------------------------------------------------------------ Query컴포넌트 + 쿼리문

import { Query } from "react-apollo";
import { HOME_PAGE } from "../../quries";

export default class HomeContainer extends React.Component {
  render() {
    return (
      <Query query={HOME_PAGE}>
        {({ loading, data, error }) => {
          if (loading) return "loading..";
          if (error) return "something happened";
          return <HomePresenter Users={data.Users} />;
        }}
      </Query>
    );
  }
}

 

 

 

DOS IMPACT - WEB Developer

KIM DO YOUNG

WEB : REACT JS | REACT NATIVE | GraphQL PRISMA