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.