houdini-svelte 0.17.0-next.0

package/src/runtime/stores/pagination/cursor.ts

@@ -0,0 +1,265 @@
+import { getCache } from '$houdini/runtime'
+import { ConfigFile } from '$houdini/runtime/lib/config'
+import { siteURL } from '$houdini/runtime/lib/constants'
+import { deepEquals } from '$houdini/runtime/lib/deepEquals'
+import { executeQuery } from '$houdini/runtime/lib/network'
+import { GraphQLObject, QueryArtifact, QueryResult } from '$houdini/runtime/lib/types'
+import { Writable, writable } from 'svelte/store'
+
+import { getCurrentClient } from '../../network'
+import { getSession } from '../../session'
+import { QueryStoreFetchParams } from '../query'
+import { fetchParams } from '../query'
+import { FetchFn } from './fetch'
+import { countPage, extractPageInfo, missingPageSizeError, PageInfo } from './pageInfo'
+
+export function cursorHandlers<_Data extends GraphQLObject, _Input>({
+	artifact,
+	queryVariables: extraVariables,
+	setFetching,
+	fetch,
+	storeName,
+	getValue,
+	getConfig,
+}: {
+	artifact: QueryArtifact
+	getValue: () => _Data | null
+	queryVariables: () => Promise<_Input | null>
+	setFetching: (val: boolean) => void
+	fetch: FetchFn<_Data, _Input>
+	storeName: string
+	getConfig: () => Promise<ConfigFile>
+}): CursorHandlers<_Data, _Input> {
+	const pageInfo = writable<PageInfo>(extractPageInfo(getValue(), artifact.refetch!.path))
+
+	// dry up the page-loading logic
+	const loadPage = async ({
+		pageSizeVar,
+		input,
+		functionName,
+		metadata = {},
+		fetch,
+	}: {
+		pageSizeVar: string
+		functionName: string
+		input: {}
+		metadata?: {}
+		fetch?: typeof globalThis.fetch
+	}) => {
+		const config = await getConfig()
+		const client = await getCurrentClient()
+
+		// set the loading state to true
+		setFetching(true)
+
+		// build up the variables to pass to the query
+		const loadVariables: Record<string, any> = {
+			...(await extraVariables?.()),
+			...input,
+		}
+
+		// if we don't have a value for the page size, tell the user
+		if (!loadVariables[pageSizeVar] && !artifact.refetch!.pageSize) {
+			throw missingPageSizeError(functionName)
+		}
+
+		// send the query
+		const { result } = await executeQuery<GraphQLObject, {}>({
+			client,
+			artifact,
+			variables: loadVariables,
+			session: await getSession(),
+			cached: false,
+			config,
+			fetch,
+			metadata,
+		})
+
+		// if the query is embedded in a node field (paginated fragments)
+		// make sure we look down one more for the updated page info
+		const resultPath = [...artifact.refetch!.path]
+		if (artifact.refetch!.embedded) {
+			const { targetType } = artifact.refetch!
+			// make sure we have a type config for the pagination target type
+			if (!config.types?.[targetType]?.resolve) {
+				throw new Error(
+					`Missing type resolve configuration for ${targetType}. For more information, see ${siteURL}/guides/pagination#paginated-fragments`
+				)
+			}
+
+			// make sure that we pull the value out of the correct query field
+			resultPath.unshift(config.types[targetType].resolve!.queryField)
+		}
+
+		// we need to find the connection object holding the current page info
+		pageInfo.set(extractPageInfo(result.data, resultPath))
+
+		// update cache with the result
+		getCache().write({
+			selection: artifact.selection,
+			data: result.data,
+			variables: loadVariables,
+			applyUpdates: true,
+		})
+
+		// we're not loading any more
+		setFetching(false)
+	}
+
+	return {
+		loadNextPage: async ({
+			first,
+			after,
+			fetch,
+			metadata,
+		}: {
+			first?: number
+			after?: string
+			fetch?: typeof globalThis.fetch
+			metadata?: {}
+		} = {}) => {
+			// we need to find the connection object holding the current page info
+			const currentPageInfo = extractPageInfo(getValue(), artifact.refetch!.path)
+
+			// if there is no next page, we're done
+			if (!currentPageInfo.hasNextPage) {
+				return
+			}
+
+			// only specify the page count if we're given one
+			const input: Record<string, any> = {
+				after: after ?? currentPageInfo.endCursor,
+			}
+			if (first) {
+				input.first = first
+			}
+
+			// load the page
+			return await loadPage({
+				pageSizeVar: 'first',
+				functionName: 'loadNextPage',
+				input,
+				fetch,
+				metadata,
+			})
+		},
+		loadPreviousPage: async ({
+			last,
+			before,
+			fetch,
+			metadata,
+		}: {
+			last?: number
+			before?: string
+			fetch?: typeof globalThis.fetch
+			metadata?: {}
+		} = {}) => {
+			// we need to find the connection object holding the current page info
+			const currentPageInfo = extractPageInfo(getValue(), artifact.refetch!.path)
+
+			// if there is no next page, we're done
+			if (!currentPageInfo.hasPreviousPage) {
+				return
+			}
+
+			// only specify the page count if we're given one
+			const input: Record<string, any> = {
+				before: before ?? currentPageInfo.startCursor,
+			}
+			if (last) {
+				input.last = last
+			}
+
+			// load the page
+			return await loadPage({
+				pageSizeVar: 'last',
+				functionName: 'loadPreviousPage',
+				input,
+				fetch,
+				metadata,
+			})
+		},
+		pageInfo,
+		async fetch(
+			args?: QueryStoreFetchParams<_Data, _Input>
+		): Promise<QueryResult<_Data, _Input>> {
+			// validate and prepare the request context for the current environment (client vs server)
+			const { params } = await fetchParams(artifact, storeName, args)
+
+			const { variables } = params ?? {}
+
+			// build up the variables to pass to the query
+			const extra = await extraVariables()
+			const queryVariables: Record<string, any> = {
+				...extra,
+				...variables,
+			}
+
+			// if the input is different than the query variables then we just do everything like normal
+			if (variables && !deepEquals(extra, variables)) {
+				const result = await fetch({
+					...params,
+					then(data) {
+						pageInfo.set(extractPageInfo(data, artifact.refetch!.path))
+					},
+				})
+				return result
+			}
+
+			// we are updating the current set of items, count the number of items that currently exist
+			// and ask for the full data set
+			const count =
+				countPage(artifact.refetch!.path.concat('edges'), getValue()) ||
+				artifact.refetch!.pageSize
+
+			// if there are more records than the first page, we need fetch to load everything
+			if (count && count > artifact.refetch!.pageSize) {
+				// reverse cursors need the last entries in the list
+				queryVariables[artifact.refetch!.update === 'prepend' ? 'last' : 'first'] = count
+			}
+
+			// set the loading state to true
+			setFetching(true)
+
+			// send the query
+			const result = await fetch({
+				...params,
+				variables: queryVariables as _Input,
+			})
+
+			// keep the page info store up to date
+			pageInfo.set(extractPageInfo(result.data, artifact.refetch!.path))
+
+			// we're not loading any more
+			setFetching(false)
+
+			return {
+				data: result.data,
+				variables: queryVariables as _Input,
+				isFetching: false,
+				partial: result.partial,
+				errors: null,
+				source: result.source,
+			}
+		},
+	}
+}
+
+export type CursorHandlers<_Data extends GraphQLObject, _Input> = {
+	loadNextPage: (args?: {
+		first?: number
+		after?: string
+		fetch?: typeof globalThis.fetch
+		metadata: {}
+	}) => Promise<void>
+	loadPreviousPage: (args?: {
+		last?: number
+		before?: string
+		fetch?: typeof globalThis.fetch
+		metadata?: {}
+	}) => Promise<void>
+	pageInfo: Writable<PageInfo>
+	fetch(
+		args?: QueryStoreFetchParams<_Data, _Input> | undefined
+	): Promise<QueryResult<_Data, _Input>>
+}

