axios 中的 GraphQL post 请求

IT技术 reactjs graphql axios
2021-04-23 01:43:23

我对 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'
    }
  })

我的代码有什么问题？

5个回答

query要在请求中传递的参数值必须是字符串，并且传递给 GraphQL 查询的变量名称应以$. 您已将字符串文字用于请求中的变量。此外，可以使用variables密钥在 post 请求中传递变量。

将您的代码更改为如下所示的内容应该可以使其正常工作：

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
      }
    }
  }`,
  variables: {
    id: 2,
    city: 'Test'
  }
}, {
    headers: {
      'Content-Type': 'application/json'
    }
  })
如果参数是自定义类型怎么办？那怎么办呢？
2021-05-30 01:43:23
我不得不用反引号将花括号包裹在变量中以使其工作
2021-05-31 01:43:23
@DevAKS：我不明白您所说的自定义类型是什么意思。你能分享一下例子吗？
2021-06-14 01:43:23
@Raeesaa 你在你的突变中接受参数作为 Int 和 String 变量，所以假设你有用户定义的类型，例如 - Location {lat: Int, lng: Int}
2021-06-19 01:43:23
2021-06-20 01:43:23

我喜欢使用以下语法，它类似于接受的答案，但更明确。

请注意，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'
    }
  }
});

我想与您分享我的简单工作示例

            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);
                });
这不是它应该如何完成的。GraphQL 有一个专用的变量接口，当输入包含引号时，这很容易中断。
2021-05-23 01:43:23
对变量使用字符串文字是在滥用 graphql，远不那么安全/可读/可管理
2021-06-04 01:43:23
这对我有用，有一些修改。谢谢！
2021-06-13 01:43:23

您似乎正在尝试将变量传递到查询中。除非我错了，否则 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在此调用之前定义。

这不是它应该如何完成的。GraphQL 有一个专用的变量接口，当输入包含引号时，这很容易中断。
2021-06-03 01:43:23

对于 WordPress GQL https://docs.wpgraphql.com/getting-started/posts/ 这在 Nuxt 的这一刻似乎对我有用

async asyncData() {
const data = {
  query: `query GET_POSTS($first: Int) {
    posts(first: $first) {
      edges {
        node {
          postId
          title
          excerpt
          date
          content
          author {
            node {
              username
            }
          }
        }
      }
    }
  }`,
  variables: {
    first: 5
  }
}

const options = {
  method: 'POST',
  headers: { 'content-type': 'application/json' },
  data: data,
  url: 'http://localhost/graphql'
};
    
try {
  const response = await axios(options);

  console.log(response.data.data.posts.edges);
  console.log(response.data.data.posts.edges.length);
} catch (error) {
  console.error(error);
}

},

其它你可能感兴趣的问题
上一篇如何在 React Native 中从底部滑入和滑出 <View/>？ 下一篇React useReducer Hook 触发两次/如何将props传递给减速器？