FlutterでGraphQLを扱う

Flutter Kaigi 2021 登壇資料
https://fortee.jp/flutterkaigi-2021/proposal/768e5a3e-15ba-4bf7-8944-293f382f7c04

Transcript

1. FlutterͰGraphQLΛѻ͏ FlutterKaigi2021 2021/11/29 HironobuIga(@iganin_dev)
2. GraphQL
3. Flutter + GraphQL
4. ࣗݾ঺հ • HironobuIga(@iganin_dev) • Software Engineer • iOS, Flutter, Android etc
5. ΞδΣϯμ • GraphQLͷ֓ཁ • FlutterͷGraphQL ΫϥΠΞϯτϥΠϒϥϦ • GraphqlϥΠϒϥϦʹ͍ͭͯ • gql_buildͰͷίʔυࣗಈੜ੒ • ϓϩδΣΫτߏ੒ྫ
6. GraphQLͷ֓ཁ
7. RESTful APIͷ໰୊ • Under Fetching • ಉҰը໘಺Ͱෳ਺ͷϦΫΤετ͕ൃੜ • ը໘ʹද͍ࣔͨ͠৘ใΑΓ1ϦΫΤετͰऔಘͰ͖Δ৘ใ͕গͳ͍ • Over Fetching • ϦΫΤετ಺ʹඞཁͷͳ͍৘ใؚ͕·Εͯ͠·͏ • API͔Βฦ٫͞ΕΔ৘ใͷྔ͕͋Β͔͡Ίܾ·͍ͬͯΔͨΊ
8. GraphQLͷϝϦοτ • Under FetchingΛ཈͑Δ͜ͱ͕Ͱ͖Δ • Over FetchingΛ཈͑Δ͜ͱ͕Ͱ͖Δ • ܕ৘ใΛ׆༻Ͱ͖Δ • ڧྗͳΩϟογϡػߏΛඋ͑ͨΫϥΠΞϯτΛ࢖༻Ͱ͖Δ • etc
9. GraphQLͷΩʔϫʔυ • Schema • Query, Mutation • Fragment • Cache
10. Schema • APIͰ࢖༻Ͱ͖Δܕ΍ૢ࡞ͷఆٛҰཡ • APIͷ࢓༷
11. ఆٛͰ͖Δܕ • εΧϥʔܕ • String, Int, Float, Boolean, ID • ಠࣗͷΧελϜεΧϥʔܕ΋ఆٛՄೳ • ΦϒδΣΫτܕ • ྻڍܕ(enum) • ഑ྻ
12. ఆٛͰ͖Δܕ • ϢχΦϯܕ • ෳ਺ͷܕͷ͏ͪҰͭΛฦ٫ • ΠϯλʔϑΣʔεܕ • ΠϯλʔϑΣʔεܕʹ४ڌͨ͠ܕ͕࣋ͭϑΟʔϧυΛఆٛ
13. Schema interface Person { name: String ! } type User implements Person { id: ID ! name: String ! } type Article { id: ID ! title: String ! } union Content = User |Articl e type Query { user(id: ID!): Use r } type Mutation { changeUserName(input: ChangeUserNameInput ) : ChangeUserNamePayload } Schemaͷαϯϓϧ
14. Query • σʔλͷऔಘૢ࡞ • REST APIʹ͓͚Δ GET ʹ૬౰
15. Queryͷಛ௃ 1 type User { id: ID ! name: String ! address: String ! } type Query { user(id: ID!): Use r } query GetUserA($id: ID!) { user(id: $id) { i d nam e } } query GetUserB($id: ID!) { user(id: $id) { i d nam e addres s } } ఆٛ͞Ε͍ͯΔฦ٫஋͔Β औಘ͢ΔσʔλΛબ୒Ͱ͖ Δ
16. Queryͷಛ௃ 2 type User {… } type Article {… } Query { user(id: ID!): User ! users(limit: Int, nextToken: String): [User!] ! articles(limit: Int, nextToken: String): [Article!] ! } query userPage ( $currentUserId: ID! , $userNextToken: String , $articleNextToken: Strin g ) { user(id: $currentUserId) {… } users(limit: 50, nextToken: $userNextToken) {… } articles(limit: 50, nextToken: $articleNextToken) {… } } ෳ਺ͷQueryΛ1ճͷquery Ͱ·ͱΊ࣮ͯߦ͢Δ͜ͱ͕ Ͱ͖Δ
17. Mutation • σʔλͷมߋૢ࡞ • REST APIʹ͓͚Δ PUT, POST, DELETEʹ૬౰
18. Mutationͷಛ௃ type User { … } type Mutation { changeUserName ( input: ChangeUserNameInpu t ): ChangeUserNamePayloa d } input ChangeUserNameInput { id: ID ! name: String ! } type ChangeUserNamePayload { id: ID ! name: String ! } mutation ChangeUserName($input: ChangeUserNameInput!) { changeUserName(input: $input) { nam e } } Ҿ਺͸inputܕͱͯ͠౉͢͜ ͱ͕ଟ͍
19. Fragment type User { id: ID ! name: String ! address: String ! } query SampleQueryA($userId: ID!) { user(id: $id) { i d nam e } articles { … } } query SampleQueryB($userId: ID!) { user(id: $id) { i d nam e } news { … } } ෳ਺ͷQuery, MutationͰಉ ༷ͷσʔλΛऔಘ͢Δ ɹɹɹɹɹ ຖճॻ͘ͷ͸खؒͱͳΔ
20. Fragment type User { id: ID ! name: String ! address: String ! } Fragment UserFragment on User { i d nam e } query SampleQueryA($userId: ID!) { user(id: $id) { …UserFragmen t } articles { … } } query SampleQueryB($userId: ID!) { user(id: $id) { …UserFragmen t } news { … } } FragmentͰ൓෮ͯ͠࢖͏ σʔλͷ·ͱ·ΓΛఆٛͰ ͖Δ
21. GraphQLͷϦΫΤετ • ಉҰΤϯυϙΠϯτ • ྫɿ https://sampledomain.com/graphql • POSTϝιου • REST API ΫϥΠΞϯτͰ΋࣮ߦՄೳ
22. GraphQL ϦΫΤετ curl \ -X POST \ -H "Content-Type: application/json" \ --data '{ "query": "{ country(code: \"JP\") { code name } } " }' \ https://countries.trevorblades.com/ { "data": { "country": { "code": "JP" , "name":"Japan " } } } REST API ΫϥΠΞϯτͷ POST௨৴Ͱ΋࣮ߦՄೳ Ҿ༻: https://countries.trevorblades.com/
23. REST APIͷΩϟογϡ • ϦΫΤετͷURL͕ΩϟογϡͷKeyͱͯ͠࢖ΘΕΔ͜ͱ͕ଟ͍ • GraphQLͷ৔߹ɺURLͷΤϯυϙΠϯτ͕શͯಉ͡ • GraphQLϦΫΤετͷΩϟογϡ͸গ͠ߦ͍ͮΒ͍ • ·ͨGraphQLͷܕ৘ใΛ༗ޮʹ׆͔͢ͷ΋೉͍͠
24. GraphQLΫϥΠΞϯτ • ΩϟογϡΛ༗ޮ׆༻͢ΔͨΊͷ࢓૊Έ • ੔උ͞ΕͨϦΫΤετͷ࢓૊Έ
25. GraphQLΫϥΠΞϯτͷΩϟογϡػߏ • ܕͱIDʹΑΔਖ਼نԽ͕ߦΘΕ͍ͯΔ • __typename:idΛΩʔͱͨ͠ Key ValueܗࣜͷCache • {“__typename:id”: Object }
26. Ωϟογϡ Query SampleQueryA { users { Results { __typenam e i d nam e } } } Query SampleQueryB { user(id: "1") { __typenam e I d nam e } } ಉҰͷܕͱIDͷσʔλͰ͋ Ε͹ɺผqueryͷ݁ՌͰ΋ಉ ҰͷCacheͱͯ͠อଘ͞Ε Δ
27. GraphQLΫϥΠΞϯτͷΩϟογϡػߏ • typename, id ʹΑΔਖ਼نԽ • ผϦΫΤετͰऔಘͨ݁͠ՌΛޮ཰తʹ׆༻Ͱ͖Δ • ࠷৽ͷঢ়ଶͷCacheΛऔಘͰ͖Δ
28. GraphQLͷ֓ཁ • GraphQLͷར఺ • Schema,Query, Mutation, Fragment • Cacheػߏ
29. FlutterͷGraphQL ΫϥΠΞϯτϥΠϒϥϦ
30. GraphQLΫϥΠΞϯτ͸ԿΛબͿʁ Apollo…?
31. Apollo Flutter͸ະରԠ
32. FlutterͷGraphQLΫϥΠΞϯτϥΠϒϥϦ • graphql_ fl utter(graphql) • artemis • ferry
33. GraphQLΫϥΠΞϯτͷݕ౼߲໨ • ΩϟογϡͳͲͷΫϥΠΞϯτػೳͷ๛෋͞ • ίʔυͷࣗಈੜ੒ͷ༗ແͱํ๏ • sound null safetyͷαϙʔτঢ়گ • ϝϯςφϯεঢ়گ • (UIίϯϙʔωϯτͷରԠ)
34. graphql_ fl utter(graphql)
35. graphql_ fl utter(graphql) • (͓ͦΒ͘)࠷΋༗໊ͳFlutterͷGraphQLΫϥΠΞϯτ • ΠϯϝϞϦ/ӬଓԽ Ωϟογϡͷαϙʔτ • ൺֱతࣄྫ͕๛෋ • ίʔυͷࣗಈੜ੒͸ະରԠ • ଞͷίʔυࣗಈੜ੒ϥΠϒϥϦͱ૊Έ߹ΘͤΔ͜ͱ͸Ͱ͖Δ
36. • ϞϊϨϙͰ؅ཧ͞Ε͍ͯΔ • graphql - GraphQLΫϥΠΞϯτ • graphql_ fl utter - ΫϥΠΞϯτ + Query, Mutation Widget • graphql, graphql_ fl utterͲͪΒ΋ sound null saferyରԠࡁΈ • graphql_ fl utter͸ରԠࡁΈͷϥϕϧ͕ͳ͍͕ɺpub outdated Ͱ֬ ೝ͢ΔͱରԠࡁΈͱͳ͍ͬͯΔ graphql_ fl utter(graphql)
37. graphql_ fl utter(graphql) • ΞΫςΟϒϝϯςφ͕ෆࡏͷঢ়گ • 📣 no active maintainer 📣 • https://github.com/zino-app/graphql- fl utter/issues/894 • apollo-clientʹͯҾ͖ܧ͗ґཔ͞Ε͕ͨɺҾ͖ܧ͗͞Εͣ • Take over existing fl utter GraphQL client • https://github.com/apollographql/apollo-client/issues/8332
38. artemis
39. artemis • ίʔυࣗಈੜ੒ػೳ͕ॆ࣮ • Releaseόʔδϣϯ͸null safetyະରԠ • ࠷৽ϦϦʔε 2021/2/18(11/19࣌఺) • Pre Release(Beta)͸null safetyରԠ • ࠷৽ϦϦʔε 2021/10/27(11/19࣌఺) • ։ൃ͸BetaϒϥϯνʹͯඇৗʹΞΫςΟϒ
40. artemis • Artemis Client • Cacheͷػߏ͕ͳ͍ • ػೳ͸ඇৗʹݶఆత • ௨৴ͷΈͳΒେৎ෉͕ͩɺCacheΛ׆༻͍ͨ͠৔߹͸ଞͷΫϥΠΞϯ τΛซ༻ͨ͠ํ͕ྑͦ͞͏
41. ferry
42. ferry • graphql_ fl utterͱಉ͘͡๛෋ͳΩϟογϡػೳ • ίʔυࣗಈੜ੒(ferry_generator) • null safetyରԠࡁΈ
43. ferry • graphql_ fl utterͱಉ༷ʹUIͰ؆୯ʹ࢖༻Ͱ͖Δferry_ fl utter • υΩϡϝϯτ͕ஸೡ • Client͔Βͷฦ٫஋͸Streamʹ౷Ұ • ։ൃ͸ΞΫςΟϒ
44. HSBQIRM@ fl VUUFS BSUFNJT GFSSZ ΫϥΠΞϯτػೳ ˓ ˚ ˓ ίʔυࣗಈੜ੒ ͳ͍ ˓ ˓ /VMM
    4BGFUZ ˓ ˓ ˞ ˓ ϝϯςφϯε ˚ ˓ ˓ ※ artemisͷnull safetyαϙʔτ͸ Pre Release ͷ Beta൛Ҏ߱Ͱ͋Δ͜ͱʹ஫ҙ
