Real time updates: connection is closed

hi team, I would like to publish updated nextjs datocms starter in your starter collection (seems you have a small team, official starter has not been updated for a long time)

The one last thing is left is real time updates. Can’t understand why the connection is keep closing, although the data is received:

Real time component:

https://github.com/dospolov/datocms-blog-new/blob/ee55f1b26819135cf600c291ce45033875ea4fd8/src/app/posts/[slug]/RealTime.tsx#L4

Deployed version:

https://datocms-blog-new.vercel.app/

Hello @marat.dospolov and welcome to the community!

The error message suggests that one of your graphql queries being made with the realtime API has an error in it (it could be a syntax error, or querying a model/field that does not exist, and so on)

If you email us at support@datocms.com with your datocms project URL and the steps to reproduce the issue we can help take a look at it for you.

@marat.dospolov

Thank you for the email!

The issue is in your RealTime component, you’re reading process.env.NEXT_DATOCMS_READONLY_API_TOKEN directly in a client component (“use client”), but that env var simply doesn’t exist in the browser, so it’s undefined.

The subscription connects and receives the initial data (which came from the server-side fetch where the token works fine), but then fails because the client-side subscription is trying to authenticate with an undefined token.

The reason it works in the https://github.com/datocms/next.js-i18n-blog-demo-site-search is that the token is passed as a prop from the server component to the client component. The server reads the env var and passes the actual value down, so it gets serialized into the client props. Be careful though with sharing the token publically, and use the same precautions we used here: guarding it with a secret token: https://github.com/datocms/next.js-i18n-blog-demo-site-search

So the issue is not that the starter is outdated, but that the way the token was passed was changed on your fork, breaking the realtime updates functionality

We also have more up to date starters here: Project starters - Free demo projects - Marketplace

and Next 14 Company Landing Page Builder — DatoCMS and Next 14 Ecommerce Demonstration — DatoCMS specifically for next js!

thank you so much, it works!

btw, I’ve sent an update to your official blog starter, could you take a look?

@marat.dospolov I’ll take a look as soon as possible! Thank you very mcuh!

1 Like

@m.finamor great! Do you have approximate ETA? I would love to see it merged and then I would update another (i18n blog) starter on top of that