houdini-svelte 0.17.0-next.0

package/src/plugin/codegen/stores/query.test.ts

@@ -0,0 +1,504 @@
+import { fs, CollectedGraphQLDocument, path } from 'houdini'
+import { mockCollectedDoc } from 'houdini/test'
+import * as recast from 'recast'
+import * as typeScriptParser from 'recast/parsers/typescript'
+import { test, expect } from 'vitest'
+
+import runPipeline from '..'
+import '../..'
+import { pipeline_test, test_config } from '../../../test'
+import { stores_directory } from '../../kit'
+
+test('generates a store for every query', async function () {
+	const config = await test_config()
+	const plugin_root = config.pluginDirectory('test-plugin')
+
+	// the documents to test
+	const docs: CollectedGraphQLDocument[] = [
+		mockCollectedDoc(`query TestQuery1 { version }`),
+		mockCollectedDoc(`query TestQuery2 { version }`),
+	]
+
+	// execute the generator
+	await runPipeline({ config, documents: docs, plugin_root, framework: 'kit' })
+
+	// look up the files in the artifact directory
+	const files = await fs.readdir(stores_directory(plugin_root))
+
+	// and they have the right names
+	expect(files).toEqual(expect.arrayContaining(['TestQuery1.js', 'TestQuery2.js']))
+	// and type definitions exist
+	expect(files).toEqual(expect.arrayContaining(['TestQuery1.d.ts', 'TestQuery2.d.ts']))
+})
+
+test('basic store', async function () {
+	const docs = [`query TestQuery { version }`]
+
+	const { plugin_root } = await pipeline_test(docs)
+
+	const contents = await fs.readFile(path.join(stores_directory(plugin_root), 'TestQuery.js'))
+
+	// parse the contents
+	const parsed = recast.parse(contents!, {
+		parser: typeScriptParser,
+	}).program
+
+	// check the file contents
+	await expect(parsed).toMatchInlineSnapshot(`
+		import { QueryStore } from '../runtime/stores'
+		import artifact from '$houdini/artifacts/TestQuery'
+
+		// create the query store
+
+		export class TestQueryStore extends QueryStore {
+			constructor() {
+				super({
+					artifact,
+					storeName: "TestQueryStore",
+					variables: false,
+				})
+			}
+		}
+
+		export async function load_TestQuery(params) {
+			const store = new TestQueryStore()
+
+			await store.fetch(params)
+
+			return {
+				TestQuery: store,
+			}
+		}
+
+		export const GQL_TestQuery = new TestQueryStore()
+
+		export default GQL_TestQuery
+	`)
+})
+
+test('change globalStorePrefix to "yop___"', async function () {
+	const docs = [`query TestQuery { version }`]
+
+	const { plugin_root } = await pipeline_test(docs, {
+		plugins: {
+			'houdini-svelte': {
+				client: '',
+				globalStorePrefix: 'yop___',
+			},
+		},
+	})
+
+	const contents = await fs.readFile(path.join(stores_directory(plugin_root), 'TestQuery.js'))
+
+	// parse the contents
+	const parsed = recast.parse(contents!, {
+		parser: typeScriptParser,
+	}).program
+
+	// check the file contents
+	await expect(parsed).toMatchInlineSnapshot(`
+		import { QueryStore } from '../runtime/stores'
+		import artifact from '$houdini/artifacts/TestQuery'
+
+		// create the query store
+
+		export class TestQueryStore extends QueryStore {
+			constructor() {
+				super({
+					artifact,
+					storeName: "TestQueryStore",
+					variables: false,
+				})
+			}
+		}
+
+		export async function load_TestQuery(params) {
+			const store = new TestQueryStore()
+
+			await store.fetch(params)
+
+			return {
+				TestQuery: store,
+			}
+		}
+
+		export const yop___TestQuery = new TestQueryStore()
+
+		export default yop___TestQuery
+	`)
+})
+
+test('change globalStorePrefix to ""', async function () {
+	const docs = [`query TestQuery { version }`]
+
+	const { plugin_root } = await pipeline_test(docs, {
+		plugins: {
+			'houdini-svelte': {
+				client: '',
+				globalStorePrefix: '',
+			},
+		},
+	})
+
+	const contents = await fs.readFile(path.join(stores_directory(plugin_root), 'TestQuery.js'))
+
+	// parse the contents
+	const parsed = recast.parse(contents!, {
+		parser: typeScriptParser,
+	}).program
+
+	// check the file contents
+	await expect(parsed).toMatchInlineSnapshot(`
+		import { QueryStore } from '../runtime/stores'
+		import artifact from '$houdini/artifacts/TestQuery'
+
+		// create the query store
+
+		export class TestQueryStore extends QueryStore {
+			constructor() {
+				super({
+					artifact,
+					storeName: "TestQueryStore",
+					variables: false,
+				})
+			}
+		}
+
+		export async function load_TestQuery(params) {
+			const store = new TestQueryStore()
+
+			await store.fetch(params)
+
+			return {
+				TestQuery: store,
+			}
+		}
+
+		export const TestQuery = new TestQueryStore()
+
+		export default TestQuery
+	`)
+})
+
+test('store with required variables', async function () {
+	const docs = [`query TestQuery($intValue: Int!) { usersByOffset(offset: $intValue) { id }  }`]
+
+	const { plugin_root } = await pipeline_test(docs)
+
+	const contents = await fs.readFile(path.join(stores_directory(plugin_root), 'TestQuery.js'))
+
+	// parse the contents
+	const parsed = recast.parse(contents!, {
+		parser: typeScriptParser,
+	}).program
+
+	// check the file contents
+	await expect(parsed).toMatchInlineSnapshot(`
+		import { QueryStore } from '../runtime/stores'
+		import artifact from '$houdini/artifacts/TestQuery'
+
+		// create the query store
+
+		export class TestQueryStore extends QueryStore {
+			constructor() {
+				super({
+					artifact,
+					storeName: "TestQueryStore",
+					variables: true,
+				})
+			}
+		}
+
+		export async function load_TestQuery(params) {
+			const store = new TestQueryStore()
+
+			await store.fetch(params)
+
+			return {
+				TestQuery: store,
+			}
+		}
+
+		export const GQL_TestQuery = new TestQueryStore()
+
+		export default GQL_TestQuery
+	`)
+})
+
+test('store with nullable variables', async function () {
+	const docs = [`query TestQuery($intValue: Int) { usersByOffset(offset: $intValue) { id }  }`]
+
+	const { plugin_root } = await pipeline_test(docs)
+
+	const contents = await fs.readFile(path.join(stores_directory(plugin_root), 'TestQuery.js'))
+
+	// parse the contents
+	const parsed = recast.parse(contents!, {
+		parser: typeScriptParser,
+	}).program
+
+	// check the file contents
+	await expect(parsed).toMatchInlineSnapshot(`
+		import { QueryStore } from '../runtime/stores'
+		import artifact from '$houdini/artifacts/TestQuery'
+
+		// create the query store
+
+		export class TestQueryStore extends QueryStore {
+			constructor() {
+				super({
+					artifact,
+					storeName: "TestQueryStore",
+					variables: false,
+				})
+			}
+		}
+
+		export async function load_TestQuery(params) {
+			const store = new TestQueryStore()
+
+			await store.fetch(params)
+
+			return {
+				TestQuery: store,
+			}
+		}
+
+		export const GQL_TestQuery = new TestQueryStore()
+
+		export default GQL_TestQuery
+	`)
+})
+
+test('store with non-null variables with default value', async function () {
+	const docs = [
+		`query TestQuery($intValue: Int = 2) { usersByOffset(offset: $intValue) { id }  }`,
+	]
+
+	const { plugin_root } = await pipeline_test(docs)
+
+	const contents = await fs.readFile(path.join(stores_directory(plugin_root), 'TestQuery.js'))
+
+	// parse the contents
+	const parsed = recast.parse(contents!, {
+		parser: typeScriptParser,
+	}).program
+
+	// check the file contents
+	await expect(parsed).toMatchInlineSnapshot(`
+		import { QueryStore } from '../runtime/stores'
+		import artifact from '$houdini/artifacts/TestQuery'
+
+		// create the query store
+
+		export class TestQueryStore extends QueryStore {
+			constructor() {
+				super({
+					artifact,
+					storeName: "TestQueryStore",
+					variables: false,
+				})
+			}
+		}
+
+		export async function load_TestQuery(params) {
+			const store = new TestQueryStore()
+
+			await store.fetch(params)
+
+			return {
+				TestQuery: store,
+			}
+		}
+
+		export const GQL_TestQuery = new TestQueryStore()
+
+		export default GQL_TestQuery
+	`)
+})
+
+test('forward cursor pagination', async function () {
+	const docs = [
+		`query TestQuery {
+		usersByForwardsCursor(first: 10) @paginate {
+			edges {
+				node {
+					id
+				}
+			}
+		}
+	}`,
+	]
+
+	const { plugin_root } = await pipeline_test(docs)
+
+	const contents = await fs.readFile(path.join(stores_directory(plugin_root), 'TestQuery.js'))
+
+	// parse the contents
+	const parsed = recast.parse(contents!, {
+		parser: typeScriptParser,
+	}).program
+
+	// check the file contents
+	await expect(parsed).toMatchInlineSnapshot(`
+		import { QueryStoreForwardCursor } from '../runtime/stores'
+		import artifact from '$houdini/artifacts/TestQuery'
+
+		// create the query store
+
+		export class TestQueryStore extends QueryStoreForwardCursor {
+			constructor() {
+				super({
+					artifact,
+					storeName: "TestQueryStore",
+					variables: false,
+				})
+			}
+		}
+
+		export async function load_TestQuery(params) {
+			const store = new TestQueryStore()
+
+			await store.fetch(params)
+
+			return {
+				TestQuery: store,
+			}
+		}
+
+		export const GQL_TestQuery = new TestQueryStore()
+
+		export default GQL_TestQuery
+	`)
+})
+
+test('backwards cursor pagination', async function () {
+	const docs = [
+		`query TestQuery {
+		usersByBackwardsCursor(last: 10) @paginate {
+			edges {
+				node {
+					id
+				}
+			}
+		}
+	}`,
+	]
+
+	const { plugin_root } = await pipeline_test(docs)
+
+	const contents = await fs.readFile(path.join(stores_directory(plugin_root), 'TestQuery.js'))
+
+	// parse the contents
+	const parsed = recast.parse(contents!, {
+		parser: typeScriptParser,
+	}).program
+
+	// check the file contents
+	await expect(parsed).toMatchInlineSnapshot(`
+		import { QueryStoreBackwardCursor } from '../runtime/stores'
+		import artifact from '$houdini/artifacts/TestQuery'
+
+		// create the query store
+
+		export class TestQueryStore extends QueryStoreBackwardCursor {
+			constructor() {
+				super({
+					artifact,
+					storeName: "TestQueryStore",
+					variables: false,
+				})
+			}
+		}
+
+		export async function load_TestQuery(params) {
+			const store = new TestQueryStore()
+
+			await store.fetch(params)
+
+			return {
+				TestQuery: store,
+			}
+		}
+
+		export const GQL_TestQuery = new TestQueryStore()
+
+		export default GQL_TestQuery
+	`)
+})
+
+test('offset pagination', async function () {
+	const docs = [
+		`query TestQuery {
+			usersByOffset(limit: 10) @paginate {
+				id
+			}
+		}`,
+	]
+
+	const { plugin_root } = await pipeline_test(docs)
+
+	const contents = await fs.readFile(path.join(stores_directory(plugin_root), 'TestQuery.js'))
+
+	// parse the contents
+	const parsed = recast.parse(contents!, {
+		parser: typeScriptParser,
+	}).program
+
+	// check the file contents
+	await expect(parsed).toMatchInlineSnapshot(`
+		import { QueryStoreOffset } from '../runtime/stores'
+		import artifact from '$houdini/artifacts/TestQuery'
+
+		// create the query store
+
+		export class TestQueryStore extends QueryStoreOffset {
+			constructor() {
+				super({
+					artifact,
+					storeName: "TestQueryStore",
+					variables: false,
+				})
+			}
+		}
+
+		export async function load_TestQuery(params) {
+			const store = new TestQueryStore()
+
+			await store.fetch(params)
+
+			return {
+				TestQuery: store,
+			}
+		}
+
+		export const GQL_TestQuery = new TestQueryStore()
+
+		export default GQL_TestQuery
+	`)
+})
+
+test('does not generate pagination store', async function () {
+	const docs = [
+		`query TestQuery {
+		usersByBackwardsCursor(last: 10) @paginate {
+			edges {
+				node {
+					id
+				}
+			}
+		}
+	}`,
+	]
+
+	const { plugin_root, config } = await pipeline_test(docs)
+
+	await expect(
+		fs.stat(
+			path.join(
+				stores_directory(plugin_root),
+				config.paginationQueryName('TestQuery') + '.js'
+			)
+		)
+	).rejects.toBeTruthy()
+})

