Skip to Content

Configure WunderGraph Application

Published: September 09, 2021

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,
// generates type-safe models for our namespaces
// this uses the WunderGraph API Token from your env (if available)
// and generates stubs that represent all the namespaces you've created using console.wundergraph.com
// this means, no ID guessing when you want to deploy to an environment
templates.typescript.namespaces,
// 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(),
]
});

Product

Subscribe to our newsletter!

Stay informed when great things happen! Get the latest news about APIs, GraphQL and more straight into your mailbox.

© 2021 WunderGraph