Dynamically change feed group

I’m trying to change the feed group dynamically from a select input inside my Activity component. I’m using the <Feed> component to build the feed context. No matter what I do, I cannot get the feed activities to change when the dynamic feed group is updated:

const Activity = () => {
  const router = useRouter();
  const feedGroup = router.query.id as string;
  return (
    <Feed feedGroup={feedGroup} notify={true}>
      <ActivityFeed />
    </Feed>
  );
};

I’ve tried many things, such as updating the key:

<Feed feedGroup={feedGroup} notify={true} key={feedGroup}>

this results in:

TypeError: Cannot read property 'cancel' of undefined

Which seems to happen when the subscription tries to unregister itself from the useEffect unmount function. Trying to manually unregister didn’t work:

const feedContext = useFeedContext();
useEffect(() => {
  feedContext.feedManager.unsubscribe()
}, [feedContext.feedGroup])

I’ve also tried to refresh after the feed group has changed:

const feedContext = useFeedContext();
useEffect(() => {
  feedContext.refresh()
}, [feedContext.feedGroup])

But this didn’t work either. The only thing I can do is window.location away to another page, refetching the page and infering the feed group from the URL. This isn’t great as the application has to re-initialise itself.

Maybe I’m doing something wrong here?

gz#11830

[ellioseven]

Beautiful, thanks guys ❤️

[Rykuno]

@ellioseven Is it possible for you to recreate that issue on codesandbox.io? As for the code snippet you shared; everything seems to be okay. I don’t see any issue with the way you’re using the router.

I’m running into the same issue with my routes such as/user/[username].

When navigating away from pages it’s failing cancel on the FeedManager. Quite a bit of work to recreate in a sandbox but i’ll give it a shot after work.