Relay ConceptsMaking all the pieces fit togetherSibelius Seraphini Sibelius Seraphini Abstraction Engineer
Relay Compiler
- compile your GraphQL fragments and operations
- better DX without compromising performance
- polyfill of arguments for GraphQL fragments
Relay Artifacts - Full static Query/Mutation/Subscription
Relay Environment
- Store + Network config
- Tell Relay how to store data
- Tell Relay how to fetch GraphQL operations
Relay Store
- configures how to cache data
- configures garbage collector strategy
Relay Network Layer
- configures how Relay will fetch GraphQL operations
- configures how Relay will handle subscriptions
Relay Network Layer - fetchQuery
- handle authentication on fetch Headers
- handle fetch with retries
- handle timeout
- handle unauthorized calls
- handle cache of queries (QueryResponseCache)
- can resolve many values (Observable)
Simple fetchQuery example
Simple subscription setup
usePreloadQuery
- use data that has already started loading–e.g. due to an event occurring, such as changing location”
- render-as-you-fetch pattern
Data Driven Components
- each components declares the data they need
- declarative data fetching
- data fetching that scales
useFragment
- declare component data requirements
- do not fetch data directly
usePaginationFragment
- autogenerate pagination query
- can paginate forward and backward
- great DX
useRefetchableFragment
- autogenerate refetch query
- let component execute a refetch query with different variables
useMutation
- prevent sending the same mutation twice
- optimistic updates
- cancel mutation when component unmounts
useSubscription
- update relay store in realtime
- can notify users of new events
3D - Data Driven Dependencies @match + @module
- GraphQL decide which components to preload