houdini-svelte 0.17.0-next.0

package/src/runtime/index.ts

@@ -0,0 +1,72 @@
+import { QueryStore } from './stores'
+
+export * from './adapter'
+export * from './stores'
+export * from './fragments'
+export * from './session'
+
+type LoadResult = Promise<{ [key: string]: QueryStore<any, {}> }>
+type LoadAllInput = LoadResult | Record<string, LoadResult>
+
+// putting this here was the only way i could find to reliably avoid import issues
+// its really the only thing from lib that users should import so it makes sense to have it here....
+export async function loadAll(
+	...loads: LoadAllInput[]
+): Promise<Record<string, QueryStore<any, {}>>> {
+	// we need to collect all of the promises in a single list that we will await in promise.all and then build up
+	const promises: LoadResult[] = []
+
+	// the question we have to answer is whether entry is a promise or an object of promises
+	const isPromise = (val: LoadAllInput): val is LoadResult =>
+		'then' in val && 'finally' in val && 'catch' in val
+
+	for (const entry of loads) {
+		if (!isPromise(entry) && 'then' in entry) {
+			throw new Error('❌ `then` is not a valid key for an object passed to loadAll')
+		}
+
+		// identify an entry with the `.then` method
+		if (isPromise(entry)) {
+			promises.push(entry)
+		} else {
+			for (const [key, value] of Object.entries(entry)) {
+				if (isPromise(value)) {
+					promises.push(value)
+				} else {
+					throw new Error(
+						`❌ ${key} is not a valid value for an object passed to loadAll. You must pass the result of a load_Store function`
+					)
+				}
+			}
+		}
+	}
+
+	// now that we've collected all of the promises, wait for them
+	await Promise.all(promises)
+
+	// all of the promises are resolved so go back over the value we were given a reconstruct it
+	let result = {}
+
+	for (const entry of loads) {
+		// if we're looking at a promise, it will contain the key
+		if (isPromise(entry)) {
+			Object.assign(result, await entry)
+		} else {
+			Object.assign(
+				result,
+				// await every value in the object and assign it to result
+				Object.fromEntries(
+					await Promise.all(
+						Object.entries(entry).map(async ([key, value]) => [
+							key,
+							Object.values(await value)[0],
+						])
+					)
+				)
+			)
+		}
+	}
+
+	// we're done
+	return result
+}

package/src/runtime/network.ts

@@ -0,0 +1,6 @@
+import { HoudiniClient } from '$houdini/runtime/lib'
+
+export async function getCurrentClient(): Promise<HoudiniClient> {
+	// @ts-ignore
+	return (await import('HOUDINI_CLIENT_PATH')).default
+}

package/src/runtime/session.ts

