FlutterでGraphQL のuseQueryを使う

Flutter Tokyo #5 登壇資料

Transcript

1. FlutterͰGraphQL ͷuseQueryΛ࢖͏ ҏլɹ༟ల 2024/11/14 Flutter Tokyo #5
2. React.jsͱGraphQL ͷ૊Έ߹ΘͤͰΈ͔͚Δίʔυ
3. React.js GraphQL const GET_SAMPLE = gql` query GetSample($id: ID!) { sample(id: $id) { id name } } `; function SampleView({ id }: { id: string }) { const { loading, error, data } = useQuery(GET_SAMPLE, { variables: { id }, }); if (loading) return <p>ಡΈࠐΈத...</p>; if (error) return <p>Τϥʔ͕ൃੜ͠·ͨ͠: {error.message}</p>; return <p>{data?.sample?.name}</p>; } export default SampleView;
4. React.js GraphQL const GET_SAMPLE = gql` query GetSample($id: ID!) { sample(id: $id) { id name } } `; function SampleView({ id }: { id: string }) { const { loading, error, data } = useQuery(GET_SAMPLE, { variables: { id }, }); if (loading) return <p>ಡΈࠐΈத...</p>; if (error) return <p>Τϥʔ͕ൃੜ͠·ͨ͠: {error.message}</p>; return <p>{data?.sample?.name}</p>; } export default SampleView;
5. GraphQLͷuseQuery • GraphQL༻ͷReact Hook • ΫΤϦͷ࣮ߦͱঢ়ଶ؅ཧ͕؆୯ʹߦ͑Δ • σʔλऔಘத΍Τϥʔൃੜ࣌ͷॲཧΛ؆୯ʹ؅ཧͰ͖Δ • ΫΤϦͷมߋ΍σʔλߋ৽͕ଈ࠲ʹ൓ө͞ΕɺϦΞΫςΟϒͳUI͕࣮ ݱͰ͖Δ
6. GraphQLͷuseQueryΛ FlutterͰ΋࢖͍͍ͨ
7. Ͱ͖·͢ʂ
8. ࠓճͷલఏͳͲͳͲ
9. Flutter x GraphQL
10. Options • graphql_ fl utter • ferry • Artemis
11. Options • graphql_ fl utter • ferry • Artemis => Archived
12. Options • graphql_ fl utter • ferry • Artemis => Archived
13. ίʔυࣗಈੜ੒
14. graphql_ fl utterͷίʔυࣗಈੜ੒ • graphql_codegen • graphql_ fl utterͷREADMEʹ΋هࡌ͋Γ • ͜ͷϥΠϒϥϦ͕ے͕ྑͦ͞͏
15. graphql_ fl utter graphql_codegen fl utter_hooks
16. graphql_codegen x hooks • graphql_ fl utter READMEͷgraphql_codegenʹؔ͢Δهࡌ • This package generate hooks and options which takes away the struggle of serialization and gives you con fi dence through type- safety. • graphql_codegen READMEͷهࡌ • fl utter_hooks (optional) to use generated operations hooks. Will be inside HookWidgets
17. garphql_codegen͸ useQueryͷίʔυ΋ੜ੒ͯ͘͠ΕΔ
18. ྫ
19. Schema type Query { sample(id: ID!): Sample! } type Sample { id: ID! name: String! }
20. Query query Sample($id: ID!) { sample(id: $id) { __typename id name } } sample.graphqlͷϑΝΠϧ໊Ͱ࡞੒
21. graphql_codegen ͷੜ੒෺ sample.graphql.dart ͷ໋໊ͰϑΝΠϧ͕ੜ੒͞ΕΔ ίʔυ͕ͨ͘͞Μ͋Γ·͕͢ɺΑ͘ݟ͍ͯ͘ͱҎԼͷίʔυ͕ݟ͔ͭΓ·͢ graphql_flutter.QueryHookResult<Query$Sample> useQuery$Sample([Options$Query$Sample? options]) => graphql_flutter.useQuery(options ?? Options$Query$Sample()); class Options$Query$Sample extends graphql.QueryOptions<Query$Sample>
22. ੜ੒෺ • useQuery${Query໊} ͰuseQueryͷϝιου͕ੜ੒͞Ε·͢ • ϝιουͷҾ਺ͷܕ Options$Query${Query໊}
23. ࢖ͬͯΈΔ class SamplePage extends HookWidget { const SamplePage({super.key}); @override Widget build(BuildContext context) { final query = useQuery$Sample( Options$Query$Sample( fetchPolicy: FetchPolicy.cacheAndNetwork, variables: Variables$Query$Sample(id: '1'), ), ); if (query.result.isLoading) { return const Scaffold(body: CircularProgressIndicator()); } if (query.result.hasException) { return const Scaffold(body: Text('error')); } return Scaffold(body: Text(query.result.parsedData?.sample.name ?? 'Sample')); } }
24. ࢖ͬͯΈΔ class SamplePage extends HookWidget { … … @override Widget build(BuildContext context) { final query = useQuery$Sample( Options$Query$Sample( fetchPolicy: FetchPolicy.cacheAndNetwork, variables: Variables$Query$Sample(id: '1'), ), ); … … } } HookWidgetͰ࢖༻ buildϝιου಺Ͱ useQueryΛ࢖༻͢Δ FetchPolicy΋࢖͑Δ
25. ࢖ͬͯΈΔ class SamplePage extends HookWidget { … @override Widget build(BuildContext context) { final query = useQuery$Sample( ……… ); if (query.result.isLoading) { return const Scaffold( body: CircularProgressIndicator()); } if (query.result.hasException) { return const Scaffold(body: Text('error')); } return Scaffold( body: Text(query.result.parsedData?.sample.name ?? 'Sample')); } } query͔Βloadingத Τϥʔ͔Ͳ͏͔ औಘ݁Ռ ͕औΕ·͢
26. ൺֱ
27. function SampleView() { const { loading, error, data } = useQuery(GET_SAMPLE, { variables: { “1” }, }); if (loading) return <p>ಡΈࠐΈத...</p>; if (error) return <p>Τϥʔ</p>; return <p>{data?.sample?.name}</p>; } export default SampleView; class SamplePage extends HookWidget { const SamplePage({super.key}); @override Widget build(BuildContext context) { final query = useQuery$Sample( Options$Query$Sample( variables: Variables$Query$Sample(id: '1'), ), ); if (query.result.isLoading) { return const Text(‘ಡΈࠐΈத’); } if (query.result.hasException) { return const Text(‘Τϥʔ'); } return Text(query.result.parsedData?.sample.name ?? ''); } } React Flutter
28. ͍͍ײ͡ʂ
29. Demo༻ΞϓϦ https://github.com/HironobuIga/ FlutterUseQuerySample
30. FlutterͰ΋GraphQLͷ useQuery͕࢖͑Δʂ
31. Thank you for listening!