GraphCMS로 ApolloClient3.0에 입문해 보았다

아티팩트

정말 그냥 포트폴리오 (카메라적인 의미로)
htps : // c ran ky-su r ぇ s- 2bc61. 네 tぃfy. 아 p/
htps : // 기주 b. 이 m / t 멋진 21 / 어 ch ぃ

TL;DR

프런트 엔드 엔지니어가 ApolloClient에 입문하더라도,
graphCMS는 의외로 꽤 좋을지도 모른다는 이야기.

GraphCMS란?

Contentful 같은 사람입니다.
HeadlessContentsManagementSystem이라고 해서 VIEW가 없는 WordPress적인 것이라고 상상해 주시면 좋을까. 블로그 게시물 기능적인 것입니다.
그리고, 이 GraphCMS입니다만, 이름으로부터도 아시다시피 graphQL에 특화한 CMS로 해, graphQL라든지 Apollo 조금 만져 보고 싶어요! 라는 분에게 딱 맞지 않을까 생각하고, 이번 소개합니다.

GraphCMS는 무엇이 맛있는가?

GraphQL을 사용하여 뭔가 서비스를 만들어 보자! 라고 생각했을 때,
프런트 엔드 엔지니어에게 갑자기 ApolloServer 또는 Hasura는 조금 어렵습니다.
망설임 난 좌절.
그렇다면 일단 GraphCMS로 흔들어 보려고 사용해 보니 꽤 좋았습니다.
GUI만으로 백엔드의 측이 완료되어 버리는 느낌이었습니다.

또, GraphQL나 Apollo 자체의 이점에 대해서는 이하가 굉장히 좋은 기사이므로 꼭.
세상의 프런트 엔드 엔지니어에게 Apollo Client를 포교하고 싶습니다.

GraphCMS 시작하기

로그인하고 빠른 시작합니다.
BlogStarter 등 처음부터 들어있는 템플릿을 사용하면 원활합니다.

↓이런 느낌입니다.

1. Schema라고 하는 graphQL에 있어서의 형태 같은 것을 정의한다


2. 투고 해 본다


3. APIPlayGround에서 Query를 작성하고 던져보십시오.
왼쪽에 쓰기 ▶로 오른쪽에 응답이 표시됩니다.

React에 연결

이번에는 β판의 3.0을 사용해 보겠습니다.

import React from 'react';
import ReactDOM from 'react-dom';
import {
  ApolloProvider,
  ApolloClient,
  HttpLink,
  InMemoryCache,
} from '@apollo/client';
import App from './App';

const GRAPHCMS_API =
  'https://api-ap-northeast-1.graphcms.com/v2/YOUR_API_KEY/master';

const client = new ApolloClient({
  link: new HttpLink({ uri: GRAPHCMS_API }),
  cache: new InMemoryCache(),
});

ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);

라는 느낌입니다.
ApolloDevTools 에서 ↓과 같이 오른쪽에 뭔가 Query가 표시되어 있으면 React에의 연결은 성공입니다.

쿼리 작성

여기까지 가면, 방금전의 APIplayground로 응답이 통과한 코드를 복사해,
gql 태그를 사용해주세요. ↓이런 느낌입니다.

import { gql } from '@apollo/client';

export const GET_PHOTOS = gql`
  query GetPhotos {
    photos {
      id
      image {
        id
        url
      }
      caption
      updatedAt
    }
  }
`;

Apollo의 Hooks 사용

그리고는 API를 두드리는 것뿐입니다.
Apollo 공식 문서 를 참고했습니다.
HOC에서도 좋지만 ↓ 같은 Hooks가 더 간결 해지기 때문에 추천합니다.

import React, { FC } from 'react';
import { GET_PHOTOS } from './graphql/queries'
import { Loader } from '../atoms'

const Photos: FC = () => {
  const { loading, error, data } = useQuery(GET_PHOTOS);

  if (loading) return <Loader />;
  if (error) return <p>err</p>;

  return (
    ...省略...
  );
};

export default Photos;

네, 쉬울거야!

덤

GraphQL의 Schema로부터 TypeScript의 형태를 자동 생성해 준다,
graph-codegen이라는 초절 훌륭한 라이브러리가 있습니다.
사용법은 아래 나카니시 씨의 동영상을 참조하십시오.

Apollo × TypeScript로 유형 안전한 프런트 엔드 개발

ApolloClient3.0의 경우 codegen.yml은 ↓처럼 될 것이라고 생각합니다.
(여기는 원숭이이므로 다르면 죄송합니다)

overwrite: true
schema: 'https://api-ap-northeast-1.graphcms.com/v2/YOUR_API/master'
documents: 'src/gql/**.ts'
generates:
  src/generated/graphql.tsx:
    plugins:
      - 'typescript'
      - 'typescript-operations'
      - 'typescript-react-apollo'
    config:
      reactApolloVersion: 3
      withHooks: true
      withHOC: false
      withComponent: false
      gqlImport: '@apollo/client#gql'
      apolloReactCommonImportFrom: '@apollo/client'
      apolloReactComponentsImportFrom: '@apollo/client'
      apolloReactHocImportFrom: '@apollo/client'
      apolloReactHooksImportFrom: '@apollo/client'
  ./graphql.schema.json:
    plugins:
      - 'introspection'

덧붙여서 이것을 사용하면 방금 전의 코드는 ↓와 같습니다.

import React, { FC } from 'react';
import { useGetPhotosQuery } from '../../generated/graphql';

const Photos: FC = () => {
   const { loading, error, data } = useGetPhotosQuery();

  if (loading) return <Loader />;
  if (error) return <p>err</p>;

  return (
    ...省略...
  );
};

export default Photos;

우효, 정말 간단!
이것으로 형이 붙어 있으므로 보완이 효과가 있고,
이상한 코드를 쓰면 그때마다 꾸짖어 주므로, 너무 지나치게 대머리하는 레벨입니다.

요약

이상, graphCMS의 소개와 Apollo의 입문이었습니다.
graphql-codegen도 함께 사용하면 최고의 DX를 얻을 수 있으므로, 꼭 시험해 주세요.

끝까지 읽어 주셔서 감사합니다!