GraphQL Axios 变量 {} 注入答案

【问题标题】：GraphQL Axios variables {} injectionGraphQL Axios 变量 {} 注入
【发布时间】：2019-08-19 10:04:04
【问题描述】：

我正在使用 axios 为 Grapql 编写一个简单的帖子示例。完美的工作示例

            let body =  { 
                query: `
                    query {
                        game(id:"5c9beed4a34c1303f3371a38") {
                            _id
                            title
                        }
                    }
                `, 
                variables: {}
            }
            axios.post("http://localhost:3344/graphql", body)
                .then(res => {
                    console.log(res.data) // cool data from server
                })

但我想使用我看到的这种变量，但我无法使其工作

            let body =  { 
                query: `
                    query {
                        game(id: $id) { // IT SUPPOSE THE ID VARIABLE SHOULD BE INJECTED HERE
                            _id
                            title
                        }
                    }
                `, 

                variables: {id: "5c9beed4a34c1303f3371a38"} // DECLARED VARIABLE ID
            }
            axios.post("http://localhost:3344/graphql", body)
                .then(res => {
                    console.log(res.data) // 400 (Bad Request)
                })

GRaphQl 类型声明

            type Query {
                game(id: String!): Game!
            }

根据 cmets 我也试过这个。但是还是不行

            let body =  { 
                query: `
                    query {
                        Game($id: String!) {
                            game(id: $id) {
                                _id
                                title
                            }
                        }
                    }
                `, 
                variables: {id: "5c9beed4a34c1303f3371a38"}
            }

【问题讨论】：

标签： graphql axios

【解决方案1】：

您没有在查询中传递 id 变量，您必须像这样在查询级别定义它

 let body =  { 
                query: `
                    query ($id: ID) {
                        game(id: $id) { // IT SUPPOSE THE ID VARIABLE SHOULD BE INJECTED HERE
                            _id
                            title
                        }
                    }
                `, 

                variables: {id: "5c9beed4a34c1303f3371a38"} // DECLARED VARIABLE ID
            }

注意：您的类型必须与后端相同，例如 ID 或字符串

【讨论】：

我用类型声明更新了问题。我试过你的例子但没有用。只需更改query($id:String)
你能告诉我你在 api 上的 id 类型是什么吗？如果是 ID 类型，那么你必须在这里写一样。
我添加了类型示例。
您是否尝试过查询 ($id: String!) 因为！是必要的

【解决方案2】：

将您的类型声明更改为：

 type Query {
   game(id: ID!): Game!
 }

然后：

const query = `query Game($id: ID!) {
                 game(id: $id) {
                    id
                    title
                 }
              }`;

axios.post("http://localhost:3344/graphql", 
  body: JSON.stringify({
    query,
    variables: { id: "5c9beed4a34c1303f3371a38" },
  })
).then(res => {
     console.log(res.data)
})

【讨论】：

但在game(id: ID!) 中，id 类型是字符串
@roll 你的类型定义中id 的类型是什么？ type Game { id: ID! ... 例如这里的类型是 ID，如果是，那么您需要将查询定义从 game(id: String!): Game! 更改为 game(id: ID!): Game! 否则将查询从客户端更改为 const query = `query Game($id: String!) { ...
谢谢，你的例子是最接近解决方案的。

【解决方案3】：

谢谢大家，我终于找到解决问题的方法了。

也许其他人可能需要它。

类型定义

type Query {
    game(id: String!): Game!
}

查询应该是这样的

let body =  { 
    query: `
        query Game($id: String!) { // notice the query Game structure
            game(id: $id) {
                _id
                title
            }
        }`, 
    variables: {id: "5c9beed4a34c1303f3371a38"}
}

axios.post("http://localhost:3938/api/v1/graphql", body)
                .then(res => {
                    console.log(res.data)
                })

【讨论】：