Skip to Content

Your first WunderGraph Application - Adding Links between Fields

If you're paying attention, you might have noticed something. When we added the REST API (JSON Placeholder) we've inherited some RESTful-ness which doesn't really feel like GraphQL. If we look closely at the generated schema, especially the type and field definitions of the JSON Placeholder API, we should notice this.

type Query {
...
posts: [Post]
postComments(postID: String!): [Comment]
jsp_users: [JSP_User]
userPosts(userID: String!): [Post]
}
type Post {
id: Int
userId: Int
title: String
body: String
}
type Comment {
id: Int
name: String
email: String
body: String
postId: Int
}
type JSP_User {
id: Int
name: String
username: String
email: String
address: Address
phone: String
website: String
company: Company
}
type Geo {
lat: String
lng: String
}
type Company {
name: String
catchPhrase: String
bs: String
}

You'd have to make multiple API calls to fetch all users including their posts and comments. Actually, you'd have to make a lot of requests. It's not just inefficient, it's also not leveraging GraphQL to its full potential.

Let's fix this by adding two links. One from the type User to the associated Posts, another between the Posts and the associated Comments.

We wanted to make building links as simple as it could get. For that reason, we've added a specific code generator and some TypeScript generics magic so that you can enjoy building typesafe Links!

Extend the Code Generator#

To enable the linkBuilder, you have to add it to the code generators first. To do so, open the wundergraph.config.ts and scroll to the bottom.

The codeGenerators config of the configureWunderGraphApplication should look like this:

codeGenerators: [
{
templates: [
// use all the typescript react templates to generate a client
templates.typescript.namespaces,
templates.typescript.operations,
templates.typescript.mocks,
templates.typescript.linkBuilder,
...templates.typescript.react
],
},
],

Save the file and wait until the Code Generator acknowledges. The console should show wundergraph.config.json updated which indicated that all configuration and generated code is updated.

Using the linkBuilder#

First, make sure the generated linkBuilder is included. Add the include to the top of the wundergraph.config.ts file.

import linkBuilder from "./generated/linkbuilder";

Modify the wundergraph.config.ts file's function configureWunderGraphApplication like so:

configureWunderGraphApplication({
application: myApplication,
codeGenerators: [
{
templates: [
// use all the typescript react templates to generate a client
templates.typescript.namespaces,
templates.typescript.operations,
templates.typescript.mocks,
templates.typescript.linkBuilder,
...templates.typescript.react
],
},
],
cors: {
...cors.allowAll,
allowedOrigins: process.env.NODE_ENV === "production" ?
[
"http://localhost:3000"
] :
[
"http://localhost:3000"
]
},
authentication: {
cookieBased: {
providers: [
authProviders.demo(),
]
}
},
mock,
operations: operations,
links: [
linkBuilder
.source("userPosts")
.target("JSP_User","posts")
.argument("userID", "objectField", "id")
.build(),
linkBuilder
.source("postComments")
.target("Post","comments")
.argument("postID", "objectField", "id")
.build(),
]
});

At the very bottom, you can see how we've added the two links. Save the file and wait for the Code Generator to do its work. You can check the generated file wundergraph.app.schema.graphql to see how the links have been added.

Updating our JspUsers Query#

Ok, links have been added. We're now able to extend our JspUsers Query with some posts. Go back to the file wundergraph.app.operations.graphql and extend our Query like so:

query JspUsers {
jsp_users {
id
name
email
posts {
id
title
body
}
}
}

Save the file and call curl again. Alternatively, you can also just refresh the website in the browser.

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

At first, you might be thinking that something is wrong. Nothing really happens, does it? Well, we're kind of overwhelming the JSON Placeholder API with all the requests we're making. We iterate over all the user objects and for each of them, we have to load all posts. Don't even try to add comments at this point!

It's a common issue though. Not every API is that fast. You might have to deal with some legacy systems which just cannot handle the load.

In the next chapter, we learn how we can add caching to tackle this problem.

Summary#

So far, we've added a REST API to our API dependencies. Initially we had to deal with some schema inconsistencies. We were then able to add our first extra Operation. Now, we've added some extra links to make the API less RESTful and more like a GraphQL API. Finally, we've extended our Operation, only to learn that we're running into another problem!

let's move on to fix this one too!


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