wundergraph.config.ts

Overview#

wundergraph.config.ts is the main file to configure your WunderGraph applications.

If you init a project with wunderctl, using the defaults, it's usually located in the forlder .wundergraph inside your project root.

You're able to introspect and combine APIs to compose them as a WunderGraph application. You can select one or more templates to generate clients for an application.

Introspection#

GraphQL#

In case you have an existing service which implements the GraphQL specification, use the following approach:

import {introspect, IntrospectionPolicy} from "@wundergraph/sdk";
const graphQLAPI = introspect.graphql({
source: IntrospectionPolicy.Network,
url: "http://localhost:4000",
})

This code makes an introspection requests to the service and generates an API object from it.

GraphQL Federation#

import {introspect,IntrospectionPolicy} from "@wundergraph/sdk";
const federatedApi = introspect.federation({
source: IntrospectionPolicy.Network,
urls: [
"http://localhost:4001/graphql",
"http://localhost:4002/graphql",
"http://localhost:4003/graphql",
"http://localhost:4004/graphql",
]
})

This code assumes that the four services implement the GraphQL Federation specification. The WunderGraph sdk will introspect them with an introspection Query and combines them into a federated GraphQL API object.

OpenAPISpecification#

WunderGraph also supports REST APIs, which get translated to GraphQL automatically. Here's one possible way of adding an OpenAPI based API to WunderGraph:

import {introspect} from "@wundergraph/sdk";
const openAPI = introspect.openApi({
source: {
kind: "file",
filePath: "my_api_oas.json"
},
})

Creating an Application#

Use one or more APIs and combine them inta an application.

import {Application} from "@wundergraph/sdk";
const myApplication = new Application({
name: "app",
apis: [
federatedApi,
/*openAPI,
graphQLAPI*/
],
});

Configure your WunderGraph#

The function configureWunderGraph allows you to put all the pieces together and generate the configuration of your WunderGraph. By default, the config is written to wundergraph.config.json.

import {configureWunderGraph, templates} from "@wundergraph/sdk";
configureWunderGraph({
applications: [myApplication],
code_generators: [
{
templates: [
// use all the typescript react templates to generate a client
...templates.typescript.react,
],
// create-react-app expects all code to be inside /src
path: "../src/generated",
}
]
});

Running the Code-Generator#

If you created wundergraph.config.ts using wunderctl init you should also find a package.json in the same folder. All you have to do is run the development script:

yarn develop
# or
npm run develp

Once this script is running, it will pick up changes to your config or the user defined Operations and continuously updates the wundergraph.config.json as well as re-generates the code if code generators are defined.