wundergraph / nextjs-typescript-postgresql-graphql-realtime-chat

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

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

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:

yarn global add @wundergraph/wunderctl@latest
yarn
yarn dev

Cleanup

docker-compose rm -v -f

Questions?

Read the Docs.

Join us on Discord!

nextjs-typescript-postgresql-graphql-realtime-chat's Issues

Errors 500 + are not propagated by the react client

Hello

Errors 500 are not propagated by the client to be catched by the ui

private fetch = (input: globalThis.RequestInfo, init?: RequestInit): Promise<any> => {
    const key = input.toString();
    return new Promise<any>(async (resolve, reject) => {
      if (this.inflight[key]) {
        this.inflight[key].push({ resolve, reject });
        return;
      }
      this.inflight[key] = [{ resolve, reject }];
      try {
        const res = await fetch(input, init);
        const inflight = this.inflight[key];
        if (res.status === 200) {
          const json = await res.json();
          delete this.inflight[key];
          setTimeout(() => {
            inflight.forEach((cb) => cb.resolve(json));
          }, 0);
        }
        if (res.status >= 401 && res.status <= 499) {
          this.csrfToken = undefined;
          delete this.inflight[key];
          inflight.forEach((cb) => cb.reject('unauthorized'));
          this.fetchUser();
        }
      } catch (e: any) {
        const inflight = this.inflight[key];
        delete this.inflight[key];
        inflight.forEach((cb) => cb.reject(e));
      }
    });
  };

if we have a >= 500 error, it is not propagated (for exp when an api goes down) I have shut down my graphql api on purpoose, but the error is not catched

try {
      await createMessage({
        input: { ...values },
      });
      form.reset();
    } catch (err) {
      console.log({ err });
    }

The request failed as expected but no error was propagated due to the client implementation
I propose to throw an error if res. status is 500 + or to return an error response

Thnx

Injecting more claims into operations inputs

hello

I was trying WG fro a while now, I'm using keycloak as open id server, in keycloak we can specify custom claims and roles

for now we can inject some claims into operations, this will be very useful if we can extend the list of the current claims that we can inject in operations to all claims provided by open id, or even custom one,

I dont know if this will be possible regarding typing in graphql schemas

for exp keycloak user_id, first_name, last_name etc ..

as for exp

authProviders.openIdConnect({
    id: "keycloak", // you have to choose this ID
    clientId: "client-id", // client ID from Auth0
    clientSecret: process.env.client_secret || "", // client secret from Auth0
    issuer: "http://keycloak.local/auth/realms/Realm",
    claims : ["email", "first_name", "last_name", "user_id", "roles" ... ]
  }),

this claims can be used by the code generators to be available in the custom directive

baseUrl, error in the client when enabling S3 provider

hello
Congratulation for this excellent project, il really look forward to try it out in production

For now I'am testing it a little, and I have somme issues

first, I'am using Traefik for my test lab as a reverse proxy, How can I specify the baseUrl in the configuration, I did not find a way in the Docs

Second there is an error in the generated client when I enable minio

public uploadFiles = async (config: UploadConfig): Promise<Response<UploadResponse[]>> => {
		try {
			// pass only files
			for (const pair of config.formData.entries()) {
				if (!(pair[1] instanceof Blob)) {
					config.formData.delete(pair[0]);
				}
			}
			const params = this.queryString({
				wg_api_hash: this.applicationHash,
			});
			if (this.csrfToken === undefined) {
				const res = await fetch(this.baseURL + "/" + this.applicationPath + "/auth/cookie/csrf", {
					credentials: "include",
					mode: "cors",
				});
				this.csrfToken = await res.text();
			}
			const headers: Headers = {
				...this.extraHeaders,
				Accept: "application/json",
				"WG-SDK-Version": this.sdkVersion,
			};
			if (this.csrfToken) {
				headers["X-CSRF-Token"] = this.csrfToken;
			}
			const body = config.formData;
			const f = fetchConfig.method === "POST" ? fetch : this.fetch; // only use SingleFlight for Queries
			const data = await f(this.baseURL + "/" + this.applicationPath + "/s3/" + config.provider + "/upload" + params, {
				headers,
				body,
				method: "POST",
				signal: config.abortSignal,
				credentials: "include",
				mode: "cors",
			});
			return {
				status: "ok",
				body: data,
			};
		} catch (e: any) {
			return {
				status: "error",
				message: e,
			};
		}
	};
