Novu•14mo ago

issue in fetching notifications using graphql

by: @Karine Brandelli ref:- https://discord.com/channels/895029566685462578/1153378632866209792/1153389454489293020

8 Replies

Hi @Karine Brandelli How you are displaying in-app notifications? using prebuilt react component or hooks? How you are triggering the workflow ?

karinebrandelli•14mo ago

hey Pawan! currently we use this structure

export const MANDATES = gql`
    query mandates(
        $pagination: Pagination
        $query: PaginationDefaultQueryInput!
    ) {
        mandates(pagination: $pagination, query: $query) {
            items {
                id
                description
                dateStart
                dateEnd
                maxDays
            }
            hasMore
        }
    }
`

export const useMandates = (
    identifier: string = '',
    ref?: RefObject<HTMLElement | null>
) => {
    const [mandates, loading, refetch] = usePagination<TMandate>({
        query: MANDATES,
        element: ref,
        variables: { identifier }
    })

    return { mandates, loading, refetch }
}

const { mandates } = useMandates()

const notifications: INotification[] =
    mandates.length > MIN_LENGTH
        ? getNotificationsByMandateEvents(mandateEvents)
        : getNotificationCreateFirstMandate()

<NotificationBody>
   {notifications.length == MIN_LENGTH ? (
       <NotificationEmpty>
           Não há notificações
       </NotificationEmpty>
  ) : (
       ''
  )}
   {notifications.map((notification, key) => (
        <NotificationItem
            notification={notification}
            key={key}
        />
    ))}
</NotificationBody>

export const MANDATES = gql`
    query mandates(
        $pagination: Pagination
        $query: PaginationDefaultQueryInput!
    ) {
        mandates(pagination: $pagination, query: $query) {
            items {
                id
                description
                dateStart
                dateEnd
                maxDays
            }
            hasMore
        }
    }
`

export const useMandates = (
    identifier: string = '',
    ref?: RefObject<HTMLElement | null>
) => {
    const [mandates, loading, refetch] = usePagination<TMandate>({
        query: MANDATES,
        element: ref,
        variables: { identifier }
    })

    return { mandates, loading, refetch }
}

const { mandates } = useMandates()

const notifications: INotification[] =
    mandates.length > MIN_LENGTH
        ? getNotificationsByMandateEvents(mandateEvents)
        : getNotificationCreateFirstMandate()

<NotificationBody>
   {notifications.length == MIN_LENGTH ? (
       <NotificationEmpty>
           Não há notificações
       </NotificationEmpty>
  ) : (
       ''
  )}
   {notifications.map((notification, key) => (
        <NotificationItem
            notification={notification}
            key={key}
        />
    ))}
</NotificationBody>

simplifying of course haha we use a graphql query to render de notifications I just don't know exactly how to trigger that with novu

Pawan Jain•14mo ago

Why you are using graphql to fetch notifications? You can just use our useNotifications hook.

karinebrandelli•14mo ago

that's what I want to know these all will be refactor using Novu standarts how can I do that with useNotifications ?

Pawan Jain•14mo ago

I can share an example with you Currently we are missing an example https://docs.novu.co/notification-center/client/react/customization#usenotifications

karinebrandelli•14mo ago

I don't see the example in the link you sent

Pawan Jain•14mo ago

We are missing example currently Hi @karinebrandelli Checkout this example on how to use useNotifications hook to build your custom notification center. https://codesandbox.io/s/usenotifications-usefetchnotifications-hook-2t6sgz

karinebrandelli•14mo ago

Hi Pawan! Thanks, I'll check later bongocat

Gaming

Programming

issue in fetching notifications using graphql