【Flutter/Dart】GraphQL
11302 ワード
概要
一般的には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
あとは色々試してほしい
Author And Source
この問題について(【Flutter/Dart】GraphQL), 我々は、より多くの情報をここで見つけました https://zenn.dev/tomofyro/articles/4796bdb72e3366著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol