web-dev-qa-db-ja.com

axiosでのGraphQL postリクエスト

GraphQLに問題があります。サーバーにaxios.postリクエストを送信したいのですが。私は郵便配達でそれを行うことができます：

{
    "query":"mutation{updateUserCity(userID: 2, city:\"test\"){id name age city knowledge{language frameworks}}} "
}

そしてgraphiqlでは：

mutation {
  updateUserCity(userID: 2, city: "test") {
    id
    name
    age
    city
    knowledge {
      language
      frameworks
    }
  }
}

しかし、私のコードではそれを行うことはできません：（（これが私のコードスニペットです：

const data = await axios.post(API_URL, {
  query: mutation updateUserCity(${ id }: Int!, ${ city }: String!) {
    updateUserCity(userID: ${ id }, city: ${ city }){
      id
      name
      age
      city
      knowledge{
        language
        frameworks
      }
    }
  }
}, {
    headers: {
      'Content-Type': 'application/json'
    }
  })

私のコードの何が問題になっていますか？

reactjsgraphqlaxios
7
Tatevik

クエリに変数を渡そうとしているようです。私が間違っていない限り、あなたがaxios呼び出しで持っているものと他のものは異なります。

const data = await axios.post(API_URL, {
  query: `
    updateUserCity(userID: ${id}, city:${city}){
      id
      name
      age
      city
      knowledge{
        language
        frameworks
      }
    }
  `
}, {
  headers: {
    'Content-Type': 'application/json'
  }
});

この呼び出しの前に変数idとcityが定義されていれば、これでうまくいくと思います。

1
Samuel Imolorhe

私の簡単な実例を紹介したいと思います

            let id = "5c9beed4a34c1303f3371a39";
            let body =  { 
                query: `
                    query {
                        game(id:"${id}") {
                            _id
                            title
                        }
                    }
                `, 
                variables: {}
            }
            let options = {
                headers: {
                    'Content-Type': 'application/json'
                }
            }
            axios.post('http://localhost:3938/api/v1/graphql',body, options)
                .then((response)=>{
                    console.log(response);
                });
1
roll

私は次の構文を使用するのを楽しんでいます。これは、受け入れられた回答に似ていますが、より明確です。

variablesオブジェクトはdataオブジェクトの内側にネストされており、queryオブジェクトの兄弟であることに注意してください。

const data = await axios({
  url: API_URL,
  method: 'post',
  headers: {
    'Content-Type': 'application/json',
    // any other headers you require go here
  },
  data: {
    query: `
      mutation updateUserCity($id: Int!, $city: String!) {
        updateUserCity(userID: $id, city: $city){
          id
          name
          age
          city
          knowledge{
            language
            frameworks
          }
        }
      }
    `,
    variables: {
      id: 2,
      city: 'Test'
    }
  }
});
0
NWRichmond