45. ϥΠϒϥϦͷબఆ(ࢲݟ) • ΫϥΠΞϯτϥΠϒϥϦͱͯ͠͸ferry͔graphql_ fl utter(graphql) • graphql_ fl utter(graphql)Λ࢖༻͢Δ৔߹ • ίʔυࣗಈੜ੒Λαϙʔτ͢ΔͳΒartemis΍gql_buildͳͲΛซ༻
46. graphqlϥΠϒϥϦʹ͍ͭͯ
47. Link • GraphQL ͷ௨৴෦෼ͷ࢓૊Έ • ϦΫΤετ΁ͷॲཧ - ೝূɺϩΪϯάͳͲ • Ϩεϙϯεͷॲཧ - ΤϥʔϋϯυϦϯάͳͲ 0QFSBUJPO -JOL -JOL 5FSNJOBM 
 -JOL 4FSWFS
48. Ωϟογϡ • ΞϓϦ͕ดͨ͡Βফ͑Δ In Memory Cache • ΞϓϦ͕ดͯ͡΋࢒Γଓ͚Δ Persistent Cache • DBͱͯ͠͸ Hive͕࢖༻͞Ε͍ͯΔ͜ͱ͕ଟ͍
49. Ωϟογϡͷਖ਼نԽ • ௨৴݁Ռ͸σϑΥϧτͰ͸ਖ਼نԽ͞Εͯอଘ • __typename:id ΛΩʔͱ͢Δ • { “ __trypename:id”: Object } 
 ͷKey ValueܗࣜͰอଘ͞Ε͍ͯΔ
