React Native

WunderGraph has official support for React Native. You can use the WunderGraph TypeScript client or SWR package to consume WunderGraph APIs in React Native.

Important

Package exports

React Native doesn't support the new Node.js exports field yet. Add this configuration in metro.config.js to rewrite the paths and make sure WunderGraph is imported correctly.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require('expo/metro-config')


const config = getDefaultConfig(__dirname)


module.exports = {
  ...config,
  resolver: {
    ...config.resolver,
    resolveRequest: (context, moduleName, platform) => {
      // React Native doesn't support exports field in package.json, so we resolve it manually.
      if (moduleName.startsWith('@wundergraph/sdk/client')) {
        return context.resolveRequest(
          context,
          '@wundergraph/sdk/dist/client',
          platform
        )
      }


      if (moduleName.startsWith('@wundergraph/sdk/internal')) {
        return context.resolveRequest(
          context,
          '@wundergraph/sdk/dist/internal',
          platform
        )
      }


      return context.resolveRequest(context, moduleName, platform)
    },
  },
}

Fetch Api

React Native doesn't fully support the fetch api and therefor isn't fully compatible with our TypeScript client at the moment. To get around this, you can install the following polyfill.

1
npm i url-search-params-polyfill

And import it somewhere in your project, for example in App.tsx.

1
import 'url-search-params-polyfill';

Subscriptions

Subscriptions aren't supported by default either, since web streams and SSE aren't supported in React Native. You can also install a polyfill for this to make it work. Please note this is still experimental and we would love to get your feedback on this.

1
npm i event-source-polyfill

And import it somewhere in your project, for example in App.tsx.

1
2
import { NativeEventSource, EventSourcePolyfill } from 'event-source-polyfill';
global.EventSource = NativeEventSource || EventSourcePolyfill;

Examples of using React Native with WunderGraph

If you've got any questions, please join our Discord Community and ask away.

Previous
React
Next
Next.js

Was this article helpful to you?
Provide feedback

Edit this page