Nextjs and realtime subscriptions

still getting my bearings on react with supabase and struggling with setting up a db subscription on a table of games and having it update games when theres a change in the db.

When I try to write functions to create the subscription etc. outside of useEffect I get linter warnings but when I do all of it inside useEffect I also get warnings that I need to include variables for re rendering but I don't want the connection to be reset.
How can I get the subscription to be created on load. Keep the component from re rendering so the subscription doesn't go away but also update the state so my list components re render with the new data?

note: nfl_games is initially from my server side call where I hit the supabase db and then pass it as a prop to the component.

Here's my useEffect code snippet.

useEffect(() => {
  setGamesList(nfl_games)
  const nflGamesSubscription = supabase
    .from('nfl_games')
    .on('*', (payload) => {
    handleGameUpdate(payload)
     })
     .subscribe()
    
  const handleGameUpdate = (gameUpdate) => {
    const changedGameKey = gameUpdate.old.GameKey
    const updatedGames = games.map(game => game.GameKey === changedGameKey ? gameUpdate.new : game)
    setGames(updatedGames)
    }
    return () => {
      supabase.removeSubscription(nflGamesSubscription)
    }
}, [nfl_games, gamesList])

useEffect(() => {
  setGamesList(nfl_games)
  const nflGamesSubscription = supabase
    .from('nfl_games')
    .on('*', (payload) => {
    handleGameUpdate(payload)
     })
     .subscribe()
    
  const handleGameUpdate = (gameUpdate) => {
    const changedGameKey = gameUpdate.old.GameKey
    const updatedGames = games.map(game => game.GameKey === changedGameKey ? gameUpdate.new : game)
    setGames(updatedGames)
    }
    return () => {
      supabase.removeSubscription(nflGamesSubscription)
    }
}, [nfl_games, gamesList])

useEffect(() => {
  setGamesList(nfl_games)
  const nflGamesSubscription = supabase
    .from('nfl_games')
    .on('*', (payload) => {
    handleGameUpdate(payload)
     })
     .subscribe()
    
  const handleGameUpdate = (gameUpdate) => {
    const changedGameKey = gameUpdate.old.GameKey
    const updatedGames = games.map(game => game.GameKey === changedGameKey ? gameUpdate.new : game)
    setGames(updatedGames)
    }
    return () => {
      supabase.removeSubscription(nflGamesSubscription)
    }
}, [nfl_games, gamesList])

useEffect(() => {
  setGamesList(nfl_games)
  const nflGamesSubscription = supabase
    .from('nfl_games')
    .on('*', (payload) => {
    handleGameUpdate(payload)
     })
     .subscribe()
    
  const handleGameUpdate = (gameUpdate) => {
    const changedGameKey = gameUpdate.old.GameKey
    const updatedGames = games.map(game => game.GameKey === changedGameKey ? gameUpdate.new : game)
    setGames(updatedGames)
    }
    return () => {
      supabase.removeSubscription(nflGamesSubscription)
    }
}, [nfl_games, gamesList])

Nextjs and realtime subscriptions

Similar Threads

Nextjs and realtime subscriptions

Similar Threads

Similar Threads

Similar Threads