50. GraphQLΫϥΠΞϯτͷॳظԽ • Linkͷ࡞੒ • ΫϥΠΞϯτͰ࢖༻͢ΔLinkΛఆٛ • Cacheͷઃఆ • In Memory Cache / Persistent Cache
51. ॳظԽ final httpLink = HttpLink ( 'https://api.github.com/graphql' , ) ; final authLink = AuthLink ( getToken: () async => 'Bearer $YOUR_PERSONAL_ACCESS_TOKEN' , ) ; final link = authLink.concat(httpLink) ; final store = await HiveStore.open(path: 'path') ; final GraphQLClient client = GraphQLClient ( cache: GraphQLCache(store: store) , link: link , ); ॳظԽίʔυαϯϓϧ
52. Operation • Operationͷܕ • Query: QueryOptions • Mutation: MutationOptions • Document - ࣮ߦ͢ΔQueryจ • Vars - OperationͷҾ਺ • Policy - Ωϟογϡ΍Τϥʔͷѻ͍
53. Fetch Policy • OperationΛͲͷΑ͏ʹߦ͏͔ • CacheΛ࢖༻͢Δ͔Ͳ͏͔ • Ϩεϙϯε݁ՌΛCacheʹ֨ೲ͢Δ͔ • CacheͷΈ͔௨৴΋ߦ͏͔
54. Operation const readRepositories = r'' ' query ReadRepositories($nRepositories: Int!) { viewer { repositories(last: $nRepositories) { nodes { __typenam e i d nam e } } } } ''' ; final QueryOptions options = QueryOptions ( document: gql(readRepositories) , variables: <String, dynamic> { 'nRepositories': nRepositories , } , fetchPolicy: FetchPolicy.cacheFirst , ) ; final QueryResult result = await client.query(options); documentΛੜ੒ QueryOptionsੜ੒ Client͔ΒϦΫΤετ
55. graphqlΫϥΠΞϯτ • Link • Cache • Operation • Fetch Policy
56. gql_buildͰͷίʔυࣗಈੜ੒
57. ίʔυࣗಈੜ੒Λ͠ͳ͍৔߹ • QueryΛStringͰ࡞੒ • gqlΛ༻͍ͯQuery StringΛASTʹม׵ • QueryOptions, MutationOptionsʹ࢖༻
58. ίʔυࣗಈੜ੒ ͠ͳ͍৔߹ const readRepositories = r'' ' query ReadRepositories($nRepositories: Int!) { viewer { repositories(last: $nRepositories) { nodes { __typenam e i d nam e } } } } ''' ; final QueryOptions options = QueryOptions ( document: gql(readRepositories) , variables: <String, dynamic> { 'nRepositories': nRepositories , } , fetchPolicy: FetchPolicy.cacheFirst , ) ; final QueryResult result = await client.query(options) ; String෦෼Ͱิ׬͕ޮ͔ͳ͍ Ҿ਺͕ࣗಈิ׬͞Εͳ͍ ResponseΛύʔε͢ΔܕΛ ࣗ෼Ͱ࡞੒͢Δඞཁ͕͋Δ
59. gql_build • graphqlϑΝΠϧ͔ΒίʔυΛࣗಈੜ੒ • Query, Mutation, Fragment • ΧελϜεΧϥʔ࢖༻Մೳ
60. gql_buildͰͷίʔυࣗಈੜ੒ • SchemaΛ഑ஔ • graphqlϑΝΠϧΛ࡞੒ɾ഑ஔ • build.yamlϑΝΠϧΛ࡞੒ɾฤू • build_runnerͰͷ࣮ߦ
61. ίʔυࣗಈੜ੒ͰͷTips • Schemaͷऔಘ • get-graphql-schema ϥΠϒϥϦΛ࢖༻͢Δ • Fragmentར༻࣌ͷ஫ҙ఺ • ར༻͢ΔϑΝΠϧͰImportจΛॻ͘ඞཁ͕͋Δ • # import ‘fragment/sample/sample.fragment.graphql’
62. ࣗಈੜ੒͞Εͨ ίʔυͷར༻ྫ final getUserQuery = GGetUserReq((builder) => builde r ..vars.id = userI d ) ; final queryOptions = QueryOptions ( document: getUserQuery.operation.document , variables: getUserQuery.vars.toJson() , fetchPolicy: FetchPolicy.cacheFirst , ) ; final data = await gqlClient.query(queryOptions) ; final user = GGetUserData.fromJson(data);
63. ࣗಈੜ੒͞Εͨίʔυͷར༻ • query͔ΒΫϥεΛࣗಈੜ੒ • Ҿ਺ʹܕΛ෇༩Ͱ͖Δ -> queryจͱͷ૬ҧͷൃੜΛආ͚ΒΕΔ • ϨεϙϯεΛࣗಈੜ੒͞ΕͨΫϥεʹύʔεͰ͖Δ
64. ίʔυࣗಈੜ੒ • gql_buildͷ؆୯ͳ࢖͍ํ • ίʔυࣗಈੜ੒ʹؔ͢ΔTips • ࣗಈੜ੒͞Εͨίʔυͷ࢖༻
65. Projectߏ੒Ҋ
66. Projectߏ੒ Fragment Colocation ※·ͩ͜ͷํ๏Ͱ͸ϓϩμΫτ։ൃͰ͖͍ͯ·ͤΜ
67. αϯϓϧϓϩδΣΫτ https://github.com/HironobuIga/ graphql_sample_kaigi_2021
68. Fragment Colocation • UIίϯϙʔωϯτʹඞཁͳ৘ใΛFragmentͱͯ͠1ର1Ͱఆٛ͢Δ • એݴతUI ʹରԠͨ͠ એݴతσʔλϑΣονϯά
69. Fragment Colocation query TopScreenQuery($searchWord: String!) { items(searchWord: $searchWord) { …HeaderFragmen t items { …ItemFragmen t } …FooterFragmen t } } fragment HeaderFragment on Result { searchWor d } Fragment ItemFragment on Item { nam e imageUr l } Fragment FooterFragment on ItemsResult { coun t totalItemCount } Fragment Colocationͷྫ Header, List, Footer ͕͋ΔΑ͏ͳը໘
70. Fragment Colocationͷར఺ • Over FetchingΛ཈੍͠΍͍͢ • UIίϯϙʔωϯτʹඞཁͳσʔλͷΈΛऔಘͰ͖Δ • Under FetchingΛ཈੍͠΍͍͢ • 1ը໘ʹඞཁͳ৘ใΛqueryͰ·ͱΊͯऔಘͰ͖Δ • UI΍σʔλऔಘͷमਖ਼͕ߦ͍΍͍͢
71. ࢖༻͢ΔϥΠϒϥϦҊ • Ferry • ίʔυͷࣗಈੜ੒ • ϨεϙϯεσʔλΛࣗಈతʹࣗಈੜ੒ͨ͠Ϋϥε΁ม׵ • ferry_ fl utterʹΑΔUIͰͷGraphQLͷ؆қతͳར༻ • ฦ٫஋͕streamʹ౷Ұ͞Ε͍ͯΔͷͰɺReactiveͳ൓ө͕༰қ
72. Riverpodͱ૊Έ߹ΘͤΔ • ClientͷDIʹ࢖༻͢Δ • MockՄೳͳΑ͏ʹ͢ΔͨΊʹϦιʔεऔಘछผ͝ͱʹϨΠϠʔΛઃ ͚Δ • Query • Mutation
73. DI Provider clientProvider = Provider<Client>((_) { throw Exception() ; }) ; void main() async { runApp(child: CircularProgressIndicator()) ; final client = await initClient() ; runApp ( ProviderScope ( overrides: [ clientProvider.overrideWithValue(client ) ] , child: App() , ) , ) ; } ӬଓԽΩϟογϡHiveStore ͷॳظԽ͸ඇಉظॲཧ ͜ͷ৔߹ProviderScopeͰ Override͢Δͷ͕͓͢͢Ί
74. DI class ItemListScreen extends ConsumerWidget { @overrid e Widget build(BuildContext context, WidgetRef ref) { final client = ref.watch(clientProvider) ; return Scaffold ( appBar: AppBar ( title: Text(‘all items’) , ) , body: Container() , ) , ) ; } ࢖༻͢Δࡍ͸௨ৗͱಉ༷
75. Query class SampleChangeNotifier extends ChangeNotifier { SampleChangeNotifier(this._read, this.id) { _load() ; } final Reader _read ; final String id ; late final client = _read(clientProvider) ; AsyncValue<GSampleData> _sampleData = AsyncValue.loading() ; AsyncValue<GSampleData> get sampleData => _sampleData ; StreamSubscription? subscription ; Future<void> _load() async { final request =GSampleDataReq ( (builder) => builde r ..vars.id = i d ) ; subscription = client.request(request).listen((event) { if (event.hasErrors) { final error = _parseError() ; _sampleData = AsyncValue.error(error) ; } else { _sampleData = AsyncValue.data(event.data!) ; } notifyListeners() ; }) ; } void reLoad() { _sampleData = AsyncValue.loading() ; final request = GSampleDataReq ( (builder) => builde r ..vars.id = i d ..fetchPolicy = FetchPolicy.CacheFirs t ) ; client.requestController.add(request) ; } ~~~~~~ ~ } ChangeNoti fi erΛ࢖༻ AsnycValueʹΑͬͯσʔλ ࣗମʹ௨৴ঢ়ଶΛ࣋ͨͤΔ
76. Query UI class ListScreen extends ConsumerWidget { @overrid e Widget build(BuildContext context, WidgetRef ref) { final data = ref.watch ( sampleChangeNotifierProvide r ).sampleData ; return Scaffold ( body: data.when ( data: (data) => DataView(data: data) , loading: () => Center ( child: CircularProgressIndicator( ) ) , error: (context, error) => ErrorView() , ) ) ; } }
77. Mutation class SampleMutationChangeNotifier extends ChangeNotifier { SampleMutationChangeNotifier(this._read) ; final Reader _read ; late final client = _read(clientProvider) ; AsyncValue<void> _status = AsyncValue.data(null) ; AsyncValue<void> get status => _status ; final _requestId = "SampleMutation" ; Future<void> doSomething({required String id}) async { final request = GAddStarReq((builder) => builde r ..vars.input.id = i d ..requestId = _requestI d ) ; _status = AsyncValue.loading() ; notifyListeners() ; final result = await client.request(request).first ; if (result.hasErrors) { final error = _parseError() ; _status = AsyncValue.error(error) ; } else { _status = AsyncValue.data(null) ; } notifyListeners() ; } } Mutationͷૢ࡞΋Provider ଆʹهड़͢Δ͜ͱ͕Ͱ͖Δ มߋ͸ࣗಈతʹUIʹ൓ө͞ ΕΔ
78. ϑΥϧμߏ੒ li b networ k clien t graphql_clien t mutatio n sample_mutatio n sample_mutation_provider.dar t graphq l sample_mutation.graphq l scree n sample_scree n sample_screen_query_provider.dar t sample_screen.dar t graphq l screen.graphq l vie w sample_vie w … componen t sample_componen t … network, mutation screen, view provider (ΞϓϦ಺ঢ়ଶ)
79. ϓϩδΣΫτߏ੒ • Fragment Colocationʹैͬͨߏ੒ʹ͢Δ͜ͱͰGraphQLͷϝϦοτ ΛڗडͰ͖Δ • RiverpodͰDI΍MockՄೳͳߏ੒ʹͰ͖Δ
80. ·ͱΊ
81. ·ͱΊ • GraphQLͷ֓ཁ • ಛ௃ɺར఺ɺGraphQLΫϥΠΞϯτΛ࢖͏ϝϦοτ • FlutterͷGraphQLΫϥΠΞϯτϥΠϒϥϦͷ֬ೝɾൺֱ • graphqlϥΠϒϥϦɺgql_buildͰͷίʔυࣗಈੜ੒ • Projectߏ੒
82. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