Issues establishing connection to YelpQL api with Apollo Client (React).

[natejahnke]

Overview

• Client ID: aeAm4RYuD17vn2cvJR_cFA
• Issue type: Question
• Summary: Issues establishing connection to YelpQL api with Apollo Client (React).
• Platform: Desktop/web

Description

I'm trying to connect to the Yelp GraphQL api from my react web app. If i dont include the no-cors option, the console errors saying blocked by CORS policy.

Endpoint

Yelp GraphQL

Parameters or Sample Request

const client = new ApolloClient({
  uri: "https://api.yelp.com/v3/graphql",
  fetchOptions: {
    mode: "no-cors"
  },
  request: operation => {
    operation.setContext({
      headers: {
        Authorization:
          "Bearer API_KEY",
        "Content-Type": "application/graphql",
        "Access-Control-Allow-Origin": "*"
      }
    });
  }
});

Response

Console Errors: POST https://api.yelp.com/v3/graphql net::ERR_ABORTED 401 [Network error]: ServerParseError: Unexpected end of JSON input Manifest: Line: 1, column: 1, Syntax error.

Extra information

Is it possible to connect to the graphql api from the react front end? Thanks.

[bizmate]

APIs are client agnostic, there is no reason why you cannot connect from React but you would be exposing your API key to the browser so I would not do that.

The error response is explicit 401 - client error - unauthorised ServerParseError: Unexpected end of JSON input

You are not making any request, ie the request body is empty. You need to ask for a specific object like the business object. See the docs https://www.yelp.com/developers/graphql/guides/intro

{
    business(id: "garaje-san-francisco") {
        name
        id
        alias
        rating
        url
    }
}'

If this does not work maybe your auth token is incorrect

[colinmatthewlee]

@natejahnke Hi Nate - were you able to resolve this issue? I am getting the same problem.

My requests to the YelpQL api are located in my react components, but I still keep getting the following errors:

POST https://api.yelp.com/v3/graphql net::ERR_ABORTED 401 [Network error]: ServerParseError: Unexpected end of JSON input