ApolloからHasuraへのmutationでname型にハマった

はじめに

この記事はapolloクライアントからhasuraサーバーにmutationのリクエストを送る際にハマったことを雑に共有する記事です。

エラー

VueでApolloクライエントからhasuraサーバーに新規レコードを作成する下記のようなmutationのコードを実行しました。

import Vue from "vue";
import gql from "graphql-tag";

const ADD_PROJECTS = gql`
  mutation insert_projects( $name: String) {
    insert_projects(objects: { name: $name }) {
      returning {
        name
        id
      }
    }
  }
`;

export default Vue.extend({
  data() {
    return {
      formProjectName: "",
    };
  },
  methods: {
    submit() {
      const projectName = this.formProjectName;
      this.formProjectName = "";
      this.$apollo.mutate({
        mutation: ADD_PROJECTS,
        // 変数を定義する
        variables: {
          name: projectName,
        },
      });
    },
  },
});

すると、下記のようなエラーがでました。

Error: GraphQL error: variable name of type String is used in position expecting name

解決

これはhasuraがnameという名前のカラムに対してnameという型を与えていることに起因します。

このname型はどうやらhasuraが便利のため内部的に作ってあるStringのエイリアスのようです。（よくわかりませんでした）

nameというカラムはnameという型を与えられていることに注意。

ですので、mutationに引数として与える型はString!やStringではなく、nameとなります。

カラム名にも型名にもnameを使っていたため、エラー文の意味をよくつかめなかった、ということですね。

最終的に動いたコードは下記のようなものです。

//わかりやすいように、変数名の$nameを$uhouhoにかえてあります。

const ADD_PROJECTS = gql`
  mutation insert_projects( $uhouho: name) { # このnameは型名
    insert_projects(objects: { name: $uhouho }) { # このnameはカラム名
      returning {
        name
        id
      }
    }
  }
`;

//中略
      this.$apollo.mutate({
        // Query
        mutation: ADD_PROJECTS,
        // Parameters
        variables: {
          uhouho: projectName, //変数名はuhouho
        },
      })

//後略

おわりに

間違えていたら教えてください。