graphQL 요약

2023-05-19

graphQL Client Library

graphQL 의 장점은 서버에서 원하는 데이터의 필드만 가져오지만, 추가적인 작업이 필요하다고 합니다.

그러한 한계를 극복하기 위해 나온것이 graphQL Client Library 이며,

그중 대표적인것이 Apollo GraphQL 입니다.

리덕스를 대체할수 있다고 합니다.

설치

apollo client를 사용하기 위한 것 들의 패키징

npm install apollo-boost

react view layer 에서 사용할 수 있는 hooks 를 제공

npm install @apollo/react-hooks graphql

graphql 구문을 해석

npm install graphql

instance 생성

import ApolloClient from 'apollo-boost';

const client = new ApolloClient({
  uri: 'https://48p1r2roz4.sse.codesandbox.io',
});

js 에서 데이터 요청

client
  .query({
    query: gql`
      {
        rates(currency: "USD") {
          currency
        }
      }
    `
  })
  .then(result => console.log(result));

react 에서 데이터 요청

import React from 'react'
import ApolloClient, { gql } from 'apollo-boost';
import { ApolloProvider } from '@apollo/react-hooks';

const client = new ApolloClient({
  uri: 'https://48p1r2roz4.sse.codesandbox.io',
});

const App = () => (
  <ApolloProvider client={client}>
    <div>
      <h2>My first Apollo app </h2>
    </div>
  </ApolloProvider>
);

https://medium.com/humanscape-tech/apollo-graphql-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-1eab47c7b1d7

위 링크 참조 중…

results matching ""

    No results matching ""

    99 other / uml

    04 react / JSX