How to Use GraphQL in Flutter

GraphQL is a powerful query language for APIs that allows clients to request data from a server in a single request. By using GraphQL in your Flutter app, you can easily retrieve data from your backend and use it to create a dynamic and interactive user experience. In this article, we’ll walk through the process of setting up GraphQL in a Flutter project and making API calls.

Prerequisites

Before you get started, you’ll need the following:

• A Flutter project.
• An API that supports GraphQL.
• A GraphQL client library.

Creating a Flutter Project

If you don’t already have a Flutter project, you can create one with the following command:

$ flutter create my_project

Installing GraphQL into Your Project

To add GraphQL to your project, you’ll need to install the graphql_flutter package. You can do this from your project’s pubspec.yaml file:

dependencies:
  graphql_flutter: ^3.0.0

Integrating GraphQL Client in Flutter

Once the package is installed, you’ll need to create a GraphQL client. You can do this by creating a GraphQLClient object and passing it your GraphQL API’s URL:

final HttpLink httpLink = HttpLink(
  uri: 'https://your-graphql-server.com/graphql',
);

final ValueNotifier<GraphQLClient> client = ValueNotifier(
  GraphQLClient(
    link: httpLink,
    cache: InMemoryCache(),
  ),
);

Creating a GraphQL Query in Flutter

Once the client is set up, you can start making GraphQL queries. To do this, you’ll need to define the query in your project’s queries.dart file. For example, the following query retrieves the user’s name and email address:

const String getUserQuery = r'''
  query getUser($id: ID!) {
    user(id: $id) {
      name
      email
    }
  }
''';

Making a GraphQL API Call in Flutter

Once the query is defined, you can make an API call by using the GraphQLClient object. Here’s an example of how you could use the getUserQuery query to make an API call:

final QueryResult result = await client.query(
  QueryOptions(
    documentNode: gql(getUserQuery),
    variables: {
      'id': '12345'
    }
  )
);

Creating a GraphQL Mutation in Flutter

You can also use GraphQL to make mutations, which allow you to create, update, or delete data on the server. To do this, you’ll need to define the mutation in your project’s mutations.dart file. For example, the following mutation creates a new user:

const String createUserMutation = r'''
  mutation createUser($name: String!, $email: String!) {
    createUser(name: $name, email: $email) {
      id
      name
      email
    }
  }
''';

To make the mutation, you can use the GraphQLClient object, just like you did for the query. Here’s an example of how you could use the createUserMutation mutation to make a mutation call:

final MutationOptions options = MutationOptions(
  documentNode: gql(createUserMutation),
  variables: {
    'name': 'John Doe',
    'email': '[email protected]',
  },
);

final QueryResult result = await client.mutate(options);

Conclusion

Using GraphQL in your Flutter app can make it easier to retrieve data from your backend and create a dynamic user experience. In this article, we’ve covered how to set up GraphQL in a Flutter project, create GraphQL queries and mutations, and make API calls. With this knowledge, you’ll be able to create powerful and interactive apps with GraphQL.