package/src/runtime/stores/pagination/fetch.ts

@@ -0,0 +1,7 @@
+import { GraphQLObject, QueryResult } from '$houdini/runtime/lib/types'
+
+import { QueryStoreFetchParams } from '../query'
+
+export type FetchFn<_Data extends GraphQLObject, _Input = any> = (
+	params?: QueryStoreFetchParams<_Data, _Input>
+) => Promise<QueryResult<_Data, _Input>>

package/src/runtime/stores/pagination/fragment.ts

@@ -0,0 +1,236 @@
+import { keyFieldsForType, getCurrentConfig } from '$houdini/runtime/lib/config'
+import { siteURL } from '$houdini/runtime/lib/constants'
+import {
+	GraphQLObject,
+	FragmentArtifact,
+	QueryArtifact,
+	HoudiniFetchContext,
+	CompiledFragmentKind,
+} from '$houdini/runtime/lib/types'
+import { derived, get, Readable, Subscriber, Writable, writable } from 'svelte/store'
+
+import { StoreConfig } from '../query'
+import { BaseStore } from '../store'
+import { cursorHandlers, CursorHandlers } from './cursor'
+import { offsetHandlers } from './offset'
+import { nullPageInfo, PageInfo } from './pageInfo'
+
+type FragmentStoreConfig<_Data extends GraphQLObject, _Input> = StoreConfig<
+	_Data,
+	_Input,
+	FragmentArtifact
+> & { paginationArtifact: QueryArtifact }
+
+class BasePaginatedFragmentStore<_Data extends GraphQLObject, _Input> extends BaseStore {
+	// all paginated stores need to have a flag to distinguish from other fragment stores
+	paginated = true
+
+	protected paginationArtifact: QueryArtifact
+	name: string
+	kind = CompiledFragmentKind
+
+	constructor(config: FragmentStoreConfig<_Data, _Input>) {
+		super()
+		this.paginationArtifact = config.paginationArtifact
+		this.name = config.storeName
+	}
+
+	protected async queryVariables(
+		store: Readable<FragmentPaginatedResult<_Data, unknown>>
+	): Promise<_Input> {
+		const config = await getCurrentConfig()
+
+		const { targetType } = this.paginationArtifact.refetch || {}
+		const typeConfig = config.types?.[targetType || '']
+		if (!typeConfig) {
+			throw new Error(
+				`Missing type refetch configuration for ${targetType}. For more information, see ${siteURL}/guides/pagination#paginated-fragments`
+			)
+		}
+
+		// if we have a specific function to use when computing the variables
+		// then we need to collect those fields
+		let idVariables = {}
+		const value = get(store).data
+		if (typeConfig.resolve?.arguments) {
+			// @ts-ignore
+			idVariables = (typeConfig.resolve!.arguments?.(value) || {}) as _Input
+		} else {
+			const keys = keyFieldsForType(config, targetType || '')
+			// @ts-ignore
+			idVariables = Object.fromEntries(keys.map((key) => [key, value[key]])) as _Input
+		}
+
+		// add the id variables to the query variables
+		return {
+			...idVariables,
+		} as _Input
+	}
+}
+
+// both cursor paginated stores add a page info to their subscribe
+class FragmentStoreCursor<_Data extends GraphQLObject, _Input> extends BasePaginatedFragmentStore<
+	_Data,
+	_Input
+> {
+	// we want to add the cursor-based fetch to the return value of get
+	get(initialValue: _Data | null) {
+		const store = writable<FragmentPaginatedResult<_Data, { pageInfo: PageInfo }>>({
+			data: initialValue,
+			isFetching: false,
+			pageInfo: nullPageInfo(),
+		})
+
+		// track the loading state
+		const loading = writable(false)
+
+		// generate the pagination handlers
+		const handlers = this.storeHandlers(store, loading.set)
+
+		const subscribe = (
+			run: Subscriber<FragmentPaginatedResult<_Data, { pageInfo: PageInfo }>>,
+			invalidate?:
+				| ((
+						value?: FragmentPaginatedResult<_Data, { pageInfo: PageInfo }> | undefined
+				  ) => void)
+				| undefined
+		): (() => void) => {
+			const combined = derived(
+				[store, handlers.pageInfo],
+				([$parent, $pageInfo]) =>
+					({
+						...$parent,
+						pageInfo: $pageInfo,
+					} as FragmentPaginatedResult<_Data, { pageInfo: PageInfo }>)
+			)
+
+			return combined.subscribe(run, invalidate)
+		}
+
+		return {
+			kind: CompiledFragmentKind,
+			data: store,
+			subscribe: subscribe,
+			loading: loading as Readable<boolean>,
+			fetch: handlers.fetch,
+			pageInfo: handlers.pageInfo,
+		}
+	}
+
+	protected storeHandlers(
+		store: Readable<FragmentPaginatedResult<_Data, unknown>>,
+		setFetching: (val: boolean) => void
+	): CursorHandlers<_Data, _Input> {
+		return cursorHandlers<_Data, _Input>({
+			artifact: this.paginationArtifact,
+			fetch: async () => {
+				return {} as any
+			},
+			getValue: () => get(store).data,
+			queryVariables: () => this.queryVariables(store),
+			setFetching,
+			storeName: this.name,
+			getConfig: () => this.getConfig(),
+		})
+	}
+}
+
+// FragmentStoreForwardCursor adds loadNextPage to FragmentStoreCursor
+export class FragmentStoreForwardCursor<
+	_Data extends GraphQLObject,
+	_Input
+> extends FragmentStoreCursor<_Data, _Input> {
+	get(initialValue: _Data | null) {
+		// get the base class
+		const parent = super.get(initialValue)
+
+		// generate the pagination handlers
+		const handlers = this.storeHandlers(
+			parent,
+			// it really is a writable under the hood :(
+			(parent.loading as unknown as Writable<boolean>).set
+		)
+
+		return {
+			...parent,
+			// add the specific handlers for this situation
+			loadNextPage: handlers.loadNextPage,
+		}
+	}
+}
+
+// BackwardFragmentStoreCursor adds loadPreviousPage to FragmentStoreCursor
+export class FragmentStoreBackwardCursor<
+	_Data extends GraphQLObject,
+	_Input
+> extends FragmentStoreCursor<_Data, _Input> {
+	get(initialValue: _Data | null) {
+		const parent = super.get(initialValue)
+
+		// generate the pagination handlers
+		const handlers = this.storeHandlers(
+			parent,
+			// it really is a writable under the hood :(
+			(isFetching: boolean) => parent.data.update((p) => ({ ...p, isFetching }))
+		)
+
+		return {
+			...parent,
+			// add the specific handlers for this situation
+			loadPreviousPage: handlers.loadPreviousPage,
+		}
+	}
+}
+
+export class FragmentStoreOffset<
+	_Data extends GraphQLObject,
+	_Input
+> extends BasePaginatedFragmentStore<_Data, _Input> {
+	get(initialValue: _Data | null) {
+		const parent = writable<FragmentPaginatedResult<_Data>>({
+			data: initialValue,
+			isFetching: false,
+		})
+
+		// create the offset handlers we'll add to the store
+		const handlers = offsetHandlers<_Data, _Input>({
+			artifact: this.paginationArtifact,
+			fetch: async () => ({} as any),
+			getValue: () => get(parent).data,
+			setFetching: (isFetching: boolean) => parent.update((p) => ({ ...p, isFetching })),
+			queryVariables: () => this.queryVariables({ subscribe: parent.subscribe }),
+			storeName: this.name,
+			getConfig: () => this.getConfig(),
+		})
+
+		// add the offset handlers
+		return {
+			...parent,
+			kind: CompiledFragmentKind,
+			fetch: handlers.fetch,
+			loadNextPage: handlers.loadNextPage,
+		}
+	}
+}
+
+export type FragmentStorePaginated<_Data extends GraphQLObject, _Input> = Readable<{
+	data: _Data
+	isFetching: boolean
+	pageInfo: PageInfo
+}> & {
+	loadNextPage(
+		pageCount?: number,
+		after?: string | number,
+		houdiniContext?: HoudiniFetchContext
+	): Promise<void>
+	loadPreviousPage(
+		pageCount?: number,
+		before?: string,
+		houdiniContext?: HoudiniFetchContext
+	): Promise<void>
+}
+
+export type FragmentPaginatedResult<_Data, _ExtraFields = {}> = {
+	data: _Data | null
+	isFetching: boolean
+} & _ExtraFields

