Back
Realtime connection not working on NextJs
Hey, I'm currently working a nextJs projekt with appwrite and tried to connect to the 'account' channel but im not getting any response even on changes. After initial load i have opened another tab where i make changes to the user but nothing came in the page component. On the network tab there is the realtime connection pending but has no data and after a while its fail and try to esteblish a new connection.
TypeScript
'use client'
import React, { useEffect, useState } from 'react'
import { Client, Account } from 'appwrite';
import Connection from '@/lib/appwrite';
const Page = () => {
const client = Connection();
const account = new Account(client);
const [user, setUser] = useState<any>(null);
useEffect(() => {
const fetchUser = async () => {
try {
const userData = await account.get();
setUser(userData);
} catch (error) {
console.error('Error fetching user:', error);
}
};
fetchUser();
const unsubscribe = client.subscribe('account', (response) => {
console.log('Account update received:', response);
fetchUser();
});
return () => unsubscribe();
}, []);
return (
<div>Page asd</div>
)
}
export default Page
TL;DR
Realtime connection to 'account' channel in Next.js project with Appwrite not working properly. Realtime updates not reflecting on the page component even after making changes. Realtime connection pending in network tab but fails to establish. Possible solution: Check if the `fetchUser` function is executing properly in the subscription callback.