💽

【Flutter/Dart】GraphQL

2022/04/29に公開

Flutter

概要

一般的にはRestAPIとの通信でモバイル端末とのデータのやり取りを行うことが多いが
今回は、GraphQLを使ったバックエンドとの通信をやってみた。

GraphQLについて

まぁ、だいたいこれを見たらわかるだろう。

Selec文をAPIみたいな感じで呼べる

# Request
## GraphQL
{
  hero {
    name
  }
}

## SQLでいうと
select name from hero;

# Response
## GraphQL
{
  "data": {
    "hero": {
      "name": "R2-D2"
    }
  }
}
## SQLでいうと
| name |
| --- |
| R2-D2 |

Select whereみたいな感じだと

# Request
## GraphQL
{
  human(id: "1000") {
    name
    height
  }
}
## SQLでいうと
select name,height 
from human
where id = '1000';

# Respont
同じような感じなので割愛

他にも、エイリアス（sql の　as）とかバインド変数みたいなやつとかSQLでできることはだいたいできるみたいだ。

GraphQL Flutter

まずはいつものようにflutter pub getでこいつを導入しよう

graphql.dart

import 'package:graphql/client.dart';
import 'package:rick_and_morty/model/characeter/character_results_model.dart';

class GraphQl {
  GraphQLClient getRickAndMortyApiClient() {
    final Link _link = HttpLink(
      'https://rickandmortyapi.com/graphql',
    );

    return GraphQLClient(
      cache: GraphQLCache(),
      link: _link,
    );
  }

  Future<CharacterResults?> readRepositories(String filter) async {
    try {
      final GraphQLClient _client = getRickAndMortyApiClient();

      final QueryOptions options = QueryOptions(
        // ReadCharactersのファンクション見たいのを作って$queryをバインドする
	document: gql(
          r'''
          query ReadCharacters($query: String!) {
            characters(filter: {name: $query}) {
              info {
                count
              }
              results {
                name
                image
                status
                species
              }
            }
          }
        ''',
        ),
	// ここでバインド変数の値を指定
        variables: {
          'query': filter,
        },
      );
      
      // あとはAPIの処理と同様にJsonが返却されるのでそれをdartようにパースする
      final QueryResult response = await _client.query(options);
      final result = response.data;
      if (result != null) {
        return CharacterResults.fromJson(result["characters"]);
      }
      return null;
    } catch (e) {
      throw Exception("$e");
    }
  }
}

※今回使った見本の GraphQl

このアニメキャラ一覧のGraphQl

あとは色々試してほしい

概要

GraphQLについて

GraphQL Flutter

Discussion