graphqlでクエリparamを渡す方法

Question

graphqlの本文クエリ内にデータを渡すことは可能ですか？このように

var name = formData.get('name'); 
    var email = formData.get('email'); 
    var message = formData.get('message'); 

    const resp = await fetch('/graphql', { 
     method: 'post', 
     headers: { 
      Accept: 'application/json', 
      'Content-Type': 'application/json', 
     }, 
     body: JSON.stringify({ 
      query: '{createPost (name: '+ name +' , email: '+ email +' , message: '+ message +') {id, statut}}', 

     }), 
     credentials: 'include', 
    }); 
    const { data } = await resp.json(); 
    if (!data || !data.createPost) throw new Error('Error'); 

    console.log(data.createPost) 

私は、送信フォームから取得するすべてのvarを渡したいと思います。私はこれをしようとすると は、私は

{ 


"errors": [ 
    { 
     "message": "Syntax Error GraphQL request (1:29) Expected :, found Name \"email\"\n\n1: {createPost(name: John Doe , email: JD@test.com , message: blablabla) {id, statut}}\n        ^\n", 
     "locations": [ 
     { 
      "line": 1, 
      "column": 29 
     } 
     ] 
    } 
    ] 
} 

は、クエリを構成する文字列の建物を避けるために助け

Answer 1

使用variablesいただきありがとうございます。このエラーを得ました。あなたは無料でタイプチェックを受け取ります！

私はジャバスクリプトに精通していないんだけど、私は、これは動作します信じる：

var name = formData.get('name'); 
var email = formData.get('email'); 
var message = formData.get('message'); 

const resp = await fetch('/graphql', { 
    method: 'post', 
    headers: { 
     Accept: 'application/json', 
     'Content-Type': 'application/json', 
    }, 
    body: JSON.stringify({ 
     query: 'query Q($name: String, $email: String, $message: String){createPost (name: $name, email: $email, message: $message) {id, statut}}', 
     variables: { 
      name: name, 
      email: email, 
      message: message 
     } 

    }), 
    credentials: 'include', 
}); 
const { data } = await resp.json(); 
if (!data || !data.createPost) throw new Error('Erreur sur l`envoi du message !'); 

console.log(data.createPost) 

Answer 2

は、ここで私のために働いたものです。

const graphqlQuery = `{ 
     products { 
     id 
     title 
     images 
     } 
    }` 

const params = encodeURI(graphqlQuery) 

fetch('http://localhost:3001/?raw&query=' + params, { 
    method: 'post', 
    headers: { 
    "Content-Type": 'text/plain' 
    } 
}).then(function(response) { 
    console.log('response', response); 
    return response.json() 
})