package/src/plugin/codegen/stores/query.ts

@@ -0,0 +1,97 @@
+import * as graphql from 'graphql'
+import { CollectedGraphQLDocument, GenerateHookInput, path } from 'houdini'
+import { operation_requires_variables, fs } from 'houdini'
+
+import { global_store_name, stores_directory, store_name } from '../../kit'
+
+export async function generateIndividualStoreQuery(
+	{ config, plugin_root }: GenerateHookInput,
+	doc: CollectedGraphQLDocument
+) {
+	const fileName = doc.name
+	const artifactName = `${doc.name}`
+	const storeName = store_name({ config, name: doc.name })
+	const globalStoreName = global_store_name({ config, name: doc.name })
+
+	let variables = false
+	const operation = doc.originalDocument.definitions.find(
+		(defn) => defn.kind === 'OperationDefinition' && defn.operation === 'query'
+	) as graphql.OperationDefinitionNode
+	if (operation) {
+		// an operation requires variables if there is any non-null variable that doesn't have a default value
+		variables = operation_requires_variables(operation)
+	}
+
+	// which functions we pull from the handlers depends on the pagination method
+	// specified by the artifact
+	const paginationMethod = doc.refetch?.paginated && doc.refetch.method
+
+	// in order to build the store, we need to know what class we're going to import from
+	let queryClass = 'QueryStore'
+	if (paginationMethod === 'cursor') {
+		queryClass =
+			doc.refetch?.direction === 'forward'
+				? 'QueryStoreForwardCursor'
+				: 'QueryStoreBackwardCursor'
+	} else if (paginationMethod === 'offset') {
+		queryClass = 'QueryStoreOffset'
+	}
+
+	// store definition
+	const storeData = `import { ${queryClass} } from '../runtime/stores'
+import artifact from '$houdini/artifacts/${artifactName}'
+
+// create the query store
+
+export class ${storeName} extends ${queryClass} {
+	constructor() {
+		super({
+			artifact,
+			storeName: ${JSON.stringify(storeName)},
+			variables: ${JSON.stringify(variables)},
+		})
+	}
+}
+
+export async function load_${artifactName}(params) {
+	const store = new ${storeName}()
+
+	await store.fetch(params)
+
+	return {
+		${artifactName}: store,
+	}
+}
+
+export const ${globalStoreName} = new ${storeName}()
+
+export default ${globalStoreName}
+`
+
+	const _input = `${artifactName}$input`
+	const _data = `${artifactName}$result`
+
+	// the type definitions for the store
+	const typeDefs = `import type { ${_input}, ${_data}, ${queryClass}, QueryStoreFetchParams} from '$houdini'
+
+export declare class ${storeName} extends ${queryClass}<${_data}, ${_input}> {
+	constructor() {
+		// @ts-ignore
+		super({})
+	}
+}
+
+export const ${globalStoreName}: ${storeName}
+
+export declare const load_${artifactName}: (params: QueryStoreFetchParams<${_data}, ${_input}>) => Promise<{${artifactName}: ${storeName}}>
+
+export default ${storeName}
+`
+
+	await Promise.all([
+		fs.writeFile(path.join(stores_directory(plugin_root), `${fileName}.js`), storeData),
+		fs.writeFile(path.join(stores_directory(plugin_root), `${fileName}.d.ts`), typeDefs),
+	])
+
+	return fileName
+}

