In this post, I will explain how to set up GraphQL tools to generate Dart classes, this method work for Flutter or any Dart project.

# Project setup

### Dependencies

# /pubspec.yaml
dev_dependencies:
build_runner: ">=1.0.0 <2.0.0"


Add your schema file in /lib/schema.graphql.

To follow up with the same examples used in this tutorial, get the schema from here.

### Setup build tools

In the root directory create a new file /build.yaml, and add the following code.

# /build.yaml
targets:
$default: builders: gql_build|schema_builder: enabled: true gql_build|ast_builder: enabled: true gql_build|data_builder: enabled: true options: schema: app_package_name|lib/schema.graphql gql_build|var_builder: enabled: true options: schema: app_package_name|lib/schema.graphql gql_build|serializer_builder: enabled: true options: schema: app_package_name|lib/schema.graphql  ### Write your queries/mutations You can place your queries/mutations files in any directory according to the app structure, I will put it in /lib/graphql. Let’s write a simple query, a simple mutation, and a fragment. Note how we import fragments as comments. # /lib/graphql/user_fragment.graphql fragment UserFragment on User { id name username email }  # /lib/graphql/get_users.graphql #import "user_fragment.graphql" query GetUsers { users { data { ...UserFragment } } }  # /lib/graphql/update_user.graphql #import "user_fragment.graphql" mutation UpdateUser($id: ID!, $input: UpdateUserInput!) { updateUser(id:$id, input: \$input) {
...UserFragment
}
}


### Build

Run the command flutter pub run build_runner build --delete-conflicting-outputs to generate Dart classes. The command wil take a minute, and you will see few new files in the /lib and /lib/graphql directories.

Do not worry about the content of the generated files, In the next blog post I will go through how to use theme.

### FAQ

1. Should I commit the generated files?
2. NO, I mean YES. It’s up to you; but the common practice is to ignore the generated files.

3. Do I have to run the build command evey time I change my graphql files?

4. YES, or use the watch command like this flutter pub run build_runner watch --delete-conflicting-outputs.

5. CanI see full project?

6. Sure, it’s on my GitHub.