useSWRSubscription - reconnect after close

[hwangyena]

Bug report

How can I reconnect useSWRSubscription?

Description / Observed Behavior

I used useSWRSubscription in SSE that requires authorization. After a 401 error, the header was changed and a new connection was needed after close, but I couldn't find a way to reconnect after the error.

I tried setting auth as state so that the key value would change when auth changed, but it doesn't seem to detect the change.

I also tried using mutate() just in case, but it still doesn't reconnect.

In useSWRSubscription, if an event is interrupted under certain conditions, is there a way to reconnect like useSWR-mutate?

Expected Behavior

re-open useSWRSubscription connection after some events.

Repro Steps / Code Example

const [auth, setAuth] = useState(getHeader());

const { data } = useSWRSubscription(
  auth ? '/sse/...' : null,
  (path, { next }: SWRSubscriptionOptions<SSEResponse, Event>) => {
    const eventSource = new EventSourcePolyfill(path, auth);

		...
          eventSource.addEventListener('error',()=>{
	          setAuth(updateAuth()); 
          }

Additional Context

SWR version. : 2.1.2

[promer94]

I feel like you could also add auth as key here.

const [auth, setAuth] = useState(getHeader());
const { data } = useSWRSubscription(
  auth ? [path, auth] : null,
  ([path, auth], { next }: SWRSubscriptionOptions<SSEResponse, Event>) =  {
     const eventSource = new EventSourcePolyfill(path, auth);
     eventSource.addEventListener('error',()=>{
       setAuth(updateAuth()); 
  }
  return () => {
     eventSource.close()
  }
}

If the auth info changed here, a new subscription would be created and the old one would be closed

[hwangyena]

@promer94
Thank you for your response. I tried applying the code, but when I put the URLs in an array, the correct URL did not come in.

Although I cannot find the document that explains it, I remember that the code you provided using an array is not compatible with SWR 2.0 or later versions.

[promer94]

but when I put the URLs in an array, the correct URL did not come in.

This is a bug that has been fixed in #2550 but not released yet 😂. Sorry about that. We will release a new version soon

using an array is not compatible with SWR 2.0 or later versions.

It is compatible. You could find more info here

As a workaround, you could use path and auth directly

const [auth, setAuth] = useState(getHeader());
const { data } = useSWRSubscription(
  auth ? [path, auth] : null,
  (_, { next }: SWRSubscriptionOptions<SSEResponse, Event>) =  {
     const eventSource = new EventSourcePolyfill(path, auth);
     eventSource.addEventListener('error',()=>{
       setAuth(updateAuth()); 
  }
  return () => {
     eventSource.close()
  }
}

[hwangyena]

@promer94
Oh! I thought the feature was removed because it didn't work, but it was actually a bug. 😅
I'll apply the code later after upgrading the version. Thank you for your response!