NextJS + TypeScript + PostgreSQL Realtime Chat Application

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

Repository: https://github.com/wundergraph/nextjs-typescript-postgresql-graphql-realtime-chat

Features:

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

Highlights#

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}}}}){
        id
        message
    }
}

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.

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