Apollo Client sending OPTIONS instead of GET HTTP method

Question

I'm having trouble understanding Apollo Client library as it does not work as intended. Instead of sending the GET HTTP method, it sends the OPTIONS HTTP method even though I've put to use GET only when retrieving data from GraphQL server.

const client = new ApolloClient({
    link: ApolloLink.from([
        new MeteorAccountsLink(),
        new HttpLink({
            uri: 'https://selo-comments.herokuapp.com/graphql',
            useGETForQueries: true
        })
    ]),
    cache: new InMemoryCache()
});

Console log from the browser: OPTIONS https://selo-comments.herokuapp.com/graphql?query=%7B%0A%20%20comments(id%3A%20%22TFpQmhrDxQqHk2ryy%22)%20%7B%0A%20%20%20%20articleID%0A%20%20%20%20content%0A%20%20%20%20userId%0A%20%20%20%20createdAt%0A%20%20%20%20commentID%0A%20%20%20%20votes%0A%20%20%20%20blockedUsers%0A%20%20%20%20__typename%0A%20%20%7D%0A%7D%0A&variables=%7B%7D 405 (Method Not Allowed)

Which obviously means that the HTTP method is incorrect even if it has the query parameter in the url. If you query that url using Postman or simply navigating to the url using browser's address bar, you will get GraphQL data. I have to use https://cors-anywhere.herokuapp.com/ in order to execute the query successfully.

What am I doing wrong?

Answer 1

The options request is probably a preflight request for CORS.

A CORS preflight request is a CORS request that checks to see if the CORS protocol is understood. It is an OPTIONS request, using three HTTP request headers: Access-Control-Request-Method, Access-Control-Request-Headers, and the Origin header.

You probably need to configure your server to allow cross origin calls.

Maybe you can find some inspiration here to get u started. Allow CORS REST request to a Express/Node.js application on Heroku