Setting custom queryKey in useFetchNotifications

[samya-ak]

• I'm submitting a...

  • [ ] bug report
  • [ ] feature request
  • [ ] question about the decisions made in the repository
  • [x] 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[bot]]

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 : )