如何从JavaScript获取查询/突变到石墨烯-django API ?

Question

当用户提交表单时，我试图做一个突变，但我总是得到一个400错误。

奇怪的是，我使用graphhiql接口来检查它们如何执行fetch功能，最后，它们使用完全相同的头、方法、主体和凭证。所以我真的不知道该怎么做。

这是突变:

const comp_1 = (<HTMLInputElement>document.getElementById('comp-1')).value.trim();
const comp_2 = (<HTMLInputElement>document.getElementById('comp-2')).value.trim();
const mutation = `
mutation CreateComps($comp1: String!, comp2: String!) {
createCompetitors(comp1: $comp1, comp2: $comp2) {
comp1 {
id
name
}
comp2 {
id
name
}
}
}
`;
fetch('/graphql/#', {
method: 'POST',
headers: {
"Content-Type": 'application/json',
"Accept": 'application/json',
"X-CSRFToken": getCookie('csrftoken')
},
body: JSON.stringify({ 
mutation,
variables: { comp_1, comp_2 }
}),
credentials: 'include',
})
.then(response => {
if (!response.ok) {
throw Error(`${response.statusText} - ${response.url}`);
}
return response.json();
})
.then(result => {
console.log(result)
})
.catch(err => {
if (err.stack === 'TypeError: Failed to fetch') {
err = 'Hubo un error en el proceso, intenta más tarde.'
}
useModal('Error', err);
})

这是graphhiql函数:

function httpClient(graphQLParams, opts) {
if (typeof opts === 'undefined') {
opts = {};
}
var headers = opts.headers || {};
headers['Accept'] = headers['Accept'] || 'application/json';
headers['Content-Type'] = headers['Content-Type'] || 'application/json';
if (csrftoken) {
headers['X-CSRFToken'] = csrftoken
}
return fetch(fetchURL, {
method: "post",
headers: headers,
body: JSON.stringify(graphQLParams),
credentials: "include",
})
.then(function (response) {
return response.text();
})
.then(function (responseBody) {
try {
return JSON.parse(responseBody);
} catch (error) {
return responseBody;
}
});
}

我得到一个400的错误，只是说:Failed to load resource: the server responded with a status of 400 (Bad Request), Django输出说:

Bad Request: /graphql/
[07/Feb/2021 12:51:44] "POST /graphql/ HTTP/1.1" 400 294

但事实并非如此。在此之后，我尝试使用一个名为grapql-request(链接)的npm包，我不知道代码是否正确，因为无论我做什么，我都会在导入时出现错误。

您必须导入两件事，我这样做:import { GraphQLClient, gql } from "graphql-request"(像文档所说的)，然后在浏览器控制台上我得到一个错误:Uncaught TypeError: Failed to resolve module specifier "graphql-request". Relative references must start with either "/", "./", or "../"..

node_modules目录在项目的目录下面，所以它是最高级别的。我尝试像这样导入:import { GraphQLClient, gql } from "../../../../node_modules/graphql-request"，并得到这个错误:GET http://127.0.0.1:8000/node_modules/graphql-request net::ERR_ABORTED 404 (Not Found).

我认为，如果我将其移动到应用程序的静态目录，它可以工作，所以我尝试了它，像这样导入:import { GraphQLClient, gql } from "../../node_modules/graphql-request"，并在html文件中导入这样:<script src="{% static 'node_modules/graphql-request' %}" type="module"></script>，现在我仍然从之前得到相同的错误:GET http://127.0.0.1:8000/static/node_modules/graphql-request net::ERR_ABORTED 404 (Not Found)

所以我真的不知道该怎么办。如果有人能帮助我，我会很高兴，因为我有问题抓取GraphQL API自周四以来，我真的很接近重做应用程序，但与django-rest-framework

BTW这是我使用的URL:

path('graphql/', GraphQLView.as_view(graphiql=False))

Answer 1

查询中有一个sintax错误:$comp1: String!, comp2: String!。您必须在comp2之前添加$。

在body中，这样做:

body: JSON.stringify({ 
query: mutation,
variables: { comp1: comp_1, comp2: comp_2 }
})

之前，正文是这样的:

{
mutation: <the mutation>,
variables: {
comp_1: <comp_1>,
comp_2: <comp_2>
}
}

这样做的问题是没有查询，graphql需要一个，并且在名为comp_1的查询中也没有变量，有一个名为comp1,comp_2也是如此。

并添加:credentials: 'include'