GraphQLの引数を変数で設定する方法のメモ

はじめに

GraphQLのリクエストに引数を入れる際、引数を固定値ではなく変数で設定するやり方をメモ。

GraphQLとは／基本的なリクエストの書き方

以下の記事を参照。 tomiko0404.hatenablog.com

引数なしのリクエスト

リクエスト（すべてのMDXノードのslug（ファイル名）フィールドとidフィールドを取得）

query {
  allMdx {
    nodes {
      slug
      id
    }
  }
}

取得できる値

"data": {
 "allMdx": {
   "nodes": [
     {
       "slug": "mdx-content",
       "id": "c31f21f8-8731-5bc1-b8fa-906aabd57930"
     },
     {
       "slug": "mdx-content2",
       "id": "9ce566d8-ae20-5b54-9d23-424487f61361"
     }
   ]
 }

引数が固定値のリクエスト

リクエスト（MDXノードのうちidが"9ce566d8-ae20-5b54-9d23-424487f61361"と等しいノードのslug（ファイル名）フィールドとidフィールドを取得）

query {
  allMdx(filter: {id: {eq: "9ce566d8-ae20-5b54-9d23-424487f61361"}}) {
    nodes {
      slug
      id
    }
  }
}

取得できる値

"data": {
  "allMdx": {
    "nodes": [
      {
        "slug": "mdx-content2",
        "id": "9ce566d8-ae20-5b54-9d23-424487f61361"
      }
    ]
  }
}

引数に変数を設定する場合のリクエスト

この方法はページクエリでしか利用できない。

useStaticQueryでは利用できないので注意する。

リクエスト（MDXノードのうちidフィールドが変数idと等しいノードのslug（ファイル名）フィールドとidフィールドを取得）

query ($id: String) {
    allMdx(filter: {id: {eq: $id}}) {
      nodes {
        slug
        id
      }
    }
  }

GraphiQL

GraphiQLを使ってリクエストを作成する際は、変数に入る値を仮設定することができる。左下のQUERY VARIABLESにJSON形式で設定する。

GraphiQLでの変数仮設定

Gatsby.jsでの利用

MDX（マークダウン）ファイルの情報が入っているMDXノードの情報を取得するために、テンプレートとなるコンポーネント上でidを指定するクエリが必要である。

Gatsbyでは、ページテンプレートコンポーネントを使って作られたページにおいて、props.pageContextの中に、MDXノードを一意に特定するidの値が初めから入っている。

idを変数として引数に入れておくことで、props.pageContext.idの値をフィルタ条件として利用できる。

{mdx.slug}.js

import { graphql } from 'gatsby';
import { MDXRenderer } from 'gatsby-plugin-mdx';
import * as React from 'react';
import MyLayout from '../../components/myLayout';

const BlogPost = (props) => {
    console.log(props.pageContext.id);
    const { data } = props;
    return (
        <MyLayout pageTitle="Super Cool Blog Posts">
            <MDXRenderer>
                {data.allMdx.nodes[0].body}
            </MDXRenderer>
        </MyLayout>
    )
}

export const query = graphql`
query ($id: String) {
    allMdx(filter: {id: {eq: $id}}) {
      nodes {
        body
        slug
        frontmatter {
          date(formatString: "MMMM D, YYYY")
          title
        }
      }
    }
  }
`

export default BlogPost

※pageContextについては勉強不足のため割愛する。

おわりに

GraphQLで引数を利用し、props等から取得した変数を設定する方法をメモした。