How do you handle realtime idle reconnects?

[williamlmao]

I currently am using a component to listen for realtime changes and refetch queries. The problem I am facing is that when a user leaves the screen for some time and come back to it, the connection has disconnected.

I know I can get this disconnection from the status param in the callback, but I'm a bit confused about how I initiate a reconnect, since this is all in a useEffect.

What I would like to be able to do is reconnect IF window is refocused or there is a visibility change, and if status is not SUBSCRIBED. Is it worth trying to check the status, or should I just add a windowFocused param to the dependency array in the useEffect? Would love to hear how you all have handled this.

import { useEffect, useState } from 'react'
import { View } from 'react-native'

import { useQueryClient } from '@tanstack/react-query'
import { useCampaignPlayContext } from 'app/providers/CampaignPlayProvider'
import {
  CampaignWithJoins,
  Character,
} from 'app/supabase/functions/types/types'
// @ts-ignore
import { supabase } from 'app/supabase/initialize'

export default function CampaignRealtimeEventListener() {
  const { campaign, usersCharacter, encounter } = useCampaignPlayContext()
  const campaignId = campaign?.id
  const queryClient = useQueryClient()

  useEffect(() => {
    const handleVisibilityChange = () => {
      if (document.visibilityState === 'visible') {
      } else {
        console.log('Tab is now hidden')
      }
    }

    document.addEventListener('visibilitychange', handleVisibilityChange)
    const channel = supabase
      .channel(`campaign:${campaignId}`)
      .on(
        'postgres_changes',
        {
          event: 'INSERT',
          schema: 'public',
          table: 'events',
          filter: `campaign_id=eq.${campaignId}`,
        },
        async (payload: any) => {
          queryClient.invalidateQueries({
            queryKey: ['campaignEvents', campaignId],
          })
        }
      )
      .on(
        'postgres_changes',
        {
          event: '*',
          schema: 'public',
          table: 'encounters',
          filter: `campaign_id=eq.${campaignId}`, // You cannot filter on null values, it will break the entire subscription
        },
        async () => {
          queryClient.invalidateQueries({
            queryKey: ['encounter', campaignId],
          })
        }
      )
      .subscribe((status) => {
        console.log('SUPABASE STATUS', status)
      })

    return () => {
      supabase.removeChannel(channel)
      document.removeEventListener('visibilitychange', handleVisibilityChange)
    }
  }, [campaignId, queryClient, usersCharacter.id])

  return <View></View>
}