Google Apps ScriptでAniList GraphQL APIv2を叩くと、’No query or mutation provided…’のエラー400が返ってくる

はじまり

まず、何が起きてるんだ

今回は、AniList GraphQL APIv2を、Google Apps ScriptのUrlFetchApp.fetch()メソッドでリクエストします。

AniList APIv2 Docs

anilist.gitbook.io

まあ、このGeting Startedと同じ感じで、クエリとスクリプトをこんな風に叩いてみるのですが・・・

// Here we define our query as a multi-line string
// Storing it in a separate .graphql/.gql file is also possible
var query = `
query ($id: Int) { # Define which variables will be used in the query (id)
  Media (id: $id, type: ANIME) { # Insert our variables into the query arguments (id) (type: ANIME is hard-coded in the query)
    id
    title {
      romaji
      english
      native
    }
  }
}
`;

// Define our query variables and values that will be used in the query request
var variables = {
    id: 15125
};

// Define the config we'll need for our Api request
var url = 'https://graphql.anilist.co',
    options = {
        method: 'post',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
        },
        body: JSON.stringify({
            'query': query,
            'variables': variables
        }),
        muteHttpExceptions: true
    };

// Make the HTTP Api request
console.log(options)

let response = UrlFetchApp.fetch(url, options);
console.log(JSON.parse(response));

エラーコード400で、うまく動きません。

'No query or mutation provided. Please view https://anilist.co/graphiql to see available queries and mutations.'とか書いてあったので、指示されたサイトでクエリを打ったのですが、そのクエリは上手くいきました。

13:25:45	情報	{ errors: 
   [ { message: 'No query or mutation provided. Please view https://anilist.co/graphiql to see available queries and mutations.',
       status: 400,
       locations: [Object] } ],
  data: null }

一体、何が悪かったのか

「クエリが無い」というエラーになった原因は、payloadではなく、bodyにしていたことです。

// Here we define our query as a multi-line string
// Storing it in a separate .graphql/.gql file is also possible
var query = `
query ($id: Int) { # Define which variables will be used in the query (id)
  Media (id: $id, type: ANIME) { # Insert our variables into the query arguments (id) (type: ANIME is hard-coded in the query)
    id
    title {
      romaji
      english
      native
    }
  }
}
`;

// Define our query variables and values that will be used in the query request
var variables = {
    id: 15125
};

// Define the config we'll need for our Api request
var url = 'https://graphql.anilist.co',
    options = {
        method: 'post',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
        },
        // body: JSON.stringify({
        payload: JSON.stringify({ // ここ！
            'query': query,
            'variables': variables
        }),
        muteHttpExceptions: true
    };

// Make the HTTP Api request
console.log(options)

let response = UrlFetchApp.fetch(url, options);
console.log(JSON.parse(response.getContentText()));
console.log(JSON.parse(response.getContentText())["data"]["Media"]["title"]);

これで叩くと、ちゃんとデータが取得されて帰ってきます。ころしあえ～！

13:27:51	情報	{ method: 'post',
  headers: 
   { 'Content-Type': 'application/json',
     Accept: 'application/json' },
  payload: '{"query":"\\n  query ($id: Int) { # Define which variables will be used in the query (id)\\n    Media (id: $id, type: ANIME) { # Insert our variables into the query arguments (id) (type: ANIME is hard-coded in the query)\\n      id\\n      title {\\n        romaji\\n        english\\n        native\\n      }\\n    }\\n  }\\n  ","variables":{"id":15125}}',
  muteHttpExceptions: true }
13:27:51	情報	{ data: { Media: { id: 15125, title: [Object] } } }
13:27:51	情報	{ romaji: 'Teekyuu', english: 'Teekyuu', native: 'てーきゅう' }

GASのUrlFetchApp.fetch()メソッドでリクエストするときは、bodyじゃなくてpayloadでなくてはならないんですね。

今まであんまり気にしてなかったから盲点だった・・・

意外と検索しても出てこないのが沼ポイントでした。

おしまい

以上になります！