WunderGraph Package Manager for APIs

As WunderGraph treats APIs like packages, the first step is to install some "dependencies" when starting a new project. Let's add a REST API using OpenApi Specification and a GraphQL API via introspection. WunderGraph automatically transforms all the APIs into a single "virtual" GraphQL Schema which we can query in the next step.

/*
add a REST API from an OpenApi Specification
*/

const restApi = introspect.openApi({
    source: {
        kind: "file",
        filePath: "jsonplaceholder.v1.yaml",
    }
})

/*
add a GraphQL API using introspection
*/

const countries = introspect.graphql({
    url: "https://countries.trevorblades.com/",
    source: IntrospectionPolicy.Network,
})

We're now able to write Queries against all the APIs, you've previously added. Queries can span across multiple DataSources and you're also able to build links between DataSources so that you can join data from multiple APIs in one single Query.

query CountriesAndUsers {
    countries { # from the countries GraphQL API
        code
        name
    }
    users { # from the json placeholder REST API
        id
        name
    }
}

WunderGraph allows you to debug locally with ease.

wunderctl up

curl http://localhost:9991/api/main/operations/CountriesAndUsers

Once you're happy with the results, deploy globally to the edge with one single command.

wunderctl deploy

curl https://yourproject.wundergraph.dev/api/main/operations/CountriesAndUsers

If you'd like to understand what's happening behind the scenes, here's a Sequence Diagram to explain the complete flow.

Although you can, in reality you wouldn't use curl. WunderGraph takes all your configuration and generates a fully typesafe client for you. The client does all the boring parts like authentication, (re-) fetching data and keeping the UI up to date. Integration done!

// NextJS (React) example
const IndexPage = () => {
    const {client: {login, logout}, user} = useWunderGraph(); // auto generated
    const liveData = useLiveQuery.CountriesAndUsers(); // auto generated
    const users = useQuery.CountriesAndUsers(); // auto generated
    return (
        <div>
            // use/show some user info
            {user === undefined && "user not logged in!"}
            {user !== undefined && `name: ${user.name}, email: ${user.email}`}
            // authentication using GitHub
            {user === undefined && <button onClick={() => login.github()}>login</button>}
            {user !== undefined && <button onClick={() => logout()}>logout</button>}
            // regular query
            {JSON.stringify(users)}
            // live data updates the UI automatically once new data is available
            {JSON.stringify(liveData)}
        </div>
    )
}