Apollo React Set Up

Help
1

Hi Yall.

Following this example here - Get started with Apollo Client - Apollo GraphQL Docs

I updated index.js with the following code:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { ApolloClient, InMemoryCache, ApolloProvider, gql } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://flyby-gateway.herokuapp.com/',
  cache: new InMemoryCache(),
});

client
  .query({
    query: gql`
      query GetLocations {
        locations {
          id
          name
          description
          photo
        }
      }
    `,
  })
  .then((result) => console.log(result));

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

And get the error:

Screen Shot 2023-02-05 at 3.37.23 PM
Screen Shot 2023-02-05 at 3.37.23 PM1036×1398 228 KB

Help is appreciated

2

This is a CORS error.
CORS is a mechanism where, for some connections, the client/browser automatically sends an OPTIONS request to the server, to which the server responds with a list of which websites are allowed to make requests in what specific way.
In your case, the Heroku server is not configured to accept CORS requests from localhost:3000.
You can read more about CORS here: Cross-Origin Resource Sharing (CORS) - HTTP | MDN

You can try to use Apollo in no-cors mode, which would look like this:

import { ApolloClient, HttpLink } from '@apollo/client';

const client = new ApolloClient({
  link: new HttpLink({
      uri: 'https://flyby-gateway.herokuapp.com/',
      fetchOptions: {
        mode: 'no-cors'
      }
  }),
  cache: new InMemoryCache(),
});

If that doesn’t work, the next step would be to configure CORS on your server to accept connections from more sites.

3

Hi @wenmoon :wave: It appears our docs had fallen out of date - apologies about that!

The correct URL for the FlyBy GraphQL API is https://flyby-router-demo.herokuapp.com/, I believe that was causing the error you were seeing. Please try the new URL and let us know if you run into any other problems; this is also reflected in our React getting started docs now. Thanks!

4

Thanks for letting me know

5

That resolves the CORS error. Thank you. But getting this error:

createHttpLink.ts:167 POST https://flyby-router-demo.herokuapp.com/ net::ERR_ABORTED 415 (Unsupported Media Type)

(anonymous) @ createHttpLink.ts:167
…

21:17:10.531 index.ts:59 Uncaught (in promise) ApolloError: Unexpected end of JSON input
** at new ApolloError (index.ts:59:1)**
…

Any ideas?