```

const f = fetchConfig.method === "POST" ? fetch : this.fetch; // only use SingleFlight for Queries

fetchConfig is not defined as it is not passed in uploadFiles args

Thank your 

S3 upload function does not return files keys

wunderctl version : 0.60.2
@wundergraph/sdk: "^0.75",
OS: mac os 11 big sir
node v : 17

I have removed the fileConfig method check so I can try the S3 upload function (otherwise the function does not work due to an error in the generated client already reported in https://github.com/wundergraph/nextjs-typescript-postgresql-graphql-realtime-chat/issues/1#issue-1133968792)

I have managed to upload the file to local minio instance but the response returns an empty object

{
    "status": "ok",
    "body": {}
}

the files keys are not returned from the upload function

I have used a simple implementation

const {
    client: { uploadFiles,  },
  } = useWunderGraph();
  const [files, setFiles] = useState<FileList>();
  const [data, setData] = useState<UploadResponse[]>([]);
  const onFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files) setFiles(e.target.files);
  };


  const onSubmit = async (e: React.FormEvent<Element>): Promise<void> => {
    e.preventDefault();
    const formData = new FormData();
    if (!files) return;
    for (const key in Object.keys(files)) {
      formData.append('files', files[key]);
    }
    formData.append('files', files[0]);
    const result = await uploadFiles({ provider: S3Provider.minio, formData });

    if (result.status === 'ok') {
    console.log({ result: JSON.stringify(result) });
      setData(result.body);
    }
  };

I have checked the minio instance and the files were successfully uploaded

Hook server on 127.0.0.1:9992 gives a ERR_CONNECTION_REFUSED

wunderctl version : 0.60.1
@wundergraph/sdk: "^0.73.0",
OS: mac os 11 big sir
node v : 17

when I start the dev server the Initial logs seems to be OK

(base) mac@Takpro nextjs-typescript-postgresql-graphql-realtime-chat % yarn dev
yarn run v1.22.17
warning ../../../package.json: No license field
$ concurrently "$npm_execpath run nextDev" "$npm_execpath run wundergraph" "$npm_execpath run browser"
warning ../../../package.json: No license field
warning ../../../package.json: No license field
warning ../../../package.json: No license field
$ next dev
$ cd .wundergraph && $npm_execpath run dev
$ wait-on "http-get://localhost:3000" && open-cli http://localhost:3000
warning ../../../../package.json: No license field
[0] ready - started server on 0.0.0.0:3000, url: http://localhost:3000
$ wunderctl up --debug
[1] 2022-02-14T20:46:56+01:00   debug   starting without env file
[1] 2022-02-14T20:46:56+01:00   info    starting WunderNode     {"version": "0.60.1", "commit": "884ce7c5053580047a8a9540cff0054a208662eb", "date": "2022-02-05T11:56:46Z", "builtBy": "ci"}
[1] 2022-02-14T20:46:56+01:00   info    api config: file polling        {"config_file_name": "generated/wundergraph.config.json"}
[1] 2022-02-14T20:46:56+01:00   debug   Analytics config        {"enable": false}
[1] {Path:/Users/mac/Desktop/test/nextjs-typescript-postgresql-graphql-realtime-chat/.wundergraph/wundergraph.config.ts Namespace:file PluginData:<nil>}
[1] {Path:/Users/mac/Desktop/test/nextjs-typescript-postgresql-graphql-realtime-chat/.wundergraph/wundergraph.hooks.ts Namespace:file PluginData:<nil>}
[1] {Path:/Users/mac/Desktop/test/nextjs-typescript-postgresql-graphql-realtime-chat/.wundergraph/generated/wundergraph.hooks.configuration.ts Namespace:file PluginData:<nil>}
[1] {Path:/Users/mac/Desktop/test/nextjs-typescript-postgresql-graphql-realtime-chat/.wundergraph/wundergraph.hooks.ts Namespace:file PluginData:<nil>}
[1] {Path:/Users/mac/Desktop/test/nextjs-typescript-postgresql-graphql-realtime-chat/.wundergraph/wundergraph.operations.ts Namespace:file PluginData:<nil>}
[1] {Path:/Users/mac/Desktop/test/nextjs-typescript-postgresql-graphql-realtime-chat/.wundergraph/generated/wundergraph.operations.configuration.ts Namespace:file PluginData:<nil>}
[1] {Path:/Users/mac/Desktop/test/nextjs-typescript-postgresql-graphql-realtime-chat/.wundergraph/generated/wundergraph.hooks.configuration.ts Namespace:file PluginData:<nil>}
[1] 2022-02-14T20:46:56+01:00   debug   updated config -> (re-)configuring server
[1] 2022-02-14T20:46:56+01:00   debug   http.Client.Transport   {"enableDebugMode": true}
[1] 2022-02-14T20:46:56+01:00   debug   configureCache  {"primaryHost": "localhost:9991", "pathPrefix": "api/main", "deploymentID": "", "cacheKind": "IN_MEMORY_CACHE", "cacheSize": 1000000000}
[1] 2022-02-14T20:46:56+01:00   debug   configuring API {"name": "api/main", "numOfOperations": 8}
[1] 2022-02-14T20:46:56+01:00   debug   create sub router       {"host": "localhost:9991", "pathPrefix": "/api/main"}
[1] 2022-02-14T20:46:56+01:00   debug   configuring CORS        {"api": "api/main", "allowedOrigins": ["http://localhost:3000"]}
[1] 2022-02-14T20:46:56+01:00   debug   api.configureCookieProvider     {"provider": "github", "providerId": "github", "pathPrefix": "api/main", "host": "localhost:9991", "clientID": "6f4093e00a7a8fec721a"}
[1] 2022-02-14T20:46:56+01:00   debug   Config Bundler: initial build successful
[1] 2022-02-14T20:46:56+01:00   debug   Config Bundler: watching for file changes       {"bundler": "hooks", "outFile": "generated/bundle/hooks.js", "externalImports": [], "fileLoaders": [".handlebars"]}
[1] 2022-02-14T20:46:56+01:00   debug   Bundler: execute script {"bundler": "hooks"}
[0] info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
[1] {"level":30,"time":1644868016635,"pid":38642,"hostname":"Takpro.local","msg":"Server listening at http://[::1]:9992"}
[1] hooks server listening at http://[::1]:9992
[1] 2022-02-14T20:46:56+01:00   debug   api.configureCookieProvider     {"provider": "oidc", "providerId": "test", "pathPrefix": "api/main", "host": "localhost:9991", "issuer": "http://keycloak.local/auth/realms/BOLT", "clientID": "bolt-client"}
[1] 2022-02-14T20:46:56+01:00   debug   registered MutationHandler      {"method": "POST", "path": "api/main/operations/AddMessage", "mock": false, "authRequired": true}
[1] 2022-02-14T20:46:56+01:00   debug   registered QueryHandler {"method": "GET", "path": "api/main/operations/AllUsers", "mock": false, "cacheEnabled": false, "cacheMaxAge": 0, "cacheStaleWhileRevalidate": 0, "cachePublic": false, "authRequired": false}
[1] 2022-02-14T20:46:56+01:00   debug   registered MutationHandler      {"method": "POST", "path": "api/main/operations/ChangeUserName", "mock": false, "authRequired": true}
[1] 2022-02-14T20:46:56+01:00   debug   registered MutationHandler      {"method": "POST", "path": "api/main/operations/DeleteAllMessagesByUserEmail", "mock": false, "authRequired": true}
[1] 2022-02-14T20:46:56+01:00   debug   registered QueryHandler {"method": "GET", "path": "api/main/operations/Messages", "mock": false, "cacheEnabled": false, "cacheMaxAge": 0, "cacheStaleWhileRevalidate": 0, "cachePublic": false, "authRequired": false}
[1] 2022-02-14T20:46:56+01:00   debug   registered QueryHandler {"method": "GET", "path": "api/main/operations/MockQuery", "mock": true, "cacheEnabled": false, "cacheMaxAge": 0, "cacheStaleWhileRevalidate": 0, "cachePublic": false, "authRequired": false}
[1] 2022-02-14T20:46:56+01:00   debug   registered QueryHandler {"method": "GET", "path": "api/main/operations/UserInfo", "mock": false, "cacheEnabled": false, "cacheMaxAge": 0, "cacheStaleWhileRevalidate": 0, "cachePublic": false, "authRequired": true}
[1] 2022-02-14T20:46:56+01:00   debug   configuring API {"name": "api/main", "numOfOperations": 8}
[1] 2022-02-14T20:46:56+01:00   info    listening on    {"addr": "localhost:9991"}
[1] 2022-02-14T20:46:57+01:00   debug   Config Bundler: initial build successful
[1] 2022-02-14T20:46:57+01:00   debug   Config Bundler: watching for file changes       {"bundler": "config", "outFile": "generated/bundle/config.js", "externalImports": [], "fileLoaders": [".handlebars"]}
[1] 2022-02-14T20:46:57+01:00   debug   Bundler: execute script {"bundler": "config"}
[0] event - compiled successfully
[0] event - build page: /
[0] wait  - compiling...
[0] event - build page: /
[0] event - build page: /
[0] event - build page: /
[0] event - build page: /
[0] event - build page: /
[0] event - build page: /
[0] event - build page: /
[0] event - build page: /
[0] event - build page: /
[0] event - build page: /
[0] (node:38632) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 / listeners added to [EventEmitter]. Use emitter.setMaxListeners() to increase limit
[0] (Use `node --trace-warnings ...` to show where the warning was created)
[0] event - compiled successfully
[2] /Users/mac/.yarn/bin/yarn.js run browser exited with code 0
[1] 2022-02-14T20:47:01+01:00   debug   database.Source.Execute {"request": "{\"query\":\"{findManymessages(orderBy: [{id:\\\"desc\\\"}], take: 20){id message users {id name}}}\",\"variables\":{}}"}
[1] 2022-02-14T20:47:01+01:00   debug   database.Source.Execute.Error   {"request": "{\"query\":\"{findManymessages(orderBy: [{id:\\\"desc\\\"}], take: 20){id message users {id name}}}\",\"variables\":{}}", "error": "Post \"http://localhost:49601/\": dial tcp [::1]:49601: connect: connection refused"}
[1] 8:47:01 PM: 1/5 done
[1] 8:47:01 PM: wundergraph.app.schema.graphql updated
[1] 2022-02-14T20:47:01+01:00   debug   database.Source.Execute.Retry.after.Error
[1] 2022-02-14T20:47:01+01:00   debug   database.Source.Execute {"request": "{\"query\":\"{findManymessages(orderBy: [{id:\\\"desc\\\"}], take: 20){id message users {id name}}}\",\"variables\":{}}"}
[1] 2022-02-14T20:47:01+01:00   debug   database.Source.Execute.Succeed {"request": "{\"query\":\"{findManymessages(orderBy: [{id:\\\"desc\\\"}], take: 20){id message users {id name}}}\",\"variables\":{}}", "response": "{\"data\":{\"findManymessages\":[{\"id\":1,\"message\":\"Hey, welcome to the WunderChat! =)\",\"users\":{\"id\":1,\"name\":\"Jens@WunderGraph\"}}]}}"}
[1] 8:47:03 PM: generated/wundergraph.operations.configuration.ts updated
[1] 8:47:03 PM: generated/linkbuilder.ts updated
[1] 8:47:03 PM: generated/models.ts updated
[1] 8:47:03 PM: generated/CONFIGURE_AUTH_PROVIDERS.md updated
[1] 8:47:03 PM: generated/wundergraph.hooks.configuration.ts updated
[1] 8:47:03 PM: generated/jsonschema.ts updated
[1] 8:47:03 PM: generated/forms.tsx updated
[1] 8:47:03 PM: generated/client.ts updated
[1] 8:47:03 PM: generated/provider.tsx updated
[1] 8:47:03 PM: generated/hooks.ts updated
[1] 8:47:03 PM: 2/5 done
[1] 8:47:03 PM: Code generation completed.
[0] wait  - compiling...
[1] 8:47:03 PM: 3/5 done
[1] 8:47:03 PM: wundergraph.config.json updated
[1] 8:47:03 PM: 4/5 done
[1] 2022-02-14T20:47:03+01:00   debug   filePollConfig watcher.Events: Write
[1] 8:47:03 PM: wundergraph.postman.json skipped
[1] 8:47:03 PM: 5/5 done
[1] 8:47:03 PM: code generation completed
[1] 2022-02-14T20:47:03+01:00   debug   updated config -> (re-)configuring server
[1] 2022-02-14T20:47:03+01:00   debug   http.Client.Transport   {"enableDebugMode": true}
[1] 2022-02-14T20:47:03+01:00   debug   configureCache  {"primaryHost": "localhost:9991", "pathPrefix": "api/main", "deploymentID": "", "cacheKind": "IN_MEMORY_CACHE", "cacheSize": 1000000000}
[1] 2022-02-14T20:47:03+01:00   debug   configuring API {"name": "api/main", "numOfOperations": 8}
[1] 2022-02-14T20:47:03+01:00   debug   create sub router       {"host": "localhost:9991", "pathPrefix": "/api/main"}
[1] 2022-02-14T20:47:03+01:00   debug   configuring CORS        {"api": "api/main", "allowedOrigins": ["http://localhost:3000"]}
[1] 2022-02-14T20:47:03+01:00   debug   api.configureCookieProvider     {"provider": "github", "providerId": "github", "pathPrefix": "api/main", "host": "localhost:9991", "clientID": "6f4093e00a7a8fec721a"}
[1] 2022-02-14T20:47:03+01:00   debug   Config Bundler: script executed {"bundler": "config"}
[1] 2022-02-14T20:47:03+01:00   debug   api.configureCookieProvider     {"provider": "oidc", "providerId": "test", "pathPrefix": "api/main", "host": "localhost:9991", "issuer": "http://keycloak.local/auth/realms/BOLT", "clientID": "bolt-client"}
[1] 2022-02-14T20:47:03+01:00   debug   registered MutationHandler      {"method": "POST", "path": "api/main/operations/AddMessage", "mock": false, "authRequired": true}
[1] 2022-02-14T20:47:03+01:00   debug   registered QueryHandler {"method": "GET", "path": "api/main/operations/AllUsers", "mock": false, "cacheEnabled": false, "cacheMaxAge": 0, "cacheStaleWhileRevalidate": 0, "cachePublic": false, "authRequired": false}
[1] 2022-02-14T20:47:03+01:00   debug   registered MutationHandler      {"method": "POST", "path": "api/main/operations/ChangeUserName", "mock": false, "authRequired": true}
[1] 2022-02-14T20:47:03+01:00   debug   registered MutationHandler      {"method": "POST", "path": "api/main/operations/DeleteAllMessagesByUserEmail", "mock": false, "authRequired": true}
[1] 2022-02-14T20:47:03+01:00   debug   registered QueryHandler {"method": "GET", "path": "api/main/operations/Messages", "mock": false, "cacheEnabled": false, "cacheMaxAge": 0, "cacheStaleWhileRevalidate": 0, "cachePublic": false, "authRequired": false}
[1] 2022-02-14T20:47:03+01:00   debug   registered QueryHandler {"method": "GET", "path": "api/main/operations/MockQuery", "mock": true, "cacheEnabled": false, "cacheMaxAge": 0, "cacheStaleWhileRevalidate": 0, "cachePublic": false, "authRequired": false}
[1] 2022-02-14T20:47:03+01:00   debug   registered QueryHandler {"method": "GET", "path": "api/main/operations/UserInfo", "mock": false, "cacheEnabled": false, "cacheMaxAge": 0, "cacheStaleWhileRevalidate": 0, "cachePublic": false, "authRequired": true}
[1] 2022-02-14T20:47:03+01:00   debug   configuring API {"name": "api/main", "numOfOperations": 8}
[1] 2022-02-14T20:47:03+01:00   info    listening on    {"addr": "localhost:9991"}

when I attempt an authentication

[1] 2022/02/14 20:49:16 [DEBUG] POST http://127.0.0.1:9992/authentication/postAuthentication
[1] 2022/02/14 20:49:16 [ERR] POST http://127.0.0.1:9992/authentication/postAuthentication request failed: Post "http://127.0.0.1:9992/authentication/postAuthentication": dial tcp 127.0.0.1:9992: connect: connection refused
[1] 2022/02/14 20:49:16 [DEBUG] POST http://127.0.0.1:9992/authentication/postAuthentication: retrying in 1s (5 left)
[1] 2022-02-14T20:49:17+01:00   debug   database.Source.Execute {"request": "{\"query\":\"{findManymessages(orderBy: [{id:\\\"desc\\\"}], take: 20){id message users {id name}}}\",\"variables\":{}}"}
[1] 2022-02-14T20:49:17+01:00   debug   database.Source.Execute.Error   {"request": "{\"query\":\"{findManymessages(orderBy: [{id:\\\"desc\\\"}], take: 20){id message users {id name}}}\",\"variables\":{}}", "error": "Post \"http://localhost:50360/\": dial tcp [::1]:50360: connect: connection refused"}
[1] 2022/02/14 20:49:17 [ERR] POST http://127.0.0.1:9992/authentication/postAuthentication request failed: Post "http://127.0.0.1:9992/authentication/postAuthentication": dial tcp 127.0.0.1:9992: connect: connection refused
[1] 2022/02/14 20:49:17 [DEBUG] POST http://127.0.0.1:9992/authentication/postAuthentication: retrying in 2s (4 left)
[1] 2022-02-14T20:49:17+01:00   debug   database.Source.Execute.Retry.after.Error
[1] 2022-02-14T20:49:17+01:00   debug   database.Source.Execute {"request": "{\"query\":\"{findManymessages(orderBy: [{id:\\\"desc\\\"}], take: 20){id message users {id name}}}\",\"variables\":{}}"}
[1] 2022-02-14T20:49:17+01:00   debug   database.Source.Execute.Succeed {"request": "{\"query\":\"{findManymessages(orderBy: [{id:\\\"desc\\\"}], take: 20){id message users {id name}}}\",\"variables\":{}}", "response": "{\"data\":{\"findManymessages\":[{\"id\":1,\"message\":\"Hey, welcome to the WunderChat! =)\",\"users\":{\"id\":1,\"name\":\"Jens@WunderGraph\"}}]}}"}
[1] 2022/02/14 20:49:19 [ERR] POST http://127.0.0.1:9992/authentication/postAuthentication request failed: Post "http://127.0.0.1:9992/authentication/postAuthentication": dial tcp 127.0.0.1:9992: connect: connection refused
[1] 2022/02/14 20:49:19 [DEBUG] POST http://127.0.0.1:9992/authentication/postAuthentication: retrying in 4s (3 left)

It's seems that the hooks server listening at http://[::1]:9992 is not reachable from ipv4 loopback 127.0.0.1

on the browser reaching http://[::1]:9992 return

{"message":"Route GET:/ not found","error":"Not Found","statusCode":404}

so the server is responding, but 127.0.0.1:9992 gives a ERR_CONNECTION_REFUSED

the call being server side i did not figured how to fix this