Using localhost graphql API results in error 400.

[resdevd]

I'm using "with-graphql-react" example from next.js repo. During development, I'm using django backend's graphql api from localhost:8000. However I'm stuck at initial step with error response 400.

My index.js:

import {useGraphQL} from 'graphql-react'

const Index = () => { const {loading, cacheValue = {}} = useGraphQL({ fetchOptionsOverride(options) { options.url = 'http://localhost:8000/api/graphql/' options.mode = 'no-cors' }, operation: { query: { allArticles { id } } } })

return cacheValue.data ? (

    <p>Hello</p>
) : loading ? (
    <p>Loading…</p>
) : (
    <p>Error!</p>
)

}

export default Index

This query is working fine in graphiql, however using this in nextjs results to two following alternating errors below from web inspector:

"message": "Must provide query string."

and

Error response

Error code: 400

Message: Bad request syntax ('{"query":"\n{\n allArticles {\n id\n }\n}\n "}POST /api/graphql/ HTTP/1.1').

Error code explanation: HTTPStatus.BAD_REQUEST - Bad request syntax or unsupported method.

Can anyone point me towards right direction? Thanks.

[jaydenseric]

I don't think options.mode = 'no-cors' is a real option:

• https://github.com/jaydenseric/graphql-react#type-graphqlfetchoptions
• https://github.github.io/fetch/#options

[resdevd]

Thanks for responding.

Using localhost graphql api resulted in "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/api/graphql/. (Reason: CORS request did not succeed)." error. Originally I tried all the options I could, including following.

const Index = () => { const {loading, cacheValue = {}} = useGraphQL({ fetchOptionsOverride(options) { options.url = 'http://localhost:8000/api/graphql/' // options.credentials = 'same-origin' },

    headers :{
        "Access-Control-Allow-Origin" : "*"
    },
    operation: {
        query: `

{ allArticles { id } }` } })

With trial and error, for some reason using mode: 'no-cors', gets rid of the message. Now I understand it's not an option to be used. Using external api seems to work well with the example. Can you please point me towards right direction how to get localhost:8000 graphql api data into nextjs?

[jaydenseric]

Can you please format your code blocks, I can't read that.

[resdevd]

My bad. Here is the index.js file content. Rest of the code is not changed from "with-graphql-react" example.

import {useGraphQL} from 'graphql-react'

const Index = () => {
    const {loading, cacheValue = {}} = useGraphQL({
        fetchOptionsOverride(options) {
            options.url = 'http://localhost:8000/api/graphql/'
            // options.credentials = 'same-origin'
        },
        headers :{
            "Access-Control-Allow-Origin" : "*"
        },
        operation: {
            query: `
{
  allArticles {
    id
  }
}
             ` }})

    return cacheValue.data ? (
        <p>Hello</p>
    ) : loading ? (
        <p>Loading…</p>
    ) : (
        <p>Error!</p>
    )
}

export default Index

[jaydenseric]

headers is not a valid useGraphQL option: https://github.com/jaydenseric/graphql-react#function-usegraphql

I don't know why you are having CORS problems, I run my Next.js app at http://localhost:3002 and GraphQL API at http://localhost:3003/graphql without problems.

[resdevd]

Ah got it. I've been using Django graphene GraphQL backend. I suspect it's how Django handling cors resulting in this error. I'll work on that part. I will close this now, comment on this in case of an update. Hopefully this resolves cors issue and data fetching from django graphql api into nextjs. Thanks for your help. Appreciate this library you've developed.

[resdevd]

If anyone using Django graphql backend and using react frontend using nextjs "with-graphql-react" example. You need to install python package django-cors-headers in your backend and follow the instructions specified in order to avoid cors issue.