WunderGraph with React JS

WunderGraph seems to be a React/NextJS only framework but this is actually not the case. It just happened that WunderGraph started out supporting React. At the core, we're able to integrate well with other frameworks as we can generate code for any possible language or framework.

That said, React support is a first class citizen of WunderGraph. Together with NextJS, you're able to get super productive.

This section explains what WunderGraph does to help you build applications with React JS. Although we usually use React together with NextJS in our examples, you're not required to use the popular framework. As we're generating plain React Components and Hooks, you're able to integrate with any other React toolkit like Create React App (CRA) or ViteJS.

Core Features#

If you use WunderGraph with ReactJS, you get the following core features out of the box:

• TypeScript all the way through: All generated code is typed, making it very easy to use
• Authentication/Authorization out of the box
• Generated typesafe API client for Queries, Mutations, Subscriptions & Live Queries
• Generated Hooks for Authenticating users with 3rd Party Auth Providers like GitHub, Auth0, Okta, Keycloak, etc...
• Generated Hooks to wrap the API client so that you can easily bind the API client to the User Interface
• Generated Forms for each Operation, so you don't have to manually create forms anymore
• Generated client-side validation of forms through JSON Schema validation

Development workflow for React JS Apps with WunderGraph#

First, you add the APIs you'd like to use in your React JS application as a dependency. This could be one or more REST and/or GraphQL APIs or maybe even a Postgres or MySQL database. WunderGraph then introspects all the APIs and builds a "virtual GraphQL" Schema for you.

Next, you're able to define your GraphQL Operations to build out your API surface. Essentially, each GraphQL Operation you define becomes an API Endpoint.

Finally, because WunderGraph's goal is to make developers highly productive, we're generating a complete React Client, Components, Forms, Hooks, etc... for all your Operations. You could say this is kind of like a Backend as a Service but without forcing you into a specific backend stack.

Then, once you define another GraphQL Operation or change an existing one, the code generator updates all the generated code to keep it all in sync.

As we're also able to generate Forms for you, what's left is the work you have to do to build a nice user interface.

Our goal with WunderGraph is to let you focus on what really matters, a great user experience. You shouldn't worry about APIs, Authentication, Data Fetching, Caching, etc. too much.

So, in a nutshell, the dev workflow looks like this:

1. Add your APIs to your project
2. define your GraphQL Operations
3. Tweak the generated UI components
4. Ship your app!

WunderGraph allows you to cut down the boilerplate required for building Apps by more than 90%.

A detailed look at all the features#

Now that you've got an overview of what the WunderGraph Developer Experience with React looks like, let's take a closer look with an example.

We'll use the NextJS Postgres Starter for illustration purposes. There's also a Video you can follow.

So, how would you handle Authentication? That's actually one of the easiest tasks. We're generating React Hooks to make it super easy.

const {client: {login, logout}, user} = useWunderGraph();

These can be used in any React Component and allow you to easily log the user in or out or give you some info on the user.

Now, let's imagine you've created the following mutation so that your users can create posts under the path .wundergraph/NewPost:

mutation (
    $name: String! @fromClaim(name: NAME)
    $email: String! @fromClaim(name: EMAIL)
    $message: String!
){
    createOnepost(data: {message: $message user: {connectOrCreate: {where: {email: $email} create: {email: $email name: $name}}}}){
        id
        message
        user {
            id
            name
            email
        }
    }
}

WunderGraph picks up the Operation, parses it and generates a bunch of useful code for you.

To achieve typesafety, we're generating TypeScript models obviously:

export interface GraphQLError {
    message: string;
    path?: ReadonlyArray<string | number>;
}
export interface NewPostInput {
    message: string;
}
export interface NewPostResponse {
    data?: {
        createOnepost?: {
            id: number;
            message: string;
            user: {
                id: number;
                name: string;
                email: string;
            };
        };
    };
    errors?: ReadonlyArray<GraphQLError>;
}

Additionally, we're generating an API client as well as React Hooks for you. This way, using the defined GraphQL mutation is as simple as this:

const { mutate, response } = useMutation.NewPost({});

Next, we'll also generate a JSON Schema for the input:

{
    type: "object",
    properties: { message: { type: "string" } },
    additionalProperties: false,
    required: ["message"]
}

Having this JSON Schema is amazing, because now we're able to re-use it with other tools, like for example react jsonschema form.

With the help of React JSONSchema Form, we're able to generate complete forms based on your Operations:

export const NewPostForm: React.FC<MutationFormProps<Response<NewPostResponse>>> = ({
    onResult,
    refetchMountedQueriesOnSuccess,
}) => {
    const [formData, setFormData] = useState<NewPostInput>();
    const { mutate, response } = useMutation.NewPost({ refetchMountedQueriesOnSuccess });
    useEffect(() => {
        if (onResult) {
            onResult(response);
        }
    }, [response]);
    return (
        <div>
            <Form
                schema={jsonSchema.NewPost.input}
                formData={formData}
                onChange={(e) => {
                    setFormData(e.formData);
                }}
                onSubmit={async (e) => {
                    await mutate({ input: e.formData, refetchMountedQueriesOnSuccess });
                    setFormData(undefined);
                }}
            />
        </div>
    );
};

You can fully customize the form, write custom themes, change the css, etc... There are really no limits. It's just some generated code on top of the JSON-RPC endpoints we've created from your GraphQL Operations.

You don't have to use all of it. It's opt-in, not opt out. If you're happy with just a TypeScript API client, ok. If you want a bit more, you can add the generated React Hooks. For those who really try to not repeat themselves, using the generated forms is the cherry on the cake.

Getting Started Quickly#

To get you started quickly, here are a few starter kits:

1. NextJS Starter
2. NextJS Postgres Starter