Пост-запрос GraphQL в axios
У меня проблема с 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
Похоже, вы пытаетесь передать в запрос переменные. Если я не ошибаюсь, то, что у вас есть в вызове 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 имеет специальный интерфейс переменных, и это может легко сломаться, если ввод содержит кавычки.
Значение параметра query, передаваемое в запросе, должно быть строкой, а имена переменных, передаваемых в запросы GraphQL, должны иметь префикс $. Вместо этого вы использовали строковые литералы для переменных в запросе. Также переменные могут быть переданы в почтовом запросе с помощью ключа variables.
Если вы измените свой код на что-то вроде ниже, он должен заработать:
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'
}
})
Мне пришлось заключить фигурные скобки в переменные в обратные кавычки, чтобы он работал
Что делать, если аргументы имеют произвольный тип? тогда как это сделать?
@DevAKS: Я не понял, что вы имели в виду под нестандартным типом. Не могли бы вы поделиться примером?
@Raeesaa, вы принимаете аргумент в своей мутации как переменную Int и String, поэтому предположим, что у вас есть, например, определенный пользователем тип - Location {lat: Int, lng: Int}
@DevAKS graphql.org/learn/queries/#variablesgraphql.org/learn/schema/#input-types
я хотел бы поделиться с вами своим простым рабочим примером
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.info(response);
});
Так не должно быть. GraphQL имеет специальный интерфейс переменных, и это может легко сломаться, если ввод содержит кавычки.
Это сработало для меня с некоторыми изменениями. Спасибо!
использование строковых литералов для переменных является злоупотреблением graphql, гораздо менее безопасным / читаемым / управляемым
Мне нравится использовать следующий синтаксис, который похож на принятый ответ, но более явный.
Обратите внимание, что объект 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'
}
}
});
для 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.info(response.data.data.posts.edges);
console.info(response.data.data.posts.edges.length);
} catch (error) {
console.error(error);
}
},
Вероятно, хорошая ссылка, похоже, в строке запроса нет данных. medium.com/@stubailo/…