Skip to Content

NextJS + TypeScript + PostgreSQL Realtime Chat Application

Published: 2022-06-27

This example shows how to build a Realtime Chat Application just by writing two GraphQL Queries:



  • Authentication
  • Authorization
  • Realtime Updates
  • Cross Tab Login/Logout
  • typesafe generated Typescript Client


PostgreSQL Support#

WunderGraph allows you to turn a PostgreSQL Database into a production-grade GraphQL API in one command:

const db = introspect.postgresql({
apiNamespace: "db",
database_querystring: "postgresql://admin:admin@localhost:55555/example?schema=public",

Injecting Claims into the Query#

In this example, we're using the @fromClaim directive to inject claims into a Query:

mutation AddMessage (
$email: String! @fromClaim(name: EMAIL)
$name: String! @fromClaim(name: NAME)
$message: String!
) {
createOnemessages(data: {message: $message users: {connectOrCreate: {create: {name: $name email: $email} where: {email: $email}}}}){

WunderGraph doesn't expose Queries directly. This means, a client is not able to inject the $name or $email variables by themselves. Instead, the variables will be injected by the WunderGraph Middleware. If the user is not authenticated, the request will be denied automatically.

Claims are name value pairs of information about an authenticated User

Without WunderGraph, this example would require you to build a custom backend.



Subscribe to our newsletter!

Stay informed when great things happen! Get the latest news about APIs, GraphQL and more straight into your mailbox.

© 2022 WunderGraph