GraphCMSでカスタムMutationAPIを試してみた

2022.05.31

こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。

GraphCMSはGraphQLクエリを使用できるヘッドレスCMSになります。

GraphCMS内でmutation

今回は、GraphCMSでmutationを使用してみました。GraphQLでは、mutationによって、データの作成や更新・削除などの処理を行います。

Model、Schemaの作成

GraphCMSにログインし、新しくプロジェクトを作成します。

左サイドバーから「Scheme」を選択し、「SampleModel」という名前でモデルを作成します。

スキーマを作成します。

今回は「Single line text」と「Multi line text」を選択し、それぞれ「title」と「description」を指定します。

mutationの定義

左サイドバーの「API playground」から、クエリを実行します。

モデルを作成すると、カスタムGraphQLMutationも追加されます。今回は一部のmutationを定義し、実行してみます。

Create

mutationを定義

実行結果

コンテンツを確認

データが作成されています。

update

mutationを定義

実行結果

コンテンツを確認

delete

mutationを定義

実行結果

コンテンツを確認

Next.js内でmutation

Next.jsのプロジェクトからも、簡単にmutationを使用してみます。

Permissionの変更

GraphCMSの左サイドバーから「Settings」内の「Public Content API」に移動します。「+Create Permission」から、権限を以下のように変更します。

「Settings」内の「Environments」に移動し、APIをコピーしておきます。

Next.jsプロジェクトを作成

yarn create next-app --ts

.env.localファイルを作成し、環境変数を指定します。

.env.local

NEXT_PUBLIC_GRAPHCMS_API="コピーしたAPI"

libs/apollo-clients.tsを作成し、以下を記述します。

apolo-client.ts

import { ApolloClient, InMemoryCache } from "@apollo/client";

export const client = new ApolloClient({
  uri: process.env.NEXT_PUBLIC_GRAPHCMS_API,
  cache: new InMemoryCache(),
});

_app.tsxに移動し、ComponentをApollo-providerでラッピングします。

_app.tsx

import { AppProps } from "next/app";
import Head from "next/head";
import { ApolloProvider } from "@apollo/client";
import { client } from "../libs/apollo-client";

export default function App(props: AppProps) {
  const { Component, pageProps } = props;

  return (
    <>
      <Head>
        <title>Page title</title>
      </Head>
      <ApolloProvider client={client}>
        <Component {...pageProps} />
      </ApolloProvider>
    </>
  );
}

index.tsxを以下のように変更します。useMutation()を使用して実行します。

index.tsx

import Head from "next/head";
import styles from "../styles/Home.module.css";
import { gql, useMutation } from "@apollo/client";
import { useState, ComponentProps } from "react";

type Data = {
  id: string;
  title: string;
  description: string;
};

const CREATE_DATA = gql`
  mutation MyMutation($title: String!, $description: String) {
    createSampleModel(data: { title: $title, description: $description }) {
      id
      title
      description
      createdAt
    }
  }
`;

const Home = () => {
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");

  const [addData] = useMutation<Data>(CREATE_DATA);

  const handleSubmit: ComponentProps<"form">["onSubmit"] = () => {
    addData({ variables: { title: title, description: description } });
  };

  const onChangeTitle: ComponentProps<"input">["onChange"] = (e) => {
    setTitle(e.target.value);
  };

  const onChangeDescription: ComponentProps<"textarea">["onChange"] = (e) => {
    setDescription(e.target.value);
  };

  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="title"
          className={styles.input}
          onChange={onChangeTitle}
        />
        <textarea
          placeholder="description"
          rows={4}
          className={styles.textarea}
          onChange={onChangeDescription}
        />
        <button className={styles.button}>Create Data</button>
      </form>
    </div>
  );
};

export default Home;

Home.module.cssにスタイルを追加します。

Home.module.css

.input {
  display: block;
  padding: 4px;
  margin: 8px 0;
}

.textarea {
  display: block;
  padding: 4px;
  margin: 8px 0;
}

データを追加してみます。

yarn dev

GraphCMSに戻り、コンテンツを確認します。

データが追加されているのが確認できます。GraphCMSでは、作成データはデフォルトで「DRAFT」となり、非公開になるようです。

まとめ

簡単にですが、GraphCMSでmutationを使用してみました。GraphCMSの「API playground」は、補完も便利で使いやすいので、GraphQLのquery、mutationを試す際には是非使ってみてください。

ではまた。