WunderGraph By Example

Using a GraphQL API with WunderGraph

This example shows how you can add a GraphQL API to a WunderGraph Application and make use of the fully type safe generated client.

# .wundergraph/operations/Countries.graphql
query {
countries {
code
name
}
}

WunderGraph creates Operations using a file-based approach, similar to NextJS. Countries.graphql will generate an Endpoint named Countries.

Adding a REST API using OpenAPI Specification

WunderGraph can introspect REST APIs using OpenAPI Specification (OAS). The OAS file will be introspected and WunderGraph transforms it automatically into a GraphQL API. This way, you can stitch and combine REST APIs with GraphQL and more...

// .wundergraph/wundergraph.config.ts
const jsonPlaceholder = introspect.openApi({
apiNamespace: "jsp",
source: {
kind: "file",
filePath: "jsonplaceholder.v1.yaml",
}
});
configureWunderGraphApplication({
links: [
linkBuilder
.source("userPosts")
.target("JSP_User","posts")
.argument("userID", "objectField", "id")
.build(),
linkBuilder
.source("postComments")
.target("Post","comments")
.argument("postID", "objectField", "id")
.build(),
]
});

The "introspect.openAPI" can load OAS files from yaml or json and transform the REST API into a GraphQL API which is then added to the virtual Graph.

As an additional step, we can make use of the linkBuilder to add links between fields, allowing you to Query REST APIs as if they were GraphQL APIs.

The linkBuilder component is generated and supports you with autocompletion, so you don't have to guess the field names.

Generated API using PostgreSQL

This example shows how to generate an API from a PostgreSQL Database and mutate data from the frontend. In just a few lines of code, you can build a production ready chat application with realtime updates.

# .wundergraph/operations/CreatePost.graphql
mutation (
$name: String! @fromClaim(name: NAME)
$email: String! @fromClaim(name: EMAIL)
$message: String! @jsonSchema(
pattern: "^[a-zA-Z !0-9]+$"
)
){
createOnepost(data: {message: $message user: {connectOrCreate: {where: {email: $email} create: {email: $email name: $name}}}}){
id
message
user {
id
name
email
}
}
}

This Operation creates a new Post using the generated API. If the user already exists, it will be joined using the email. If the user does not yet exist, it will be generated.

The @fromClaim directives inject the claims from the user into the Operation. Because we're using the @fromClaim directive, the Operation automatically requires the user to be authenticated.

The input for $name and $email cannot be supplied by the user, the input for $message will be validated using JSON-Schema validation.

Apollo Federation with Subscriptions

WunderGraph does not just support Apollo Federation. The WunderGraph server can completely replace the Apollo Federation gateway. This gives you extra security, increased throughput and last but not least, WunderGraph supports Federation with Subscriptions.

// .wundergraph/wundergraph.config.ts
const federatedApi = introspect.federation({
apiNamespace: "federation",
upstreams: [
{
url: "http://localhost:4001/graphql"
},
{
url: "http://localhost:4002/graphql"
},
{
url: "http://localhost:4003/graphql"
},
{
url: "http://localhost:4004/graphql",
},
]
});

By pointing WunderGraph towards four GraphQL Services that implement Apollo Federation, we're able to create a supergraph in seconds.

Authentication using OpenID Connect

All you have to do to add authentication to your WunderGraph application is to add a config of the identity provider, everything else will be generated.

// .wundergraph/wundergraph.config.ts
configureWunderGraphApplication({
authentication: {
cookieBased: {
providers: [
authProviders.demo(),
authProviders.google({
id: "google",
clientId: "xxx.apps.googleusercontent.com",
clientSecret: "xxx",
}),
],
authorizedRedirectUris: [
"http://localhost:3000/",
"http://localhost:3000/demo",
]
}
},
});

In the first step, add all the identity providers you'd like to use. We're providing a demo provider which uses GitHub in case you'd like to have a play.

File Uploads using S3

WunderGraph allows you to plug in a S3 file storage provider to easily upload files.

// .wundergraph/wundergraph.config.ts
configureWunderGraphApplication({
s3UploadProvider: [
{
name: "minio",
endpoint: "127.0.0.1:9000",
accessKeyID: "test",
secretAccessKey: "12345678",
bucketLocation: "eu-central-1",
bucketName: "uploads",
useSSL: false
},
{
name: "do",
endpoint: "fra1.digitaloceanspaces.com",
accessKeyID: "xxx",
secretAccessKey: "xxx",
bucketLocation: "eu-central-1",
bucketName: "wundergraph",
useSSL: true
},
],
});

Similarly to the authentication example, we are able to configure multiple file upload providers / buckets. As it's "just code", you could create a re-usable function to configure multiple buckets.

In this example, we're configuring two S3 providers, a locally running Minio as well as a remote storage on digitalocean.

Got inspired? Start building!

If these examples inspired you to create something, head over to the Quickstart and start building something on your local machine.


Product

Comparisons

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