Working with GraphQl API for Mobile App Development using Flutter Part 1
This is my personal experience working with GraphQL endpoints in flutter development. In this article, I will not write about building some sophisticated UI's, I will only concentrate on how to set up your network architecture in other to successfully get responses from a GraphQL endpoint.
This article is currently been documented as I undergo the interview process from HaggleX. you can check out HaggleX.
It is the first time working with GraphQL for flutter, and I spent a few hours trying to understand the basics of GraphQl, going through the HaggleX GraphQL playground and trying to get familiar with the document as I learn.
I had help from one of my colleague who does Node and has worked with GraphQl before so I sat with him while he helped explain the terminologies such as mutation, query and subscription. We practised with the playground environment and made a few calls which were successful but he is not into mobile development, so I was left alone to figure out how to set up my flutter environment to integrate all we have practised and get successful responses also with flutter.
What is GraphQL?
Bob my friend explained to me that GraphQL(Graph Query Language) was developed by Facebook to help them solve the problem of organizing and querying their huge data store which was running in millions of data points for a particular entity. it is a query language for API's which makes querying and manipulating data hassle-free if you imagine storing hundreds of thousands of data points for a particular entity and you need a complete and understandable description of the data in your API, then GraphQL is the language you need.
Facebook, Twitter, Instagram and other big platforms that have users records summing in millions of data points use GraphQL to make it easy to visualize those data in the API, run queries, mutations and subscription, and get only the data they need at any time.
GraphQL gives you the ability to get the selected data you need and make fulfilling queries with existing data easy. However, you need to understand how the data is structured and how to run the query and mutations and subscriptions as well.
Query
Think of Query in GraphQL as a Get method for the well known REST API. with Query, you can specify what you need from the thousands of record in the database and this will be returned to you, unlike REST, everything is returned and the client has to write logic to get only the needed to the user to interact with.
to write a Query in a GraphQL playground, here is what you do:
say this is the schema for the data and it was specified as a QUERY- yes, in the playground, GraphQL specifies which schema is Query, Mutation and Subscription based on the design.
resendVerificationCode(
): Boolean
query{
resendVerificationCode(
data:{email: "ikininkini@gmail.com"}
)
}
you will notice I used curly braces to wrap every key: value item. for example, inside the resendVerificationCode is a named argument with a key: value pair which is data: EmailInput. so I start with a query then create the curly wrap for the key value. Though you might not necessarily need to denote the query keyword, but it looks professional if others understand what you are doing.
Next, you observe that the EmailInput is a type, hence we wont indicate it but look further for its key value. The key value for the type EmailInput is email and String. Hence I put an actual email address because that is what it is expecting.
this query above does not explicitly have a return type, but it does return something when called from the playground.
We should now look at a query that explicitly have a return type and how to design it.
getUser(
): User
from the above you notice a return type was specified and the argument value is a type and we have to look deep into that type to see its key value which we specify instead of the type, hence our query will be like so:
Comments
Post a Comment