web-dev-qa-db-ja.com

Node Graphqlクエリを使用してPOSTリクエストを取得する

GraphQLクエリを使用してPOSTリクエストを作成しようとしていますが、リクエストがPostManで機能していても、エラーMust provide query stringが返されます。

PostManで実行する方法は次のとおりです。

enter image description here

enter image description here

そして、これが私のアプリケーションで実行しているコードです:

const url = `http://localhost:3000/graphql`;    
return fetch(url, { 
  method: 'POST',
  Accept: 'api_version=2',
  'Content-Type': 'application/graphql',
  body: `
    {
      users(name: "Thomas") { 
        firstName
        lastName 
      } 
    }
  `
})
.then(response => response.json())
.then(data => {
  console.log('Here is the data: ', data);
  ...
});

私が間違っていることについて何か考えはありますか? fetchリクエストで渡すbody属性がPostManリクエストのbodyで指定したようにTextとしてフォーマットされるようにすることは可能ですか?

6
Thomas

本文には、クエリ文字列を含むqueryプロパティが必要です。別のvariableプロパティを渡して、クエリのGraphQL変数を送信することもできます。

これはあなたの場合にうまくいくはずです:

const url = `http://localhost:3000/graphql`;
const query = `
  {
    users(name: "Thomas") { 
      firstName
      lastName 
    } 
  }
 `

return fetch(url, { 
  method: 'POST',
  Accept: 'api_version=2',
  'Content-Type': 'application/graphql',
  body: JSON.stringify({ query })
})
.then(response => response.json())
.then(data => {
  console.log('Here is the data: ', data);
  ...
});

GraphQL変数を送信する方法は次のとおりです。

const query = `
  query movies($first: Int!) {
    allMovies(first: $first) {
      title
    }
  }
`

const variables = {
  first: 3
}

return fetch('https://api.graph.cool/simple/v1/cixos23120m0n0173veiiwrjr', {
  method: 'post',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({query, variables})
})
.then(response => response.json())
.then(data => {
  return data
})
.catch((e) => {
  console.log(e)
})

私は GitHubの完全な例 を作成しました。

14
marktani