Hello Everyone!! In this blog we will learn that Cache handling in GraphQL Api calling in Flutter.
GraphQL is a query language for APIs, allowing clients to request precisely the data they need, and nothing more. In contrast to REST APIs, where endpoints dictate the response structure, GraphQL enables a more fine-grained approach, reducing over-fetching of data.
Now a days most of the applications are using GraphQL APIs as they make our flutter application faster and most reliable.
Check our Flutter app development services page.
So,It was the brief description about GraphQL API calling.
Caching, on the other hand, is the process of storing and reusing server responses locally to avoid redundant network requests. By caching GraphQL responses, you can improve application performance, and provide a seamless experience for users, especially in low-connectivity scenarios.
Without wasting time let’s begin the code impelementation.
Step1:- Create GraphQL client
As shown in below code snippet create client for graphQL api calling.
|
1 2 3 4 5 6 7 8 |
GraphQLProvider( client: ValueNotifier(GraphQlApiCalling().clientToQuery()), child: CacheProvider( child: buildUI(), ), ); |
Step2:- Handle the cache
We need to use the following code for implementing the cache.
|
1 2 3 4 5 6 7 8 |
var response = await (client.clientToQuery()).query(QueryOptions( document: gql( mutation.getHomepageSliders(), ), cacheRereadPolicy: CacheRereadPolicy.mergeOptimistic, <strong>fetchPolicy: FetchPolicy.cacheAndNetwork</strong>)); |
As shown in the above code snippet,we need to use the cacheAndNetwork fetch policy.
Step3:- Add local storage
Add the Hive store as local storage for storing data as cache.Hive store will be used to store the data and when we call the API for the first time.And when we call the API again it will show us the data by fetching from cache memory i.e. hive store till data will come from network.
|
1 2 3 4 5 |
GraphQLClient( cache: GraphQLCache(store: HiveStore()), link: loggerLink.concat(authLink.concat(httpLink)), ); |
Conclusion:-
Now we are done with our implementation of Cache handling in GraphQL Api call.It will be very beneficial while implementing graphql apis.
It is also more useful as we are not using any package or dependency for this cache implementation.
Congratulations!!!! We have implemented Cache handling in GraphQL Api calling in Flutter.
Check here for more interesting blogs – https://mobikul.com/blog/
References:-
https://mobikul.com/implementation-of-graphql-api-on-flutter/