Внедрение переменных GraphQL Axios {}

#graphql #axios

Вопрос:

я пишу простой пример post для Grapql с использованием axios. Идеальный рабочий пример

             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!
            }

Согласно комментариям, я также пробовал это. Но все еще не работает

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

Ответ №1:

Спасибо всем, я наконец-то обнаружил, как исправить проблему.

Возможно, это может понадобиться кому-то еще.

Определение типа

 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)
                })

Ответ №2:

Вы не передаете переменную 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 или String

1. Я обновил вопрос объявлением типа. Я пробовал ваш пример, но не работает. Только с одним изменением query($id:String)

2. можете ли вы сказать мне, какой у вас тип идентификатора в api? если это тип идентификатора, то вы должны написать то же самое здесь.

3. я добавил пример типа.

4. вы пробовали это с запросом ($ id: String!) потому что! необходимо

5. запрос ($id: строка!) работает. Ключ в том, чтобы соответствовать схеме. Вам не нужно менять схему, чтобы приспособиться к клиенту.

Ответ №3:

измените ваше объявление типа на:

  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)
})

1. но в game(id: ID!) тип идентификатора представляет собой строку

2. @roll какой тип id в вашем определении типа? type Game { id: ID! ... например, тип здесь — ID, если это так, то вам нужно изменить определение вашего запроса с game(id: String!): Game! на game(id: ID!): Game! , иначе измените запрос с client на const query = `query Game($id: String!) { ...

3. Спасибо, ваш пример был наиболее близок к решению.