Novu•6mo ago

Setting custom queryKey in useFetchNotifications

Hi @Pawan Jain , 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),
    }
  );

  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!

6 Replies

Ask Inkeep•6mo ago

Hi @Samyak, I'm an AI assistant for Novu. While a team member reviews this question, I'll see if I can find relevant sources for your question. ----------------------------- While I generate an answer, here are some sources that might be helpful: * API Reference * How to use Headless Notification Center * Headless API Reference * Get Started ----------------------------- Answer Currently, the Novu documentation does not provide direct information about customizing the queryKey in the useFetchNotifications hook, specifically for handling separate cache entries for different notification fetches. The hook is designed based on the useInfiniteQuery from the react-query library, which indeed uses a queryKey to manage cache and deduplication of requests (1) . While the official Novu documentation does not detail modifying the queryKey, a typical approach with react-query would be to provide a unique queryKey for each query instance if the library supports it. This feature is generally used in react-query to separate concerns by distinct keys. As a workaround in the current setup without direct support for custom queryKey, you might consider manually managing the differentiation by using separate states or context providers if feasible, ensuring that the caches do not collide by managing the state externally from the hook. For a more Novu-specific solution or to request this feature, you might consider reaching out on their community or GitHub page to see if there are updates or planned features regarding this functionality. For now, here's a generalized approach using react-query principles which you might adapt if Novu's implementation allows:

Ask Inkeep•6mo ago

const unreadNotificationsQueryKey = ['notifications', 'unread'];
const allNotificationsQueryKey = ['notifications', 'all'];

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

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

const unreadNotificationsQueryKey = ['notifications', 'unread'];
const allNotificationsQueryKey = ['notifications', 'all'];

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

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

Remember, this is a hypothetical approach assuming you can pass a queryKey. Check the current implementation details in Novu's documentation or source code to adapt accordingly.

Sources [1] API Reference

Ask Inkeep•6mo ago

Got it. Tagging @Support for additional help.

SamyakOP•6mo ago

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.

Pawan Jain•6mo ago

@Samyak Thanks for sharing the infinite_notifications key issue with useFetchNotifications hook Sharing with our team as we are working on notification center currently

Paweł T.•6mo ago

hey @Samyak 👋 Unfortunately the useFetchNotifications hook doesn't take to the account the query prop when it's building it's internal query key 😦 There is another way that you can consider for fetching the read and all notifications separately with using stores aka "feeds", here is a doc: https://docs.novu.co/notification-center/client/react/multiple-tabs. But I'm not sure if it will cover your case since it requires switching the "current store" with setStore function ref: https://docs.novu.co/notification-center/client/react/api-reference#usenotifications.

Gaming

Programming

Setting custom queryKey in useFetchNotifications