Add urql to a React Native Project and Fetch Data With the useQuery Hook

Share this video with your friends

Send Tweet

Start with a plain React Native app initialised using the React Native TypeScript template.

We will install and configure urql, use urql's useQuery hook to fetch all stories from the locally running graphQL API, and render them in a FlatList.

Resources:

  • React Native TypeScript template: https://reactnative.dev/docs/typescript
  • urql docs: https://formidable.com/open-source/urql/docs/

Android:

  • run the app with yarn android
  • use http://10.0.2.2:3000/graphql instead of http://localhost:3000/graphql for the API endpoint

Checkpoint: