Skip to Content

Your first WunderGraph Application - Adding DataSources

We've installed all prerequisites as well as the NextJS starter. We've played around with the demo and have some understanding of how it works. Our project is now all set up to move forward and go beyond the demo.

Adding API dependencies#

As a first step to go beyond the demo, we can add another API dependency. To accomplish this, we have to modify the wundergraph.config.ts file. It's the central point of configuration for your WunderGraph application.

As we're already using two GraphQL APIs in our application, let's add a REST API to the mix. We've prepared an OpenAPI Specification (OAS) for the JSON Placeholder API for you to get started easily. As an alternative you can use any other OAS if you want, simply follow the same steps.

First, download the specification and copy it into your project directory.

Your project structure should look like this:

wundergraph-nextjs-starter/jsonplaceholder.v1.yaml

Now, let's add this REST API to your API dependencies by modifying the wundergraph.config.ts file which is located in the .wundergraph directory.

Add a third introspection operation, right below introspecting the SpaceX as well as the Weather API. Your config should look similar to this:

const spaceX = introspect.graphql({
url: "https://api.spacex.land/graphql/",
source: IntrospectionPolicy.Network,
});
const weather = introspect.graphql({
url: "https://graphql-weather-api.herokuapp.com/",
source: IntrospectionPolicy.Network,
})
const jsonPlaceholder = introspect.openApi({
source: {
kind: "file",
filePath: "../jsonplaceholder.v1.yaml"
},
});

Alongside the two GraphQL APIs which we introspect using GraphQL introspection, we create a third API by using the introspect.openApi function.

This step alone won't do much. We haven't yet added the jsonPlaceholder API to our application. To do so, modify the application configuration.

const myApplication = new Application({
name: "app",
apis: [
weather,
spaceX,
jsonPlaceholder,
],
});

The application myApplication now consists of all three APIs. Save the file to merge all APIs.

Unfortunately, the schema of the SpaceX GraphQL API is not compatible with the resulting schema from the JSON Placeholder API. This is a pretty common issue as both APIs are not designed with the other one in mind.

Multiple fields of different types will result in errors when merging the schemas

For that reason, WunderGraph offers helper functions to solve the issue.

Solving schema inconsistencies#

To solve the the problem, we first need to get a better understanding of the cause.

Both the SpaceX and the JSON Placeholder API add the field users to the type Query, each with a different signature.

type Query {
...
# from the SpaceX API
users(distinct_on: [users_select_column!], limit: Int, offset: Int, order_by: [users_order_by!], where: users_bool_exp): [users!]!
# from the JSON Placeholder API
users: [JSP_User]
...
}

If you're more familiar with the GraphQL specification, you should be aware that tow field definition cannot have the same name. For that reason, this schema will be invalid, so the Code-Generator has to fail.

To solve this problem, we need to do two things. First, we should rename the field users from the JSON Placeholder API to jsp_users. This simple prefix alone will already solve the problem.

In our case, we want to make it a bit more clear that we have different kinds of user objects. Therefore we also rename the type User from the JSON Placeholder API to JSP_User.

The final configuration should look like this:

const spaceX = introspect.graphql({
url: "https://api.spacex.land/graphql/",
source: IntrospectionPolicy.Network,
});
const weather = introspect.graphql({
url: "https://graphql-weather-api.herokuapp.com/",
source: IntrospectionPolicy.Network,
})
const jsonPlaceholder = introspect.openApi({
source: {
kind: "file",
filePath: "../jsonplaceholder.v1.yaml"
},
});
const jspTypesRenamed = transformApi.renameTypes(jsonPlaceholder,{
from: "User",
to: "JSP_User"
})
const jspFieldsRenamed = transformApi.renameFields(jspTypesRenamed,{
typeName: "Query",
fromFieldName: "users",
toFieldName: "jsp_users",
})
const myApplication = new Application({
name: "app",
apis: [
weather,
spaceX,
jspFieldsRenamed,
],
});

First, we introspect all three APIs. Then we apply two transformation steps to the JSON Placeholder API. The function transformApi.renameTypes is used to rename the User type. The function transformApi.renameFields allows us to rename the users field. Finally, we merge all three APIs together to build the application.

Once you've got the config right, save the wundergraph.config.ts file and re-start the dev environment. From the project root, cancel the existing dev process and run yarn dev again.

Summary#

The console should now show wundergraph.config.json updated. This tells you everything is fine and all code generators are done.

You can now have a look at the generated GraphQL schema by looking at the schema file:

.wundergraph/wundergraph.app.schema.graphql

This file contains the combined virtual GraphQL API of all three APIs. WunderGraph automatically transforms REST APIs to GraphQL by introspecting the OAS and converting it. We'll then merge all schemas together so that you can query them all at once.

Great job! You've added your first API dependency. You've also gained some experience solving schema inconsistencies. In the next chapter, we'll make use of the newly added API and add some new operations.


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