@@ -0,0 +1,187 @@
+import { marshalInputs } from '$houdini/runtime/lib/scalars'
+import {
+	MutationArtifact,
+	QueryArtifact,
+	QueryResult,
+	SubscriptionArtifact,
+} from '$houdini/runtime/lib/types'
+import { error, LoadEvent, redirect, RequestEvent } from '@sveltejs/kit'
+import { GraphQLError } from 'graphql'
+import { get } from 'svelte/store'
+
+import { isBrowser } from './adapter'
+import { AfterLoadArgs, BeforeLoadArgs, OnErrorArgs } from './types'
+
+const sessionKeyName = '__houdini__session__'
+
+export class RequestContext {
+	private loadEvent: LoadEvent
+	continue: boolean = true
+	returnValue: {} = {}
+
+	constructor(ctx: LoadEvent) {
+		this.loadEvent = ctx
+	}
+
+	error(status: number, message: string | Error): any {
+		throw error(status, typeof message === 'string' ? message : message.message)
+	}
+
+	redirect(status: number, location: string): any {
+		throw redirect(status, location)
+	}
+
+	fetch(input: RequestInfo, init?: RequestInit) {
+		// make sure to bind the window object to the fetch in a browser
+		const fetch =
+			typeof window !== 'undefined' ? this.loadEvent.fetch.bind(window) : this.loadEvent.fetch
+
+		return fetch(input, init)
+	}
+
+	graphqlErrors(payload: { errors?: GraphQLError[] }) {
+		// if we have a list of errors
+		if (payload.errors) {
+			return this.error(500, payload.errors.map(({ message }) => message).join('\n'))
+		}
+
+		return this.error(500, 'Encountered invalid response: ' + JSON.stringify(payload))
+	}
+
+	// This hook fires before executing any queries, it allows custom props to be passed to the component.
+	async invokeLoadHook({
+		variant,
+		hookFn,
+		input,
+		data,
+		error,
+	}: {
+		variant: 'before' | 'after' | 'error'
+		hookFn: KitBeforeLoad | KitAfterLoad | KitOnError
+		input: Record<string, any>
+		data: Record<string, any>
+		error: unknown
+	}) {
+		// call the onLoad function to match the framework
+		let hookCall
+		if (variant === 'before') {
+			hookCall = (hookFn as KitBeforeLoad).call(this, this.loadEvent as BeforeLoadArgs)
+		} else if (variant === 'after') {
+			// we have to assign input and data onto load so that we don't read values that
+			// are deprecated and generate warnings when read
+			hookCall = (hookFn as KitAfterLoad).call(this, {
+				event: this.loadEvent,
+				input,
+				data: Object.fromEntries(
+					Object.entries(data).map(([key, store]) => [
+						key,
+						get<QueryResult<any, any>>(store).data,
+					])
+				),
+			} as AfterLoadArgs)
+		} else if (variant === 'error') {
+			hookCall = (hookFn as KitOnError).call(this, {
+				event: this.loadEvent,
+				input,
+				error,
+			} as OnErrorArgs)
+		}
+
+		// make sure any promises are resolved
+		let result = await hookCall
+
+		// If the returnValue is already set through this.error or this.redirect return early
+		if (!this.continue) {
+			return
+		}
+		// If the result is null or undefined, or the result isn't an object return early
+		if (result == null || typeof result !== 'object') {
+			return
+		}
+
+		this.returnValue = result
+	}
+
+	// compute the inputs for an operation should reflect the framework's conventions.
+	async computeInput({
+		variableFunction,
+		artifact,
+	}: {
+		variableFunction: KitBeforeLoad
+		artifact: QueryArtifact | MutationArtifact | SubscriptionArtifact
+	}) {
+		// call the variable function to match the framework
+		let input = await variableFunction.call(this, this.loadEvent)
+
+		return await marshalInputs({ artifact, input })
+	}
+}
+
+type KitBeforeLoad = (ctx: BeforeLoadArgs) => Record<string, any> | Promise<Record<string, any>>
+type KitAfterLoad = (ctx: AfterLoadArgs) => Record<string, any>
+type KitOnError = (ctx: OnErrorArgs) => Record<string, any>
+
+const sessionSentinel = {}
+// @ts-ignore
+let session: App.Session | {} = sessionSentinel
+
+export function extractSession(val: {
+	[sessionKeyName]: // @ts-ignore
+	App.Session
+}) {
+	return val[sessionKeyName]
+}
+
+export function buildSessionObject(event: RequestEvent) {
+	return {
+		[sessionKeyName]: extractSession(event.locals as any),
+	}
+}
+
+export function setClientSession(
+	// @ts-ignore
+	val: App.Session
+) {
+	if (!isBrowser) {
+		return
+	}
+
+	session = val
+}
+
+// @ts-ignore
+export function getClientSession(): App.Session {
+	return session
+}
+
+export function setSession(
+	event: RequestEvent,
+	session: // @ts-ignore
+	App.Session
+) {
+	;(event.locals as any)[sessionKeyName] = session
+}
+
+export async function getSession(event?: RequestEvent | LoadEvent): Promise<
+	| {}
+	// @ts-ignore
+	| App.Session
+> {
+	if (event) {
+		// get the session either from the server side event or the client side event
+		if ('locals' in event) {
+			// this is a server side event (RequestEvent) -> extract the session from locals
+			return extractSession(event.locals as any) || sessionSentinel
+		}
+		// the session data could also already be present in the data field
+		else if ('data' in event && event.data && sessionKeyName in event.data) {
+			// @ts-ignore
+			return extractSession(event.data) || sessionSentinel
+		} else {
+			// this is a client side event -> await the parent data which include the session
+			return extractSession((await event.parent()) as any) || sessionSentinel
+		}
+	}
+
+	return session
+}

