Here is my App.js file. I run my query here.
I use apollo client instead of apollo-boost.
import React, { useEffect } from "react";
import { useQuery } from "react-apollo";
import gql from "graphql-tag";
const MY_QUERY = gql`
query {
getAllSalons {
id
displayName
email
}
}
`;
const App = (props) => {
const { data, loading, error } = useQuery(MY_QUERY);
useEffect(() => console.log("-------", data), [data]);
useEffect(() => console.log("-------", error), [error]);
return (
<div className="App">
<h1>KOMB COLLECTION</h1>
{loading ? <h2>Loading...</h2> : <h2>Data :)</h2>}
</div>
);
}
Here is how I set up apollo client in index.js file
I set up authentication in my apollo client.
Here is all imports
import ApolloClient from "apollo-client";
import { ApolloProvider } from "react-apollo";
import { createHttpLink } from "apollo-link-http";
import { setContext } from "apollo-link-context";
import { InMemoryCache } from "apollo-cache-inmemory";
I get failed to fetch error only with this endpoint but it works fine in Postman and another endpoint works well with this code.
const httpLink = createHttpLink({
uri: "http://13.125.142.93:3001/graphql",
});
const authLink = setContext((_, { headers }) => {
const token = localStorage.getItem("token");
return {
headers: {
...headers,
Authorization: token ? token : "",
},
};
});
const client = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache(),
});
ReactDOM.render(
<ApolloProvider client={client}>
<App />
</ApolloProvider>,
document.getElementById("root")
);
I am new on graphql and don't know how to deal with this error. Also, I wasn't able to find any documentation for that.
I get this error on my console
Access to fetch at 'http://13.125.142.93:3001/graphql' from origin
'http://localhost:3000' has been blocked by CORS policy: Response to
preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource. If an opaque response serves your needs, set the request's
mode to 'no-cors' to fetch the resource with CORS disabled.
