Hi! Recent times I’m investigating Flutter to suit our production needs. One of technologies that we use is GraphQL for fetching data from our API. To have a deep understanding of the whole range of flutter pros and cons I’m writing the same app using Flutter as my teammate on ReactNative. I’ve already tested Flutter capabilities in markup, navigation and animation — the results are very promising. As far as I’m experimenting in my free time I was able to achieve the same results as ReactNative counterpart in 1/3 of the time. And now it’s time to test GraphQL.
Nearly 6 month ago when I started experimenting with GraphQL in the Flutter ecosystem there was no suitable toolset for my purposes. The main available library,
graphql_flutter, was only 1 year old. There were some features missing like,
fetchMore and some others. The counterpart package for type generation was even younger — 3 month old. There was also a lack of documentation and examples.
Recently I returned back to the GraphQL field and I succeeded to find a pretty good set of tools to work with GraphQL in Flutter. I decided to share my solution because there is still a lack of docs.
This article is mainly based on Android Studio (all JetBrains products also work pretty well). Actually, there is only one plugin that does not work for VSCode, but I think you’ll be able to find a proper replacement for it.
Let’s start from the beginning — if you are not familiar with Flutter or GraphQL here is a little list of links:
- official docs Flutter — https://flutter.dev/docs
- Flutter benefits — https://medium.com/hackernoon/whats-revolutionary-about-flutter-946915b09514
- GraphQL docs — https://graphql.org/
Let’s start from what we want to achieve:
- generate dart types and classes which covers GraphQL API queries
- local schema update in one click
- autocomplete and validation of GraphQL queries
- have an ability to work with API without waiting of backend implementation
Here what we will need for this:
- Android Studio (or any other suitable IDE from JetBrains) — https://developer.android.com/studio or https://www.jetbrains.com/
- install Flutter https://flutter.dev/docs/get-started/install
- properly setup IDE https://flutter.dev/docs/get-started/editor?tab=androidstudio
- install JS Graphql for Android Studio https://jimkyndemeyer.github.io/js-graphql-intellij-plugin/docs/getting-started
- install NodeJs https://nodejs.org/en/
Create new Flutter project
File -> New -> New Flutter Project
In opened window select — Flutter Application
Press “Next” several times until the end and then press “Finish”
More extended version of creating the initial project can be found in the “Test Drive” section in official docs — https://flutter.dev/docs/get-started/test-drive?tab=androidstudio
Now we have a dummy app for our experiments.
npm install -g graphql-fakeror
yarn global add graphql-faker
Let’s start it from terminal
graphql-faker ./fake.schema — open
This will launch a GraphQL server for you and open a web console for editing API.
./fake.schema param sets the file name which will be taken as a base for API mocking. As far as we do not have this file in our project root there will be a default schema mock shipped with graphql_faker
Let’s try to add something — after line 20 add the following
id: ID! @fake(type: uuid) and press a “Save” button.
If you return to the project structure you will see the new file
fake.schema with the initial schema itself including all your changes. It will be useful to start server later or share between team mates.
graphql_faker will be useful if you want to make quick experiments with API, to play around with schema design, or to implement most of the UI features without being blocked by backend implementation. You can even extend an existing API with custom queries. More cases could be found in
readme — https://github.com/APIs-guru/graphql-faker
.graphqlconfig in project root with the next contents:
Save your changes and move to the “GraphQL” tab, double click on “Default” and select “Get Graph schema from Endpoint”
This will create new file in project root —
my.schema.json and fetch you API schema into.
JS GraphQL Plugin helps control errors and typos in queries. Also provides excellent code competition. It’s easy to check — create graphql folder inside the project root with an employee_data.graphql file inside. Try to type the next query by yourself to see the code completion in action.
Move back to the
graphql_faker editor(http://localhost:9002/editor/) and change the
first_name1, press save and refresh the local schema — you’ll see the highlighted errors inside the file.
We will need two main packages —
graphql_flutter for working with GraphQL endpoints and
artemis for type generation.
Add next lines to your
Run `flutter packages get` in the terminal.
We will start from
artemis setup (full manual available here — https://github.com/comigor/artemis)
Create file build.yaml in project root:
Launch type generation from terminal
pub run build_runner buildor
flutter pub run build_runner build
After 10–20 seconds there will be 2 files generated:
Get back to the
graphql_faker editor(http://localhost:9002/editor/) on line 31 we have predefined query
allCompanies let’s try to display them in
In the editor after line 14 add
id: ID! @fake(type: uuid) we will need this for correct caching.
Refresh local scheme.
Launch type generation one more time.
host function to substitute proper
localhost address depending on the platform
In the same file as before wrap the
MaterialApp widget with
body contents in
Restart the app and you’ll see something similar
A few more details:
Query widget passes the operation specified in the
documentNode parameter as a request to the GraphQL endpoint.
builder function has 3 standard parts
Response data in ListView
After finishing my experiments, I’m happy to find that there are a lot of positive changes in the GraphQL ecosystem for flutter. As a result we get a fully functioning and pretty stable approach to work with GraphQL using full power of types and autocompletion.
All code as a single project available here — https://github.com/artflutter/graphql_toolchain
Support projects mentioned in this article with a star, detailed bug report or PR.
Leave your favourite Dart libraries to work with GraphQL.
We are developing a local Flutter community in Ukraine «Art Flutter» — feel free to join.