React + Apollo Tutorial (3) - Mutations: Creating Links

이 글은 다음 페이지를 번역한 글입니다.

https://www.howtographql.com/react-apollo/3-mutations-creating-links/

GraphQL Mutations with React and Apollo Tutorial

---

Mutations: Creating Links

GraphQL에는 쿼리와 뮤테이션라는 두 가지 최상위 작업 유형이 있습니다.

쿼리는 데이터를 읽고 싶을 때 사용합니다.

뮤테이션은 데이터를 변경하고자 할 때 사용합니다. 레코드를 생성, 업데이트 또는 삭제할 때 뮤테이션을 사용합니다.

이 섹션에서는 Apollo로 뮤테이션을 보내는 방법을 배웁니다. 뮤테이션을 보내는 것은 쿼리를 보내는 것과 비슷하고, 비슷한 순서로 진행됩니다.

1. gql 파서 함수를 사용하여 JavaScript 상수로 뮤테이션 작성
2. Apollo Client에서 제공하는 useMutation 훅을 사용하여 GraphQL 서버에 뮤테이션을 보냅니다.
3. 뮤테이션의 결과를 읽습니다.

---

Preparing the React components

전 챕터와 비슷한 순서대로, 뮤테이션을 사용하지 않고 사용자가 새 링크를 추가할 수 있는 React 컴포넌트를 만드는 것으로 시작하겠습니다.

src/components 디렉토리에 CreateLink.tsx 파일을 만들고 다음과 같이 코드를 작성합니다.

import React, { useState } from "react";

const CreateLink = () => {
  const [formState, setFormState] = useState({
    description: "",
    url: "",
  });

  return (
    <div>
      <form
        onSubmit={(e) => {
          e.preventDefault();
        }}
      >
        <div className="flex flex-column mt3">
          <input
            className="mb2"
            value={formState.description}
            onChange={(e) =>
              setFormState({
                ...formState,
                description: e.target.value,
              })
            }
            type="text"
            placeholder="A description for the link"
          />
          <input
            className="mb2"
            value={formState.url}
            onChange={(e) =>
              setFormState({
                ...formState,
                url: e.target.value,
              })
            }
            type="text"
            placeholder="The URL for the link"
          />
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default CreateLink;​

 

이것은 사용자가 생성하려는 Link의 url과 description을 제공할 수 있는 두 개의 입력 필드가 있는 React 컴포넌트의 기본적인 설정입니다. 이 필드에 입력된 데이터는 useState 훅을 통해 컴포넌트의 로컬 상태(state)에 보관됩니다.

---

Writing the mutation

이제 우리가 할 일은, 사용자의 입력을 받아서 GraphQL 뮤테이션의 인자로 보내는 것입니다.

 

먼저 JavaScript 코드에서 뮤테이션을 정의하고 useMutation 훅을 사용하여 뮤테이션을 보내야 합니다.

 

CreateLink.tsx의 파일 상단에 다음 코드를 추가합니다:

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

const CREATE_LINK_MUTATION = gql`
  mutation PostMutation(
    $description: String!
    $url: String!
  ) {
    post(description: $description, url: $url) {
      id
      createdAt
      url
      description
    }
  }
`;​

그런 다음 CREATE_LINK_MUTATION을 useMutation 훅에 전달하고, input 필드를 통해 제공받은 데이터를 variables로 전달합니다.

const CreateLink = () => {
  // ...
  const [createLink] = useMutation(CREATE_LINK_MUTATION, {
    variables: {
      description: formState.description,
      url: formState.url
    }
  });
  // ...
};​

useMutation 훅을 사용할 때, 뮤테이션을 보내는 함수는 구조 분해 할당을 통해 할당해야 합니다. 이것이 바로 위의 코드 블록에 있는 createLink입니다. 이제 컴포넌트가 렌더링될 때 필요할 때마다 함수를 자유롭게 호출할 수 있습니다.

 

form 태그의 onSubmit 이벤트에서 createLink를 호출합니다.

return (
  <div>
    <form
      onSubmit={(e) => {
        e.preventDefault();
        createLink();
      }}
    >
      ...
    </form>
  </div>
);

 

PostMutation에는 토큰이 필요하므로 임시로 토큰을 추가하겠습니다. 이전 수업에서 배운 대로 만들고 index.tsx에 삽입하세요.

// ...
import { setContext } from '@apollo/client/link/context';

const httpLink = createHttpLink({
  uri: 'http://localhost:4000'
});

const authLink = setContext((_, { headers }) => {
  const token = '<your token>'; // 여기에 토큰 삽입
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : ''
    }
  }
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache()
});
// ...

 

이제 뮤테이션이 작동하는지 확인할 준비가 되었습니다. App.tsx를 열고 다음과 같이 변경합니다.

import React from 'react';
import CreateLink from './CreateLink';
import LinkList from './LinkList';

const App = () => {
  return <CreateLink />;
};

export default App;

 

이제 npm start를 실행하면, 다음이 표시되어야 합니다.

두 개의 input 필드와 Submit 버튼 - 그다지 예쁘지는 않지만 동작은 합니다.

 

필드에 데이터를 입력해보세요. 예를 들면:

• Description: The best learning resource for GraphQL
• URL: howtographql.com

그런 다음 Submit 버튼을 클릭합니다. UI에서 시각적인 피드백을 받지는 못하지만 Playground의 현재 links 목록을 확인하여 쿼리가 실제로 작동했는지 봅시다.

 

브라우저에서 http://localhost:4000으로 이동하여 플레이그라운드를 다시 열 수 있습니다. 그런 다음 아래의 쿼리를 보냅니다:

# Try to write the query here
{
  feed {
    links {
      description
      url
    }
  }
}

 

아마 다음과 같은 응답을 보게 될 것입니다:

{
  "data": {
    "feed": {
      "links": [
        // ...
        {
          "description": "The best learning resource for GraphQL",
          "url": "howtographql.com"
        }
      ]
    }
  }
}

 

우왕! 뮤테이션이 작동합니다. 잘했습니다! 💪