Configure WunderGraph Application

Published: 2022-05-23

The function configureWunderGraphApplication is the part of your config where everything comes together. It takes all the configs we've previously created and merges them all together to build the final config for your WunderGraph project. This function is also responsible for generating the wundergraph.config.json, the file that drives the behaviour of your WunderGraph backend.

Find below an annotated version of the config:

configureWunderGraphApplication({
    // the previously defined application needs to be passed here
    application: myApplication,
    // codeGenerators allows us to define all the code generators
    codeGenerators: [
        {
            templates: [
                // generates typescript mocks
                templates.typescript.mocks,
                // generates models for all typescript operations
                templates.typescript.operations,
                // this generates a typescript linkBuilder stub for you
                // look below to see usage
                templates.typescript.linkBuilder,
            ]
        },
        {
            templates: [
                // use all the typescript react templates to generate a client
                ...templates.typescript.react,
            ],
            // create-react-app expects all code to be inside /src
            // you can override the default output path of a template
            path: "../vitejs-react/src/generated",
        },
        {
            templates: [
                ...templates.typescript.react,
            ],
            // more code in yet another directory
            path: "../nextjs-frontend/generated"
        }
    ],
    // in one of the previous sections, we've created a mock object
    // now it's time to make use of it
    mock,
    // CORS, of course!
    // Most of the time, our Api Gateway (WunderNode) will run on a different domain than the UI (e.g. NextJS)
    // This implies, we'll have CORS issues to deal with.
    cors: {
        // some defaults, might not be ideal in production
        ...cors.allowAll,
        allowedOrigins: [
            // the default origin for NextJS applications
            // delete this and you'll get some nice CORS errors =)
            "http://localhost:3000"
        ]
    },
    // the "ConfigureOperations" object should be passed too,
    // otherwise, you'll get no endpoints
    operations,
    // authentication allows us to configure how our application handles auth
    // by default, all templates come with cookie based auth using a GitHub demo account
    authentication: {
        // cookieBased is the default auth mode, it's ideal for browser based applications
        cookieBased: {
            // pass in all auth providers you'd like to use
            // GitHub, Google, Auth0, Okta, Keycloak, etc...
            // Any OpenID Connect (OIDC) provider works fine
            providers: [
                authProviders.github({
                    id: "github",
                    "clientId": process.env.GITHUB_CLIENT_ID!,
                    "clientSecret": process.env.GITHUB_CLIENT_SECRET!,
                }),
            ]
        }
    },
    // links allows you to add "links" between fields
    links: [
        // linkBuilder needs to be added to the code generator templates first
        // then, you're able to include it from ./wundergraph/generated/linkbuilder
        linkBuilder
            .source("userPosts") // take the field userPosts from the type Query
            .target("JSP_User","posts") // add it to JSP_User with the field name posts
            .argument("userID", "objectField", "id") // as the argument userID use the object field id from JSP_User
            .build(),
        linkBuilder
            .source("postComments") // take the field postComments from the type Query
            .target("Post","comments") // add it to the type Post as the field comments
            .argument("postID", "objectField", "id") // for the argument postID use the object field id from the type Post
            .build(),
    ]
});