Note: if you don’t have running React app in your local you can create new one using `create react app`
$npx create-recat-app app-name1 – The following packages needs to be installed
- apollo-boost: Package containing everything you need to set up Apollo Client
- react-apollo: View layer integration for React
- graphql-tag: Necessary for parsing your GraphQL queries
- graphql: Also parses your GraphQL queries
$ npm install apollo-boost react-apollo graphql-tag graphql
2 – Creating An Instance Of ApolloClient
In order to be able to access a GraphQL service from our React application we need to create an instance of ApolloClient first. This is done in App.js by adding the following code:
Note : using publicly available graphql endpoint for employee info
const client = new ApolloClient({
uri: "https://api.graph.cool/simple/v1/ciyz901en4j590185wkmexyex"
});
3 – Connecting ApolloClient To Your React App
Having established a connection to the GraphQL endpoint by using ApolloClient we now need to connect the instance of ApolloClient to the React app. To do so, please make sure to add the following lines of code in App.js:
<ApolloProvider client={client}>
<div>
Employee Info Apollo app
</div>
</ApolloProvider>
4 – Using Query Component To Request Data
To retrieve data from the GraphQL endpoint this component makes use of another component from the React Apollo library: Query. The Query component makes it extremely easy to embed the GraphQL query directly in the JSX code of the component. Furthermore the Query component contains a callback method which is invoked once the GraphQL query is executed.
Query example :
<Query
query={gql`
{
allCourses {
id
title
author
description
topic
url
}
}
`}
>