Comments (8)
hi @asiandrummer using graphiql 0.5 this is the behaviour I see.
Consider a query where one attribute doesn't exist e.g. unknown
in the screenshot below
In this case I have setup my graphql server to return a 200 with the errors. GraphiQL shows the error on the right panel.
But returned 200 when an error happens is not what we think should happen.
So in the screenshot above I have set up the server to return 422 with the error. GraphiQL just shows [object Object]
on the right.
The expected behaviour would be to have GraphiQL show the error on the right if there is an error on the response body, even if the status is 422.
from graphiql.
Hi @sporto - sorry it took a while to get to this. I'm not sure if I understand the problem; when you say "bad queries", do you mean a invalid query with a correct syntax (e.g. a field that isn't defined is queried), or a query that returns null
because the result was empty?
GraphiQL does not know about the network status/http status code/etc - instead it handles errors if the defined fetcher rejects the query and/or an error is thrown during the execution (defined here). So it is possible to render the error logs without a specific status code - express-graphql implementation is an example of this.
from graphiql.
I see. Just checking in case - is your server throw
ing an error whenever it comes across any responses other than 200
status? The query execution workflow is set up so that the response (in your case maybe a JSON.parse
d object?) gets passed into the callback defined in _runEditorQuery
function in GraphiQL
component, and if there's any error thrown from the fetcher, _fetchQuery
will catch the error and try to find a stack trace, or cast the error into String
format, which is what I think might be happening with your 422
status code:
_fetchQuery(query, variables, cb) {
this.props.fetcher({ query, variables }).then(cb).catch(error => {
this.setState({
isWaitingForResponse: false,
response: error && (error.stack || String(error))
});
});
}
FYI, our example fetcher definition does this from example/index.html
:
try {
return JSON.parse(responseBody);
} catch (error) {
return responseBody;
}
from graphiql.
@asiandrummer I don't follow your question, can you please rephrase it?
As far as I can tell my server is returning exactly the same (headers and body) but the only thing that is different is the status code.
from graphiql.
is your server throwing an error whenever it comes across any responses other than 200 status?
Sorry; what I meant was a "client-side fetcher code", not a "server". I was just curious how your fetcher is defined.
from graphiql.
I see this error:
I see what you mean about the fetcher, I'm using axios, so you are saying that the error is most likely happening there? I will investigate this.
This is how it is defined at the moment:
import 'graphiql/graphiql.css'
import React from 'react'
import ReactDOM from 'react-dom'
import GraphiQL from 'graphiql'
import axios from 'axios'
function graphQLFetcher(graphQLParams) {
return axios({
url: '/graphql',
method: 'POST',
data: graphQLParams,
})
}
ReactDOM.render(<GraphiQL fetcher={graphQLFetcher} />, document.body)
from graphiql.
Ok, that is the problem, thanks so much for helping debug this. Closing this issue.
from graphiql.
:D glad you were able to resolve the issue - awesome!
from graphiql.
Related Issues (20)
- [lsp-server] 🐞 Pending response rejected since connection got disposed HOT 4
- [lsp-server] 🐞 Adding whitespaces\newlines causes autocompletion to move up a level HOT 5
- Don't export react with cdn bundle
- [graphiql] <title>MDUxRUVCM0Y3QjQwNzgwMDZDNjczQTMxMEIyRkZEMEIwMDI4MjhGMUQ0NkI4RjI5RTREMjE4QzhBM0FDNDdBOA==
- [lsp-server] Support go to definition for implementation first graphql setups HOT 1
- vscode-graphql-syntax javascript - line between graphql( and ` character breaks syntax highlighting HOT 2
- [graphiql] Grafana Embedded GraphiQL Editor CodeMirror info tooltips links navigate away from page HOT 4
- [graphiql] Fragment variables not supported HOT 4
- [graphiql] Default Value not accepted in Variable
- [graphiql] bump markdown-it for SNYK-JS-MARKDOWNIT-6483324 HOT 1
- [graphiql] cm6-graphql | Cannot use import statement outside a module | import { getTokenAtPosition, getTypeInfo, getAutocompleteSuggestions, getDiagnostics } from 'graphql-language-service';
- [graphiql] Upgrade to @graphiql/react breaks unit tests
- [graphiql] Cannot edit query name from explorer plugin
- [lsp-server] <title> Sending request for data to server
- [graphiql] <title>pluginapi
- [lsp-server] 🐞 Constant syntax errors if a file is named `exports.graphqls` HOT 1
- [lsp-server] Support JS/TS files as schema files HOT 4
- [lsp-server] 🐞 JS/TS files should only be checked when included in `documents` config glob HOT 2
- [graphiql] Graphiql editor information is scoped to the origin
- [lsp-server] Add configuration to disable/enable for certain files. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from graphiql.