Flutter with graphql

 Hello friends welcome back,
      

                    Today we will talk about "GraphQL" use in flutter so there is some description following 
                link 

There is a package which is graphql_flutter 

graphql_flutter provides an idiomatic flutter API and widgets for graphql/client.dart. They are co-developed on github, where you can find more in-depth examples. We also have a lively community on discord.



Both GraphQL and Flutter introduced a new style of software development when they were first released. GraphQL enabled developers to fetch data in their desired shape and format. Flutter made it possible to build a mobile app in one language and cross-compile it for other platforms.

GraphQL is used by thousands of companies today. It has other benefits that make it a go-to choice, including:

• Built-in caching and batching mechanism
• Single endpoint structure (so you don’t have to deal with multiple API/endpoints)
• Built-in pagination methods

GraphQL is a backend technology while Flutter is a frontend SDK that is used to build mobile apps. With mobile apps, we fetch the data displayed on the mobile app from a backend. Since GraphQL is a backend we can make our Flutter fetch data from a GraphQL backend.

WHAT IS QUERY IN GRAPH QL:

GraphQL is like a buffet dinner, where the users can take any item as per their need and exclude others.

GraphQL is a query language for APIs. GraphQL provides an understandable and complete description of the data in your API and provides the client the power to ask and get the data exactly they need, and nothing more.

For example, we have the following table in our database.

Continents {
    name
   code
    countries{
      name
    }
  }       


query {
  continents {
    name
   code
  }
}



Here we are telling the server that we only need the name and code from Continent table.
It serves us exactly what we need.


Query(
          options: QueryOptions(
              document: gql(query),
              variables: const <String, dynamic>{"code": "AF"}),
          builder: (result, {fetchMore, refetch}) {
            if (result.isLoading) {
              return const Center(
                child: CircularProgressIndicator(),
              );
            }
            if (result.data == null) {
              return const Center(
                child: Text("Data Not Found!!!"),
              );
            }
            return ListView.builder(
                itemCount: result.data!['continent']['countries'].length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(
                      result.data!['continent']['countries'][index]["name"],
                    ),
                    subtitle: Text(
                        result.data!['continent']['countries'][index]["code"]),
                  );
                });
          }),