Kraman says GraphQL can reduce mobile data use because apps request only the fields they need. Its typed schema can also help engineers understand an API even when documentation is missing. A GraphQL client adds caching and can make offline support easier to build.
GraphQL And React Native - The urql Edition
Speaker
Kadi Kraman, an engineering manager at Formidable, discusses using GraphQL with React Native and compares urql with Apollo Client at React Native EU 2020.
Kraman shows how to create an urql client with a GraphQL endpoint and provide it to the app. She compares its `useQuery` hook with Apollo’s: urql parses query strings under the hood and returns a response plus a re-execute function, while Apollo uses a `gql` tag and returns an object.
urql exchanges transform operations in a stream; its defaults deduplicate requests, cache results, and send operations with `fetch`. Kraman’s React Native auth exchange had to account for asynchronous token storage, and she describes holding queries until the token is available. She also explains urql’s cache request policies and how Graphcache can update records after mutations using their type and ID.
Kraman describes Apollo cache persistence as possible but fiddly, and says urql’s Graphcache offline support was in beta at the time. urql DevTools support React Native and let developers inspect requests and cache data, review query and mutation timelines, and run queries through the client’s configured exchanges.
Kraman says Apollo had been reliable in her projects, but urql became her preferred choice, mainly because Graphcache updates mutation results automatically and avoids many manual update queries. She also values urql’s extensibility and the maintainers’ fast, candid issue support.
Takeaways
- Request only the GraphQL fields a mobile screen needs to reduce payloads.
- Use the schema as a typed reference when API documentation is incomplete.
- Account for asynchronous token storage when building authentication for React Native.
- Graphcache can reduce manual cache work when mutation results include the changed fields and entity IDs.
- Inspect the client’s exchanges and cache with urql DevTools while debugging.
Mentioned in this talk
Search inside this talk
What was claimed 11
- role atKadi Kraman is engineering manager at Formidable
“I'm a senior React Native engineer at Formidable.”
0:05inSecurity And Authentication In React NativeYouTube Verified2 sources· Talk
- builtFormidable built urql
“The library I'm going to be talking quite a bit about today is actually part of Formidable's open source work.”
YouTube Unverified1 source· Talk
- built
“Relay is the original GraphQL client ... and it's built and maintained by Facebook.”
YouTube Unverified1 source· Talk
- featureurql: Supports React, Preact, Svelte, and React Native
“it supports React, Preact, and Svelte ... I can also attest that it supports React Native.”
YouTube Unverified1 source· Talk
- featureurql: Uses exchanges to make its client extensible
“to be incredibly flexible and extensible, and you can opt in and out of each part of the ecosystem.”
YouTube Unverified1 source· Talk
- usesurql uses urql exchanges
“A series of operations that transform the input stream to the output stream.”
YouTube Unverified1 source· Talk
- integrates withurql exchanges integrates with Apollo Link
“they're quite similar to Apollo Link”
YouTube Unverified1 source· Talk
- usesurql uses Graphcache
“With Graphcache, the cache is automatically updated with the mutation results.”
YouTube Unverified1 source· Talk
- featureGraphcache: Automatically updates cached data from mutation results using type names and IDs or key fields
“The cache is automatically updated with the mutation results.”
YouTube Unverified1 source· Talk
- featureGraphcache: Offline support, described as currently in beta
“With urql and Graphcache, there is actually offline support. I think it’s currently in beta”
YouTube Unverified1 source· Talk
- featureReact DevTools: React Native support; can inspect requests and cache, execute queries, and view query and mutation events
“urql DevTools have full React Native support, and it’s awesome. You can see network requests, inspect the cache, and execute queries”
YouTube Unverified1 source· Talk