package/src/runtime/stores/fragment.ts

@@ -0,0 +1,48 @@
+import {
+	CompiledFragmentKind,
+	GraphQLObject,
+	FragmentArtifact,
+	HoudiniFetchContext,
+} from '$houdini/runtime/lib/types'
+import { Writable, writable } from 'svelte/store'
+import type { Readable } from 'svelte/store'
+
+import { BaseStore } from './store'
+
+// a fragment store exists in multiple places in a given application so we
+// can't just return a store directly, the user has to load the version of the
+// fragment store for the object the store has been mixed into
+export class FragmentStore<
+	_Data extends GraphQLObject,
+	_Input = {},
+	_ExtraFields = {}
+> extends BaseStore {
+	artifact: FragmentArtifact
+	name: string
+	kind = CompiledFragmentKind
+
+	protected context: HoudiniFetchContext | null = null
+
+	constructor({ artifact, storeName }: { artifact: FragmentArtifact; storeName: string }) {
+		super()
+		this.artifact = artifact
+		this.name = storeName
+	}
+
+	get(initialValue: _Data | null) {
+		// at the moment a fragment store doesn't really do anything
+		// but we're going to keep it wrapped in a store so we can eventually
+		// optimize the updates
+		let store = writable(initialValue) as Writable<(_Data | null) & _ExtraFields>
+
+		return {
+			kind: CompiledFragmentKind,
+			subscribe: (
+				...args: Parameters<Readable<(_Data | null) & _ExtraFields>['subscribe']>
+			) => {
+				return store.subscribe(...args)
+			},
+			update: (val: (_Data | null) & _ExtraFields) => store?.set(val),
+		}
+	}
+}

package/src/runtime/stores/index.ts

@@ -0,0 +1,5 @@
+export * from './pagination'
+export { FragmentStore } from './fragment'
+export { SubscriptionStore } from './subscription'
+export { MutationStore, type MutationConfig } from './mutation'
+export { QueryStore, type QueryStoreFetchParams } from './query'

package/src/runtime/stores/mutation.ts

