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

WunderGraph Realtime Chat Example using NextJS, TypeScript, PostgreSQL, GraphQL
https://github.com/wundergraph/nextjs-typescript-postgresql-graphql-realtime-chat

authentication graphql graphql-subscriptions nextjs nextjs-typescript postgresql typescript

Last synced: 3 months ago
JSON representation

WunderGraph Realtime Chat Example using NextJS, TypeScript, PostgreSQL, GraphQL

• Host: GitHub
• URL: https://github.com/wundergraph/nextjs-typescript-postgresql-graphql-realtime-chat
• Owner: wundergraph
• Created: 2021-05-19T09:20:36.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-12-20T10:54:10.000Z (about 2 years ago)
• Last Synced: 2024-04-20T18:05:06.137Z (9 months ago)
• Topics: authentication, graphql, graphql-subscriptions, nextjs, nextjs-typescript, postgresql, typescript
• Language: TypeScript
• Homepage:
• Size: 19.8 MB
• Stars: 57
• Watchers: 6
• Forks: 8
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome - wundergraph/nextjs-typescript-postgresql-graphql-realtime-chat - WunderGraph Realtime Chat Example using NextJS, TypeScript, PostgreSQL, GraphQL (TypeScript)
• Awesome-NextJs - nextjs-typescript-postgresql-graphql-realtime-chat

README

        
# WunderGraph Realtime Chat with Server Side Rendering (SSR) & Authentication

WunderGraph Realtime Chat Example using NextJS, TypeScript & PostgreSQL

Do you also hate applications that do complex login flows, loading spinners, etc. before allowing you into their app?

Here's a simple solution how we can deliver a much better user experience while keeping the developer experience simple.

This example demonstrates how you can easily build a NextJS application with Server Side Rendering (SSR) and Realtime subscriptions in the client.

When the user is authenticated, the initial page will be rendered server side.

Once the client is initialized, it will start a realtime subscription to keep the UI updated.

The example consists of two components, the NextJS service as well as the headless API service.

The headless API service handles authentication and API requests.

Once authenticated, a cookie is set by the API service.

Both NextJS application and headless API service run on the same root domain.

This allows us to "forward" the cookie header from the initial client request from the NextJS `getServerSideProps` method to the headless API service.

The code that might interest you the most can be found in [index.tsx](./pages/index.tsx)

## Features

Features:

- Authentication

- Authorization

- Server Side Rendering

- Realtime Updates

- Cross Tab Login/Logout

- typesafe generated Typescript Client

## Prerequisites

Make sure you have docker compose installed.

Alternatively, you can use any PostgreSQL database available on localhost.

## Getting Started

Install the dependencies and run the example:

```shell

yarn global add @wundergraph/wunderctl@latest

yarn

yarn dev

```

## Cleanup

```shell

docker-compose rm -v -f

```

## Questions?

Read the [Docs](https://wundergraph.com/docs).

Join us on [Discord](https://wundergraph.com/discord)!