Flutter-GraphQL-Example

A simple demo shows basic usage of combination of Flutter & GraphQL.

Article

[WIP] 在 Flutter 中使用 GraphQL

Notice

To solve 'Insecure HTTP is not allowed by platform' Error, You will need to do these things:

For Android:

• Create /res/xml/network_security_config.xml.
• Edit AndroidManifest.xml.

<!-- network_security_config.xml -->
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true" />
</network-security-config>

<!-- AndroidManifest.xml -->
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.flutter_graphql_example">
   <application
        android:networkSecurityConfig="@xml/network_security_config">
    <!-- ... -->
    </application>
</manifest>

For IOS:

• Add NSExceptionDomains( NSExceptionAllowsInsecureHTTPLoads ) to Info.plist in /ios/Runner/Info.plist folder.

Above actions are required so that we can use HTTP instead of HTTPS request in Emulator Device, see here for more details about.

Prerequisites

Make sure you've already finished required environment setup, including:

• nodejs
• flutter & dart
• Android/IOS Emulator

Usage

• Declarative Usage: ToDo List

git clone git@github.com:linbudu599/flutter_graphql_example.git

cd flutter_graphql_example

Server

cd ./server

npm install

npm run dev

Powered by Koa-GraphQL & LowDB

Edit todo.ts to use the content you like.

As server gets ready, you can visit

• http://localhost:4000/graphql

to check your GraphQL Server easily by GraphiQL, which contains definition of Query / Mutation info.

Client

dart pub get
flutter run .\lib\main.dart

Powered by graphql-flutter package