You plan to use GraphQL in your React app but not sure how to start? Here you can find two different ways of implementation.
I’ll write about two different techniques of using GraphQL in React - React Apollo and GraphQL Hooks. But hold your horses…
First I show how to define simple GraphQL endpoint on Back-End built with NodeJS. The endpoint will be able to process parameters I plan to provide by Front-End query. This is kind of a Full Stack content :)
So you know. All the code I show here is available in my GraphQL case study repo on Github. Small code snippets can be a bit out of context so it's good to see a bigger picture.
In order queries be able to accept parameters you need to define it in GraphQL types definition. That’s a place where you define all Schemas and data types you want to use. If I want my query
country to find a country by
id I need to do something like that:
So query should be defined inside
type Query. In my example I use two queries:
countries - this query will return me entire dataset I’ve got assigned to it. Data should match types defined in
type Country and it will be iterable so I wrap it with braces
country is a query that accepts one parameter-
id that should always have integer value. I want a result to be a single object so no braces here.
Now I’ve got my schema sorted. I need to bind it to an actual data with resolver function. I store my data (hardcoded) in
api.countries object. My resolver can look like that:
So my first query will return all the data and result will be an array. The resolver for the second query accepts two parameters -
args. Basically all parameters you define in your schema will be available in the second parameter in the resolver -
To find a particular value I use not that sophisticated method of looping through my dataset and returning matching value. This is only a simple example but you can be a way more creative here :) Anyway it works fine :D
Now it’s time to check whether you can access the endpoint. If you test it locally you can launch your Apollo server and go to Playground on
http://localhost:4000/ ( you can use my repo to play around with it if you want :) ). If the endpoint is fine you should see something like that:
Ok, so the query works! It’s React time!
So as I mentioned on the very beginning - I’ll use two techniques - React Apollo and GraphQL Hooks. Both require separate modules to import.
So let’s assume you do everything in your main React root file. You can obviously do it in any other nested component.
This is how it should look like:
Please keep in mind that you don’t really need the two in your project :) You choose the one you like and do not install modules for the other one ( both methods work together though… ).
Now if you want components in your app be able to use GraphQL queries you need to wrap them with a provider. React Apollo uses
ApolloProvider and Hooks
Both take single parameter which is an object with endpoint url and cache management mechanism. It can look like that:
So now components should be ready for GraphQL!
On one of the React meetups I heard that using functional components instead of classes is good for performance. I don’t really have opinion about it but in that case let’s focus on a functional one. Moreover now once they can use hooks they are pretty much as powerful as classes :)
First I’ll just paste a code snippet and then some comments:
So I need two imports for React Apollo. Then I define my
query that is suppose to accept
In this example I get my
id from component props but it can come from any other place like website form, data store etc. Then I assign it to an object containing
To actually trigger a query I need to use
Query wrapper and pass the query and parameters I specified earlier. State (error, loading) management in GraphQL is very simple and self explanatory :) That’s it! Your component just fetched data with GraphQL.
Now time for React buzz word - Hook! With GraphQL sounds even more cool :) I like it.
So now you need only one import. Notice that query definition is a bit different now and you shouldn’t use
id still comes from props.
Hook is defined by using
useQuery where you pass two parameters - defined query and an object with parameters of your query. It looks like that:
That’s it! You just used Hook to fetch data from API :)
That’s pretty much it from what I wanted to cover today. I think the main takeaway is that you can use Hooks to fetch data from GraphQL API.
And it might be obvious but you can’t pass parameters to GraphQL query if it’s not suppose accept any parameters :)