How to fix authentication error when querying Yelp GraphQL API using Apollo Client

Question

I'm trying to create a basic react app that uses Apollo Client to query the Yelp GraphQL API.

When I try to send a query, I'm receiving a 401 error response.

I've joined the developer Beta program with Yelp and tried refreshing my API key but that hasn't worked. Here's the code for my index.js file.

import React from 'react'
import ReactDOM from 'react-dom'
import {ApolloProvider} from 'react-apollo'
import { ApolloClient } from "apollo-client";
import { createHttpLink } from "apollo-link-http";
import { setContext } from "apollo-link-context";
import { InMemoryCache } from "apollo-cache-inmemory";
import './index.css'
import App from './App'
import registerServiceWorker from './registerServiceWorker'

const httpLink = createHttpLink({
  uri: "https://api.yelp.com/v3/graphql",
  fetchOptions: {
    mode: "no-cors"
  }
});

const authLink = setContext((_, { headers }) => {
  const token = process.env.yelpApiKey;
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
      "Content-Type": "application/graphql"
    }
  };
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache()
});

ReactDOM.render(
    <ApolloProvider client={client}>
      <App/>
    </ApolloProvider>
  , document.getElementById('root'));
registerServiceWorker();

Am I missing something here? Any suggestions are appreciated!

Thanks!

Hey man! can you try to provide an error, or why it doesn't work? any debugging messages. Have you tried debugging, what have you tried? — Sebastian Berglönn, Jan 16 '19 at 20:18
The only error message I have in the console is "Failed to load resource: the server responded with a status of api.yelp.com/v3/graphql:1 401 ()". I'm not quite sure what steps I can take to debug. Do you have any suggestions? — Tim Wernke, Jan 17 '19 at 00:43
Error 401 means unauthorized, so probably an issue with the API-key. Try to debug and see if the API-key is correct. check the request and make sure all the headers are correct — Sebastian Berglönn, Jan 17 '19 at 09:38
Hey, I had the same problem, as far as my current understanding goes, the problem lies with Yelp and their Graphql-Server. As soon as you activate "no-cors" your sending the request in a way that their server rejects. See https://github.com/apollographql/apollo-client/issues/1817. — Sebastian Rehm, Mar 01 '19 at 11:24

score 2 · Answer 1 · answered Jan 05 '20 at 22:11

I had the same problem, and so far I think that the problem here is Yelp doesn't support CORS, and even we use no-cors It doesn't help. You can check below discussions.

GraphQL api returns 500 for a valid query #248

WKWebView CORS error #44

I am new at YELP API and I am not super experienced in Apollo Client. But my working solution is as below. I will not use this project for production just development purposes. I used herokuapp to activate cors.

const cache = new InMemoryCache();
// Seting up Apollo Client
const client = new ApolloClient({
  uri: 'https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/graphql',
  request: (operation) => {
    operation.setContext({
      headers: {
        Authorization: `Bearer ${apiKey}`,
        'Accept-Language': 'en-US',
      },
    });
  },
  cache,
});

In this solution I had to use 'Accept-Language': 'en-US', because without this I got an error 400 Bad request, even en-us is the default;

code: "INVALID_LOCALE"
description: "The locale you specified is not valid."

Maybe you noticed that I haven't specified

"Content-Type":"application/graphql"

That is because It costs another 400 Bad requests to us. Apollo Client defaults has a content type "application/json" and when we specified "application/graphql" this overrides. You can read a helpful discussion about that in below.

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

Also, you can check below screenshot,

I hope this can be helpful for someone, and I know there might be a better solution and If I improve this one I will let you know.

How to fix authentication error when querying Yelp GraphQL API using Apollo Client

1 Answers1

Linked