Examples

Expo + SWR Example

This example shows the bare minimum configuration to get WunderGraph up and running with React Native, using Expo and SWR .

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;

Data source configuration

As the data source, we add a single API, the SpaceX GraphQL API in this case.

1
2
3
4
5
6
7
8
9
10
11
// wundergraph.config.ts
const spaceX = introspect.graphql({
apiNamespace: 'spacex',
url: 'https://spacex-api.fly.dev/graphql/',
})
const myApplication = new Application({
name: 'app',
apis: [spaceX],
})

Operation configuration

Next, we configure a simple Operation.

1
2
3
4
5
6
7
# .wundergraph/operations/Dragons.graphql
query Dragons {
spacex_dragons {
name
active
}
}

Running the application

Now, we can run the application using npm run start, this will start WunderGraph and Expo. Use the Expo CLI to choose which device you want to run the app on.

Previous
Caching

Was this article helpful to you?
Provide feedback

Edit this page