N
Novu11mo ago
Pawan Jain

issue in fetching notifications using graphql

8 Replies
Pawan Jain
Pawan Jain11mo ago
Hi @Karine Brandelli How you are displaying in-app notifications? using prebuilt react component or hooks? How you are triggering the workflow ?
karinebrandelli
karinebrandelli11mo 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
Pawan Jain11mo ago
Why you are using graphql to fetch notifications? You can just use our useNotifications hook.
karinebrandelli
karinebrandelli11mo 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
Pawan Jain11mo 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
karinebrandelli11mo ago
I don't see the example in the link you sent
Pawan Jain
Pawan Jain11mo 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
karinebrandelli11mo ago
Hi Pawan! Thanks, I'll check later bongocat
Want results from more Discord servers?
Add your server
More Posts