Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 1 month 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 (almost 2 years ago)
- Last Synced: 2024-04-20T18:05:06.137Z (8 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)!