Using localhost graphql API results in error 400.

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.

[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.