Setting custom queryKey in useFetchNotifications

[samya-ak]

• I'm submitting a...

  • bug report
  • feature request
  • question about the decisions made in the repository
  • question about how to use this project

• Summary
  I'm trying to fetch all notifications and only unread notifications separately.
  I'm doing something like

const {
    data: unreadData,
    isLoading: isUnreadLoading,
    hasNextPage: hasUnreadNextPage,
    fetchNextPage: fetchUnreadNextPage,
  } = useFetchNotifications(
    {
      query: {
        limit: 10,
        read: false,
      },
    },
    {
      refetchOnMount: true,
      refetchOnWindowFocus: true,
      onError: (err) => handleError(err),
    }
  );

  const {
    data: allData,
    isLoading: isAllLoading,
    hasNextPage: hasAllNextPage,
    fetchNextPage: fetchAllNextPage,
  } = useFetchNotifications(
    { query: { limit: 10 } },
    {
      refetchOnMount: true,
      refetchOnWindowFocus: true,
      onError: (err) => handleError(err),
    }
  );

I believe useInfiniteQuery underneath useFetchNotifications is using infinite_notifications as queryKey for both requests. Hence, returning the same cached notifications. I was wondering if there's a way to modify the queryKey for each request to fetch all notifications and unread notifications in separate requests.

Thanks!

[linear]

NV-3926 Setting custom queryKey in useFetchNotifications

[samya-ak]

Ended up using separate NovuProvider for each useFetchNotifications for now.
Only downside I see is not being able to take advantage of caching and context since I'm conditionally rendering the providers.
Open to better suggestions : )