@@ -0,0 +1,185 @@
+import { getCache } from '$houdini/runtime'
+import { executeQuery } from '$houdini/runtime/lib/network'
+import { marshalInputs, marshalSelection, unmarshalSelection } from '$houdini/runtime/lib/scalars'
+import type { SubscriptionSpec, MutationArtifact } from '$houdini/runtime/lib/types'
+import { GraphQLObject } from '$houdini/runtime/lib/types'
+import { Readable } from 'svelte/store'
+import { Writable, writable } from 'svelte/store'
+
+import { getCurrentClient } from '../network'
+import { getSession } from '../session'
+import { BaseStore } from './store'
+
+export class MutationStore<
+	_Data extends GraphQLObject,
+	_Input extends {},
+	_Optimistic extends GraphQLObject
+> extends BaseStore {
+	artifact: MutationArtifact
+	kind = 'HoudiniMutation' as const
+
+	private store: Writable<MutationResult<_Data, _Input>>
+
+	constructor({ artifact }: { artifact: MutationArtifact }) {
+		super()
+		this.artifact = artifact
+		this.store = writable(this.nullState)
+	}
+
+	async mutate(
+		variables: _Input,
+		{
+			metadata,
+			fetch,
+			...mutationConfig
+		}: {
+			// @ts-ignore
+			metadata?: App.Metadata
+			fetch?: typeof globalThis.fetch
+		} & MutationConfig<_Data, _Input, _Optimistic> = {}
+	): Promise<_Data> {
+		const cache = getCache()
+		const config = await this.getConfig()
+
+		this.store.update((c) => {
+			return { ...c, isFetching: true }
+		})
+
+		// treat a mutation like it has an optimistic layer regardless of
+		// whether there actually _is_ one. This ensures that a query which fires
+		// after this mutation has been sent will overwrite any return values from the mutation
+		//
+		// as far as I can tell, this is an arbitrary decision but it does give a
+		// well-defined ordering to a subtle situation so that seems like a win
+		//
+		const layer = cache._internal_unstable.storage.createLayer(true)
+
+		// if there is an optimistic response then we need to write the value immediately
+		const optimisticResponse = mutationConfig?.optimisticResponse
+		// hold onto the list of subscribers that we updated because of the optimistic response
+		// and make sure they are included in the final set of subscribers to notify
+		let toNotify: SubscriptionSpec[] = []
+		if (optimisticResponse) {
+			toNotify = cache.write({
+				selection: this.artifact.selection,
+				// make sure that any scalar values get processed into something we can cache
+				data: (await marshalSelection({
+					selection: this.artifact.selection,
+					data: optimisticResponse,
+				}))!,
+				variables,
+				layer: layer.id,
+			})
+		}
+
+		const newVariables = (await marshalInputs({
+			input: variables,
+			artifact: this.artifact,
+		})) as _Input
+
+		try {
+			// trigger the mutation
+			const { result } = await executeQuery({
+				client: await getCurrentClient(),
+				config,
+				artifact: this.artifact,
+				variables: newVariables,
+				session: await getSession(),
+				cached: false,
+				metadata,
+				fetch,
+			})
+
+			if (result.errors && result.errors.length > 0) {
+				this.store.update((s) => ({
+					...s,
+					errors: result.errors,
+					isFetching: false,
+					isOptimisticResponse: false,
+					data: result.data,
+					variables: (newVariables || {}) as _Input,
+				}))
+				throw result.errors
+			}
+
+			// clear the layer holding any mutation results
+			layer.clear()
+
+			// write the result of the mutation to the cache
+			cache.write({
+				selection: this.artifact.selection,
+				data: result.data,
+				variables: newVariables,
+				// write to the mutation's layer
+				layer: layer.id,
+				// notify any subscribers that we updated with the optimistic response
+				// in order to address situations where the optimistic update was wrong
+				notifySubscribers: toNotify,
+				// make sure that we notify subscribers for any values that we overwrite
+				// in order to address any race conditions when comparing the previous value
+				forceNotify: true,
+			})
+
+			// merge the layer back into the cache
+			cache._internal_unstable.storage.resolveLayer(layer.id)
+
+			// prepare store data
+			const storeData: MutationResult<_Data, _Input> = {
+				data: unmarshalSelection(config, this.artifact.selection, result.data) as _Data,
+				errors: result.errors ?? null,
+				isFetching: false,
+				isOptimisticResponse: false,
+				variables: newVariables,
+			}
+
+			// update the store value
+			this.store.set(storeData)
+
+			// return the value to the caller
+			return storeData.data ?? ({} as _Data)
+		} catch (error) {
+			this.store.update((s) => ({
+				...s,
+				errors: error as { message: string }[],
+				isFetching: false,
+				isOptimisticResponse: false,
+				data: null,
+				variables: newVariables,
+			}))
+
+			// if the mutation failed, roll the layer back and delete it
+			layer.clear()
+			cache._internal_unstable.storage.resolveLayer(layer.id)
+
+			// bubble the mutation error up to the caller
+			throw error
+		}
+	}
+
+	subscribe(...args: Parameters<Readable<MutationResult<_Data, _Input>>['subscribe']>) {
+		// use it's value
+		return this.store.subscribe(...args)
+	}
+
+	private get nullState() {
+		return {
+			data: null as _Data | null,
+			errors: null,
+			isFetching: false,
+			isOptimisticResponse: false,
+			variables: null,
+		}
+	}
+}
+
+export type MutationConfig<_Result, _Input, _Optimistic> = {
+	optimisticResponse?: _Optimistic
+}
+
+export type MutationResult<_Data, _Input> = {
+	data: _Data | null
+	errors: { message: string }[] | null
+	isFetching: boolean
+	isOptimisticResponse: boolean
+	variables: _Input | null
+}