Implementing connectionField with connectionPlugin for scroll pagination with Apollo

[Frosty21]

Hi there nexus lads,
I'm just trying to understand the nexus docs for the connectionPlugin and just wanted some documentation clarification for us nexus noobs of using the connectionField or via the the connectionPlugin.d.ts types for infinite scroll both forward and backwards pagination. I'm using Apollo as well cheers.
It seems there are issues for using the connectionField 1.0.0 up so i'm trying to get some advice on alternative methods. Or am i missing something?
btw love the work from the nexus team.

Any help would be greatly appreciated.
This is an example below of what i have in the graphql.ts apollo server file and generic prisma nexus nexus-prisma setup currently (will upgrade nexus to remove GraphQLSchema casting soon) using a onion architecture

export const APISchema = makeSchema({
	types: [
		...Resolvers
	],
	plugins: [
		fieldAuthorizePlugin(),
		connectionPluginCore({})
		connectionPlugin({
			includeNodesField: true,
			extendConnection: {
				totalCount: { type: "Int" },
			},
		}),
	],
}) as unknown as GraphQLSchema;

Here is the inital object

export const BookingObject = objectType({
	name: Booking.$name,
	description: Booking.$description,
	definition(t) {
		t.field(Booking.id);
		t.field(Booking.readableId);
		t.field(Booking.createdAt);
		t.field(Booking.updatedAt);
		t.field(Booking.additionalInformation);
		t.field(Booking.time);
		t.field(Booking.subTotal);
		t.field(Booking.status);
	},
});

Here is the initial api query

const getBookingsByIds: NexusExtendTypeDef<"Query"> = queryField("getBookingsByIds", {
	type: list(nonNull(BookingObject)),
	args: { input: GetBookingsByIdsInput },
	resolve(src, args) {
		return Services.Booking.getBookingsByIds(args.input.bookingIds);
	},
});

here is an example of the repository call

async getBookingsByIds(bookingIds: string[]): Promise<Booking[] | []> {
		return await ServerContext.prisma.booking.findMany({
			where: {
				id: { in: bookingIds },
			},
		});
	}

[ericyd]

Unless I'm misunderstanding, you haven't implemented a connection in your sample query. The type you show is

type: list(nonNull(BookingObject)),

which is a standard list. The connection syntax is different, you'll want to do something like this

const getBookingsByIds: NexusExtendTypeDef<"Query"> = queryField((t) => {
	t.connectionField("getBookingsByIds", {
		type: BookingObject,
		additionalArgs: { input: GetBookingsByIdsInput },
		resolve(src, args) {
			return Services.Booking.getBookingsByIds(args.input.bookingIds);
		}
	}
});

Couple things to note:

1. The queryField builder method takes a callback, not an object. reference
2. The type is the type that will be returned on each node, e.g. the type that would be returned via the JSON path data.getBookingsByIds.edges[*].node (I think that's right 🙃)
3. By default, args will be standard connection pagination args, e.g. first, after, etc. To allow extra args specific to this query, you must use the additionalArgs property on the connection field.

I hope that helps

[Frosty21]

Thanks @ericyd figured it out.
i created a common file within service and put pagination into there with inputs, types and utils to implement pagination consistently within each service and include it into the repository of the ServerContext.prisma.[model].findMany({
searchby, ...getPaginationQueryWithCursor(paginationQuery) })
and also the query resolvers, inputTypes and ObjectTypes