Add pagination support to EventsByOrganization query about talawa-api

[xoldd]

Would depend on how the query is modified in the backend. A proper approach should be established first.

I've documented the standard approach to be followed throughout talawa-api for implementing pagination using the graphql connections:- https://docs.talawa.io/docs/developers/talawa-api/pagination

Implement pagination for EventsByOrganization

Again, REST like patterns should not to be followed with graphql, relationships and fetching patterns should be expressed in the graph. This is an anti-pattern:-

type Query {
  eventsByOrganization(organizationID: ID!): EventsConnection
}

The events associated to an organization should be exposed like this:-

type Organization {
  events: EventsConnection
}

On the client side querying for the events within an organization would look like this:-

type OrganizationEventsQuery($cursor: String, $limit: Int!, $organizationID: ID!) {
  organization(id: $organizationID) {
    address
    phoneNumber
    events(first: $limit, after: $cursor) {
      edges {
        cursor
        node {
          id
          ...other event fields
        }
      }
      pageInfo {
      ... fields
      }
    }
  }
  name
}

The advantage here is that you can fetch other fields like address, phoneNumber, name etc., that exist on the organization along with the events associated to that organization. This is more efficient because the client only sends 1 network request to fetch everything that is needed. The server takes care of resolving everything listed in the query.

When the next set of events are to be fetched(connection is to be traversed further) a new network request would be made with a non-null value for the $cursor variable. This time there's no need to fetch the organization fields like address, phoneNumber, name etc., because they were already fetched by the very first network request. This would look like this:-

type OrganizationEventsQuery($cursor: String, $limit: Int!, $organizationID: ID!) {
  organization(id: $organizationID) {
    events(first: $limit, after: $cursor) {
      edges {
        cursor
        node {
          id
          ...other event fields
        }
      }
      pageInfo {
      ... fields
      }
    }
  }
}

To understand how the client implementation would work, take a read:-

1. https://www.apollographql.com/docs/react/pagination/overview
2. https://www.apollographql.com/docs/react/pagination/core-api
3. https://www.apollographql.com/docs/react/pagination/cursor-based#relay-style-cursor-pagination
4. https://commerce.nearform.com/open-source/urql/docs/basics/ui-patterns/#infinite-scrolling
5. https://commerce.nearform.com/open-source/urql/docs/graphcache/local-resolvers/#pagination

[Azad99-9]

Yes kindly do it. Thanks.

[palisadoes]

@aashimawadhwa @rishav-jha-mech @DMills27 PTAL and comment

[palisadoes]

@xoldd This was discussed frequently in the past, however related to news feeds. PTAL too

[palisadoes]

@Azad99-9 @meetulr Do you think this can be implemented without the UI/UX functionality being affected for both Admin and Mobile?

[Azad99-9]

@palisadoes For the mobile part the UI should be tweaked to accomodate the pagination.

[meetulr]

Both the admin and mobile will need to be updated simultaneously according to the changes in the API. We'll need contributors for both. Would depend on how the query is modified in the backend. A proper approach should be established first.

[palisadoes]

1. That's what I figured. We don't want to break the apps.
2. Will we need to modify the newsfeed and its infinite scrolling?

[Azad99-9]

When the next set of events are to be fetched(connection is to be traversed further) a new network request would be made with a non-null value for the $cursor variable. This time there's no need to fetch the organization fields like address, phoneNumber, name etc., because they were already fetched by the very first network request. This would look like this:-

Yes we already use a similar approach in organizationsConnection query.

[palisadoes]

@Azad99-9 Are you working on this?

[Azad99-9]

@palisadoes I am not working on this. But this needs to be addressed. To resolve client side performance issues.

[xoldd]

Should I do it?

[Maniii97]

hey, is this issue up? can i be assigned to do this?.

[Cioppolo14]

@Maniii97 Thank you for your interest. Please keep looking, as I'm sure we have open issues and we'd love your help. If any issue is already assigned, please don't ask to be assigned. We want everyone to get a chance.

[github-actions]

This issue did not get any activity in the past 10 days and will be closed in 180 days if no update occurs. Please check if the develop branch has fixed it and report again or close the issue.