Apollo GraphQL With React Native — Part 1
For efficient data fetching and flexible state management
GraphQL has revolutionized how we build APIs, offering a more efficient and flexible approach than traditional REST.
In the first part of this blog series, we will dive into the fundamentals of GraphQL, explore its benefits, and learn how to explore GraphQL APIs.
What is a GraphQL?
GraphQL is a query language for APIs and a runtime to fulfill queries with existing data. It allows the client to specify exactly what data they need from the server.
No more waiting on the server to decide — now, you can retrieve data with unmatched efficiency and flexibility.
GraphQL vs. REST
Let’s say you have an API to fetch a user’s profile and address. In a typical REST scenario, this is what the request or response would look like:
API calls for the GraphQL server would look like this:
GraphQL is changing the way we think about API calls. Instead of making different API calls to different URLs to fetch data, we now have different queries to a single URL endpoint that returns data based on the query.
Instead of a GET request, we need to POST a query that describes the data we want. This allows us to make queries to fetch related pieces of data in a single shot.
In the example above, we can fetch the user and the user’s address (as a nested JSON object) in the same API call, as opposed to making two API calls.
GraphQL Benefits
More efficient data fetching: Clients can specify only the required data using GraphQL, thus reducing the amount of extra data the server returns.
Greater flexibility: Clients can request data in the desired shape or form rather than being limited to the structure provided by the API.
Fewer API requests and improved efficiency: The number of API requests required has decreased due to GraphQL, which enables multiple resources to be obtained with a single query, thus improving performance.
Self-documenting: Each GraphQL API must conform to a “schema”, which specifies the graph data model and the types of queries a client can make.
What are queries, mutations, and subscriptions?
Queries, mutations, and subscriptions are the three types of operations available in GraphQL.
- Queries are used to get the data from the server. It is similar to GET request in REST APIs.
- Mutations can change data on the server, just like the POST, PUT, and DELETE calls in REST, which can add, update, or remove data from the server.
- Subscriptions are used to enable real-time communication between the client and the server. They allow the client to receive updates when certain events occur on the server, such as when a new message is posted or when a new user signs up.
Subscriptions are typically implemented using web sockets and are ideal for applications that require real-time updates, such as chat applications or real-time dashboards.
Let’s play with GraphQL (to understand the above jargon)
To get started, we’ll need a GraphQL API endpoint. We’ve set up a GraphQL server for you to explore. Here’s how:
1. Download the server code from GitHub
Server code: https://github.com/hiren-simformsolutions/GraphQLServer.git
2. Place the ‘server’ folder in your React Native project’s root folder.
3. Open a terminal, navigate to the ‘server’ folder, and run these commands:
yarn && npx prisma generate && yarn devVoila! Your GraphQL server is now running at http://localhost:4000/. Open this URL in any browser to experience the GraphQL Playground.
GraphQL Playground
In GraphQL Playground, we can explore queries, mutations, and subscriptions via the DOCS tab. We can compare this with the Postman collection of the REST API.
Here, we can see the feed (the query's name) under the QUERIES section. Clicking on it reveals TYPE DETAILS, listing all the available fields in the feed query, such as “id”, “links”, and “count”.
Below TYPE DETAILS , you’ll see ARGUMENTS that feature fields like filter, skip, take, and orderBy, similar to parameters in REST APIs. We can compare these with the parameters we are passing in REST APIs.
Clicking on any of the fields or arguments will display the field type.
Query
Let’s write our first query inside the playground.
- Start with the
querykeyword to write any query. - Within the brackets, write the query name you want to execute, along with the desired fields for response.
Here, feed is the query name.
3. Once you have written the query, press the play button in the center. The resulting query response will appear on the right-hand side.
Mutation
Similar to the query, you can write the mutation by using the keyword mutation instead of ‘query’, as shown in the above screenshot.
We have also provided the arguments (‘url’ and ‘description’).
Here, post is the mutation name.
As you hit the play button, the mutation will execute. After the successful execution of the mutation, if you run your feed query again, you will be able to see a new feed added to the list.
Subscription
Similar to the query and mutation, you can write the subscription using the keyword subscription. However, you need to subscribe to the newLink subscription as shown in the above screenshot.
You can notice its listing on the right-hand side. When a new link is added through a mutation, you’ll immediately see the update right here on the right-hand side.
Here, you have to execute the post mutation with the URL and description as reflected in the ‘newLink’ subscription in the screenshot below.
Conclusion
In this section, we’ve explored how GraphQL outshines traditional REST APIs. We covered the basics, from what GraphQL is to its advantages and various operations.
What’s next?
In Part 2, we’ll get hands-on with GraphQL in React Native and integrate the powerful Apollo Client. Read it for step-by-step instructions.
For more updates on the latest tools and technologies, follow the Simform Engineering blog.
