GraphQL APIから取得するクエリ文字列を提供

Question

GraphQLエンドポイントから一部のデータを取得しようとしていますが、「クエリ文字列を指定する必要があります」というエラーが表示され続けます。私はクエリ文字列を提供していると確信していますが、このエラーはどこから来たのですか？

エンドポイントは次のとおりです。この場合、https://antserver-blocjgjbpw.now.sh/graphql

const query = `{ 
 
    ants { 
 
    name 
 
    color 
 
    length 
 
    weight 
 
    } 
 
}` 
 

 
document.getElementById("basicFetchButton").addEventListener("click",() => { 
 
\t fetch("https://antserver-blocjgjbpw.now.sh/graphql", { 
 
    \t method: 'POST', 
 
\t \t 'Content-Type': 'application/graphql', 
 
    body: JSON.stringify({query}) 
 
    }) 
 
    .then(res => res.json()) 
 
    .then(data => console.log(data)) 
 
})

Answer 1

は、あなたがContent-Type: 'application/json'を使用したいです。 application/graphqlでは、リクエストの本文全体がクエリである必要がありますが、クエリ変数を送信することは不可能なので、この方法はお勧めしません。ここで

は、完全なコードサンプルです：私の記事をチェックアウトし、より多くの例については

fetch('https://antserver-blocjgjbpw.now.sh/graphql', { 
    method: 'POST', 
    headers: { 'Content-Type': 'application/json' }, 
    body: JSON.stringify({ query }), 
}) 
    .then(res => res.json()) 
    .then(res => console.log(res.data)); 

4 simple ways to call a GraphQL API