Getting 400 error "Must Provide Query String" from Yelp GraphQL API (using Apollo Client)

Overview

• Client ID: x7LWoNv05Hf_vNeFecFImQ
• Issue type: bug/issue with making request to GraphQL API
• Summary: Hi there, I’m building a React Native app and using the Apollo + React-Apollo client for querying the Yelp GraphQL API. After following the necessary header changes in https://github.com/Yelp/yelp-fusion/issues/251, I’m still getting a 400 error from the GraphQL endpoint ({"errors":[{"message":"Must provide query string."}]})
• Platform: iOS Simulator

Description

Below are my request headers, as listed by the React Native Debugger’s Chrome Dev Tools:

:method:POST
:path:/v3/graphql/
:scheme:https
accept:*/*
accept-encoding:gzip, deflate
accept-language:en_US
authorization:Bearer MY_ACCESS_TOKEN
content-length:175
content-type:application/json, application/graphql
origin:null
user-agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) ReactNativeDebugger/0.7.4 Chrome/58.0.3029.110 Electron/1.7.6 Safari/537.36
x-devtools-request-id:34600.32

This works well in Postman, and I’m able to receive data from the Yelp GraphQL API as expected.

More information

(Fill this section out if applicable (for things like bugs or questions))

Endpoint

Yelp GraphQL API endpoint (https://api.yelp.com/v3/graphql)

Parameters or Sample Request

query {
    business(id: "garaje-san-francisco") {
      name
      id
      location {
        city
      }
    }
  }

wrapped by Apollo’s gql template tag

gql`
  query {
    business(id: "garaje-san-francisco") {
      name
      id
      location {
        city
      }
    }
  }
`

Response

{"errors":[{"message":"Must provide query string."}]}

Extra information

(Anything else you that you think might help us better resolve this)

[tomelm]

Hey @aleksdao, it looks like you’re sending two values for the content type header. Could you try using only application/graphql and see if that works?

[aleksdao]

@tomelm It appears this was just a mistake on my part! If I’m reading this correctly (https://github.com/apollographql/apollo-client/blob/3b5045dfe74183fe060d2027e31317d890755b99/src/transport/networkInterface.ts#L189), the Apollo client calls JSON.stringify on the my query… so I should in fact be sending the default content-type: application/json header in my request.

After removing application/graphql override, this works as expected. Thanks for your help!