As a newcomer to Apollo, I am facing some challenges while trying to send a basic GraphQL query to the Yelp server.
import React from 'react';
import { render } from 'react-dom';
import ApolloClient from 'apollo-boost';
import { setContext } from 'apollo-link-context';
import { createHttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import gql from 'graphql-tag';
import { ApolloProvider } from 'react-apollo';
import { yelpCredentials } from '../../../keys/yelp/config';
import 'cross-fetch/polyfill';
import App from './components/App';
const httpLink = createHttpLink({
uri: 'https://api.yelp.com/v3/graphql',
});
const authLink = setContext((_, { headers }) => {
const token = yelpCredentials.API_Key;
return {
headers: {
...headers,
authorization: token ? `Bearer ${token}` : '',
'Content-Type': 'application/graphql',
},
};
});
const client = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache(),
});
client.query(
***[QUERY_CONTENT]***
,
}).then(console.log);
render(
<ApolloProvider client={client}>
<App />
</ApolloProvider>,
document.getElementById('app'),
);
I attempted the following queries:
client.query({
query: gql`
query business($id: String!) {
business(id: $id) {
name
id
alias
rating
url
}
}
`,
variables: { id: 'garaje-san-francisco' },
}).then(console.log);
The error encountered was: Uncaught (in promise) Error: Network error: Unexpected token < in JSON at position 0
query2:
client.query({
query: gql`
query business(id: "garaje-san-francisco") {
name
id
alias
rating
url
}
}
`,
}).then(console.log);
The error received was: "Syntax Error: Expected $, found Name "id""
query3:
client.query({
query: gql`
query business($id: String!) {
name
id
alias
rating
url
}
`,
variables: {
id: 'garaje-san-francisco',
},
}).then(console.log);
Another error encountered: Uncaught (in promise) Error: Network error: Unexpected token < in JSON at position 0
I have successfully retrieved data using Postman https://i.stack.imgur.com/Wc3uE.jpg