# Apollo React Set Up

**URL:** <https://community.apollographql.com/t/apollo-react-set-up/5641>\
**Category:** Client SDKs\
**Tags:** client, web\
**Created:** [February 5, 2023, 8:38pm UTC](https://community.apollographql.com/t/apollo-react-set-up/5641 "2023-02-05T20:38:01Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![wenmoon](https://avatars.discourse-cdn.com/v4/letter/w/b487fb/32.png) [@wenmoon](https://community.apollographql.com/u/wenmoon)\
**Post date:** [February 5, 2023, 8:38pm UTC](https://community.apollographql.com/t/apollo-react-set-up/5641/1 "2023-02-05T20:38:01Z")

</div>

Hi Yall.

Following this example here - [Get started with Apollo Client - Apollo GraphQL Docs](https://www.apollographql.com/docs/react/get-started/)

I updated index.js with the following code:

```auto
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](https://us1.discourse-cdn.com/flex019/uploads/apollographql/original/2X/7/7da5e721347caa119b4d8655a8660b2b9cc99725.png)

Help is appreciated

---

<div class="post-metadata">

**Author:** ![lenz](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/lenz/32/4007_2.png) [@lenz](https://community.apollographql.com/u/lenz)\
**Post date:** [February 6, 2023, 9:02am UTC](https://community.apollographql.com/t/apollo-react-set-up/5641/2 "2023-02-06T09:02:24Z")

</div>

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](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)

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

```auto
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.

---

<div class="post-metadata">

**Author:** ![alessbell](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/alessbell/32/3381_2.png) [@alessbell](https://community.apollographql.com/u/alessbell)\
**Post date:** [February 17, 2023, 9:23pm UTC](https://community.apollographql.com/t/apollo-react-set-up/5641/3 "2023-02-17T21:23:22Z")

</div>

Hi @wenmoon 👋 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/](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!

---

<div class="post-metadata">

**Author:** ![wenmoon](https://avatars.discourse-cdn.com/v4/letter/w/b487fb/32.png) [@wenmoon](https://community.apollographql.com/u/wenmoon)\
**Post date:** [February 20, 2023, 4:49am UTC](https://community.apollographql.com/t/apollo-react-set-up/5641/4 "2023-02-20T04:49:27Z")

</div>

Thanks for letting me know

---

<div class="post-metadata">

**Author:** ![nkm](https://avatars.discourse-cdn.com/v4/letter/n/df705f/32.png) [@nkm](https://community.apollographql.com/u/nkm)\
**Post date:** [March 2, 2023, 5:26pm UTC](https://community.apollographql.com/t/apollo-react-set-up/5641/5 "2023-03-02T17:26:08Z")

</div>

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

**createHttpLink.ts:167 POST [https://flyby-router-demo.herokuapp.com/](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?

---

<div class="post-metadata">

**Author:** ![Justin\_Gonzalez](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/justin_gonzalez/32/5359_2.png) [@Justin\_Gonzalez](https://community.apollographql.com/u/Justin_Gonzalez)\
**Post date:** [February 6, 2025, 8:49pm UTC](https://community.apollographql.com/t/apollo-react-set-up/5641/6 "2025-02-06T20:49:21Z")

</div>