React Native Integration

WunderGraph doesn't just work with React on the Web but also supports React Native, meaning you can use WunderGraph to build mobile apps as well!

As React works more or less the same on the web and mobile, the workflow of using WunderGraph with React Native is pretty similar.

That said, there are a few things you should be aware of.

1. Instead of using ...templates.typescript.react for code generation, use ...templates.typescript.reactNative
2. React Native uses a JavaScript Bundler which is running on its own host (10.0.2.2 by default), you have to allow this host in your security configuration
3. You have to use SDK version 0.61.0 or higher

Below is an example configuration:

// wundergraph.config.ts
configureWunderGraphApplication({
    application: myApplication,
    hooks: wunderGraphHooks.config,
    operations,
    codeGenerators: [
        {
            templates: [
                // use all the typescript react templates to generate a client
                ...templates.typescript.all,
                templates.typescript.operations,
                templates.typescript.linkBuilder,
            ],
            // create-react-app expects all code to be inside /src
            // path: "../frontend/src/generated",
        },
        {
            templates: [
                ...templates.typescript.reactNative,
            ],
            path: "../rnative/src/generated",
        }
    ],
    cors: {
        ...cors.allowAll,
        allowedOrigins: [
            "http://localhost:3000",
            "http://localhost:8081",
        ],
    },
    dotGraphQLConfig: {
        hasDotWunderGraphDirectory: false,
    },
    security: {
        allowedHosts: [
            "10.0.2.2",
        ],
    }
});

Caveats#

Currently, WunderGraph doesn't support Subscriptions and Live Queries with React Native. This is because the React Native fetch API doesn't support streaming responses.

If your project requires Subscriptions or Live Queries, please get in touch with us, and we'll work out a solution.

We'd like to implement a native Java/Kotlin as well as Objective-C/Swift WunderGraph Client and expose it to React Native. If you're interested in the feature, please get in touch with us.