package/src/plugin/codegen/stores/subscription.ts

@@ -0,0 +1,57 @@
+import { CollectedGraphQLDocument, fs, GenerateHookInput, path } from 'houdini'
+
+import { global_store_name, stores_directory, store_name } from '../../kit'
+
+export async function generateSubscriptionStore(
+	{ config, plugin_root }: GenerateHookInput,
+	doc: CollectedGraphQLDocument
+) {
+	const fileName = doc.name
+	const storeName = store_name({ config, name: doc.name })
+	const globalStoreName = global_store_name({ config, name: doc.name })
+	const artifactName = `${doc.name}`
+
+	// the content of the store
+	const storeContent = `import artifact from '$houdini/artifacts/${artifactName}'
+import { SubscriptionStore } from '../runtime/stores'
+
+export class ${storeName} extends SubscriptionStore {
+	constructor() {
+		super({
+			artifact,
+		})
+	}
+}
+
+export const ${globalStoreName} = new ${storeName}()
+
+export default ${globalStoreName}
+`
+
+	const _input = `${artifactName}$input`
+	const _data = `${artifactName}$result`
+
+	// the type definitions for the store
+	const typeDefs = `import type { ${_input}, ${_data}, SubscriptionStore } from '$houdini'
+
+export declare class ${storeName} extends SubscriptionStore<${_data} | undefined, ${_input}> {
+	constructor() {
+		// @ts-ignore
+		super({})
+	}
+}
+
+export const ${globalStoreName}: ${storeName}
+
+export default ${storeName}
+`
+
+	// write the store contents to disk
+	await Promise.all([
+		fs.writeFile(path.join(stores_directory(plugin_root), `${fileName}.d.ts`), typeDefs),
+		fs.writeFile(path.join(stores_directory(plugin_root), `${fileName}.js`), storeContent),
+	])
+
+	// return the store name to the generator so the index file can be created
+	return fileName
+}