package/src/runtime/stores/pagination/index.ts

@@ -0,0 +1,7 @@
+export {
+	FragmentStoreBackwardCursor,
+	FragmentStoreForwardCursor,
+	FragmentStoreOffset,
+} from './fragment'
+
+export { QueryStoreBackwardCursor, QueryStoreForwardCursor, QueryStoreOffset } from './query'

package/src/runtime/stores/pagination/offset.ts

@@ -0,0 +1,162 @@
+import { getCache } from '$houdini/runtime'
+import { ConfigFile } from '$houdini/runtime/lib/config'
+import { deepEquals } from '$houdini/runtime/lib/deepEquals'
+import { executeQuery } from '$houdini/runtime/lib/network'
+import { GraphQLObject, QueryArtifact, QueryResult } from '$houdini/runtime/lib/types'
+
+import { getCurrentClient } from '../../network'
+import { getSession } from '../../session'
+import { QueryStoreFetchParams } from '../query'
+import { fetchParams } from '../query'
+import { FetchFn } from './fetch'
+import { countPage, missingPageSizeError } from './pageInfo'
+
+export function offsetHandlers<_Data extends GraphQLObject, _Input>({
+	artifact,
+	queryVariables: extraVariables,
+	fetch,
+	getValue,
+	setFetching,
+	storeName,
+	getConfig,
+}: {
+	artifact: QueryArtifact
+	queryVariables: () => Promise<_Input | null>
+	fetch: FetchFn<_Data, _Input>
+	getValue: () => _Data | null
+	storeName: string
+	setFetching: (val: boolean) => void
+	getConfig: () => Promise<ConfigFile>
+}) {
+	// we need to track the most recent offset for this handler
+	let getOffset = () =>
+		(artifact.refetch?.start as number) ||
+		countPage(artifact.refetch!.path, getValue()) ||
+		artifact.refetch!.pageSize
+
+	let currentOffset = getOffset() ?? 0
+
+	return {
+		loadNextPage: async ({
+			limit,
+			offset,
+			fetch,
+			metadata,
+		}: {
+			limit?: number
+			offset?: number
+			fetch?: typeof globalThis.fetch
+			metadata?: {}
+		} = {}) => {
+			const config = await getConfig()
+
+			// if the offset is zero then we want to count it just to make sure
+			// hence why (|| and not ??)
+			offset ??= currentOffset || getOffset()
+
+			// build up the variables to pass to the query
+			const queryVariables: Record<string, any> = {
+				...(await extraVariables()),
+				offset,
+			}
+			if (limit || limit === 0) {
+				queryVariables.limit = limit
+			}
+
+			// if we made it this far without a limit argument and there's no default page size,
+			// they made a mistake
+			if (!queryVariables.limit && !artifact.refetch!.pageSize) {
+				throw missingPageSizeError('loadNextPage')
+			}
+
+			// set the loading state to true
+			setFetching(true)
+
+			// send the query
+			const { result } = await executeQuery<GraphQLObject, {}>({
+				client: await getCurrentClient(),
+				artifact,
+				variables: queryVariables,
+				session: await getSession(),
+				cached: false,
+				config,
+				fetch,
+				metadata,
+			})
+
+			// update cache with the result
+			getCache().write({
+				selection: artifact.selection,
+				data: result.data,
+				variables: queryVariables,
+				applyUpdates: true,
+			})
+
+			// add the page size to the offset so we load the next page next time
+			const pageSize = queryVariables.limit || artifact.refetch!.pageSize
+			currentOffset = offset + pageSize
+
+			// we're not loading any more
+			setFetching(false)
+		},
+		async fetch(
+			args?: QueryStoreFetchParams<_Data, _Input>
+		): Promise<QueryResult<_Data, _Input>> {
+			const { params } = await fetchParams(artifact, storeName, args)
+
+			const { variables } = params ?? {}
+
+			const extra = await extraVariables()
+
+			// if the input is different than the query variables then we just do everything like normal
+			if (variables && !deepEquals(extra, variables)) {
+				return fetch.call(this, params)
+			}
+
+			// we are updating the current set of items, count the number of items that currently exist
+			// and ask for the full data set
+			const count = currentOffset || getOffset()
+
+			// build up the variables to pass to the query
+			const queryVariables: Record<string, any> = {
+				...extra,
+			}
+
+			// if there are more records than the first page, we need fetch to load everything
+			if (!artifact.refetch!.pageSize || count > artifact.refetch!.pageSize) {
+				queryVariables.limit = count
+			}
+
+			// set the loading state to true
+			setFetching(true)
+
+			// send the query
+			const result = await fetch.call(this, {
+				...params,
+				variables: queryVariables as _Input,
+			})
+
+			// we're not loading any more
+			setFetching(false)
+
+			return {
+				data: result.data,
+				variables: queryVariables as _Input,
+				isFetching: false,
+				partial: result.partial,
+				errors: null,
+				source: result.source,
+			}
+		},
+	}
+}
+
+export type OffsetHandlers<_Data extends GraphQLObject, _Input, _ReturnType> = {
+	loadNextPage: (args?: {
+		limit?: number
+		offset?: number
+		metadata?: {}
+		fetch?: typeof globalThis.fetch
+	}) => Promise<void>
+	fetch(args?: QueryStoreFetchParams<_Data, _Input> | undefined): Promise<_ReturnType>
+}