Restructure programatic cache api (#841)

* fragment stores need to provide an artifact

* first pass at Record.write

* unused import

* update snapshot

* list handlers work

* move FragmentValue utility type to types file

* changeset

* linter

* start on docs and add cache.read and cache.write

* nest fragment under fragment key when writing to records

* document cache.read and cache.write

* sketch out query type

* add query type definitions to CacheDef

* query variables in imperative type def

* generate query definitions

* unused imports

* unused import

* fixed tests

* fragment inputs are persisted in artifacts

* generate input type definitions and wire up variable marhsaling

* read and write variables with arguments

* update docs

* add links to fragment args docs

* replace @manual_load with @load

* changeset

* update docs

* update release notes

* update api welcome page cache section

* fix import type

* update tests

* typo in docs

* simpler second step

* soften second step

* cleanup

* cleanup cleanup

* graphql tag should return never in default case since that means the query wasn't recognized

* make imperative types more responsive when saving

* cleanup

* fix e2e test type

* e2e check

* grammar

* explicitly mention that manual_load is gone

* remove log

.changeset/clean-rules-itch.md

@@ -2,4 +2,4 @@
 'houdini': patch
 ---
 
-in queries when we have manual_load directive fetching is false by default otherwise true
+in queries when we have a manual load, fetching is false by default otherwise true

.changeset/shaggy-clocks-retire.md

@@ -0,0 +1,5 @@
+---
+'houdini-svelte': major
+---
+
+Removed `@manual_load` since queries defined inline in a component are no longer automatically loaded. In order to opt into generated loads for your inline queries, use the `@load` directive

.changeset/swift-buttons-nail.md

@@ -0,0 +1,5 @@
+---
+'houdini': minor
+---
+
+Restructure programmatic cache api

e2e/sveltekit/src/lib/QueryComponent.svelte

@@ -11,7 +11,7 @@
   export let id = '';
 
   const result = graphql(`
-    query FragmentQueryVars($id: ID!) {
+    query FragmentQueryVars($id: ID!) @load {
       user(id: $id, snapshot: "preprocess-query-variable") {
         name
       }

e2e/sveltekit/src/lib/QueryExtNoAutoFetch.svelte

@@ -2,7 +2,7 @@
   import { graphql } from '$houdini';
 
   const store = graphql(`
-    query QueryExtNoAutoFetch @manual_load {
+    query QueryExtNoAutoFetch {
       usersList(limit: 3, snapshot: "QueryExtNoAutoFetch") {
         id
         name

e2e/sveltekit/src/routes/+layout.svelte

@@ -18,7 +18,7 @@
   });
 
   const info = graphql(`
-    query LayoutSession {
+    query LayoutSession @load {
       session
     }
   `);

e2e/sveltekit/src/routes/fetching/route_1/+page.svelte

@@ -2,7 +2,7 @@
   import { graphql } from '$houdini';
 
   const store = graphql(`
-    query fetching_route_1 {
+    query fetching_route_1 @load {
       user(id: 1, snapshot: "fetching_route_1", delay: 200) {
         id
         name

e2e/sveltekit/src/routes/fetching/with_load/+page.svelte

@@ -2,7 +2,7 @@
   import { graphql } from '$houdini';
 
   const store = graphql(`
-    query fetching_w {
+    query fetching_w @load {
       user(id: 1, snapshot: "fetching_w", delay: 200) {
         id
         name

e2e/sveltekit/src/routes/fetching/without_load/+page.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { graphql } from '$houdini';
+  import { fetching_woStore, graphql } from '$houdini';
 
-  const store = graphql`
-    query fetching_wo @manual_load {
+  const store = graphql<fetching_woStore>`
+    query fetching_wo {
       user(id: 1, snapshot: "fetching_wo", delay: 200) {
         id
         name

e2e/sveltekit/src/routes/pagination/fragment/backwards-cursor/+page.svelte

@@ -2,7 +2,7 @@
   import { graphql, paginatedFragment } from '$houdini';
 
   const queryResult = graphql(`
-    query UserFragmentBackwardsCursorQuery {
+    query UserFragmentBackwardsCursorQuery @load {
       user(id: "1", snapshot: "pagination-fragment-backwards-cursor") {
         ...BackwardsCursorFragment
       }

e2e/sveltekit/src/routes/pagination/fragment/forward-cursor/+page.svelte

@@ -2,7 +2,7 @@
   import { paginatedFragment, graphql } from '$houdini';
 
   const queryResult = graphql(`
-    query UserFragmentForwardsCursorQuery {
+    query UserFragmentForwardsCursorQuery @load {
       user(id: "1", snapshot: "pagination-fragment-forwards-cursor") {
         ...ForwardsCursorFragment
       }

e2e/sveltekit/src/routes/pagination/fragment/offset/+page.svelte

@@ -2,7 +2,7 @@
   import { paginatedFragment, graphql } from '$houdini';
 
   const queryResult = graphql(`
-    query UserFragmentOffsetQuery {
+    query UserFragmentOffsetQuery @load {
       user(id: "1", snapshot: "pagination-fragment-offset") {
         ...OffsetFragment
       }

e2e/sveltekit/src/routes/pagination/query/backwards-cursor/+page.svelte

@@ -2,7 +2,7 @@
   import { CachePolicy, graphql } from '$houdini';
 
   const result = graphql(`
-    query BackwardsCursorPaginationQuery {
+    query BackwardsCursorPaginationQuery @load {
       usersConnection(last: 2, snapshot: "pagination-query-backwards-cursor") @paginate {
         edges {
           node {

e2e/sveltekit/src/routes/pagination/query/forward-cursor/+page.svelte

@@ -2,7 +2,7 @@
   import { CachePolicy, graphql, type ForwardCursorPaginationQueryStore } from '$houdini';
 
   const result: ForwardCursorPaginationQueryStore = graphql`
-    query ForwardCursorPaginationQuery {
+    query ForwardCursorPaginationQuery @load {
       usersConnection(first: 2, snapshot: "pagination-query-forwards-cursor") @paginate {
         edges {
           node {

e2e/sveltekit/src/routes/pagination/query/offset-variable/+page.svelte

@@ -2,7 +2,7 @@
   import { graphql, type OffsetVariablePaginationQueryStore, CachePolicy } from '$houdini';
 
   const result: OffsetVariablePaginationQueryStore = graphql`
-    query OffsetVariablePaginationQuery($limit: Int!) {
+    query OffsetVariablePaginationQuery($limit: Int!) @load {
       usersList(limit: $limit, snapshot: "pagination-query-offset-variables") @paginate {
         name
       }

e2e/sveltekit/src/routes/pagination/query/offset/+page.svelte

@@ -2,7 +2,7 @@
   import { graphql, type OffsetPaginationQueryStore, CachePolicy } from '$houdini';
 
   const result: OffsetPaginationQueryStore = graphql`
-    query OffsetPaginationQuery {
+    query OffsetPaginationQuery @load {
       usersList(limit: 2, snapshot: "pagination-query-offset") @paginate {
         name
       }

e2e/sveltekit/src/routes/plugin/fragment/update/+page.svelte

@@ -7,7 +7,7 @@
   } from '$houdini';
 
   const userInfo: FragmentUpdateTestQueryStore = graphql`
-    query FragmentUpdateTestQuery($id: ID!) {
+    query FragmentUpdateTestQuery($id: ID!) @load {
       node(id: $id) {
         ... on User {
           ...UserFragmentTestFragment

e2e/sveltekit/src/routes/plugin/query/afterLoad/+page.svelte

@@ -5,7 +5,7 @@
   export let data: PageData;
 
   const result: PreprocessorTestQuery1Store = graphql`
-    query PreprocessorAfterLoadTestQuery {
+    query PreprocessorAfterLoadTestQuery @load {
       user(id: "1", snapshot: "preprocess-after-load-test-simple") {
         name
       }

e2e/sveltekit/src/routes/plugin/query/beforeLoad/+page.svelte

@@ -5,7 +5,7 @@
   import { graphql, type PreprocessorTestQuery1Store } from '$houdini';
 
   const result: PreprocessorTestQuery1Store = graphql`
-    query PreprocessorBeforeLoadTestQuery {
+    query PreprocessorBeforeLoadTestQuery @load {
       user(id: "1", snapshot: "preprocess-before-load-test-simple") {
         name
       }

e2e/sveltekit/src/routes/plugin/query/layout/+layout.svelte

@@ -3,7 +3,7 @@
   import type { LayoutTestQueryStore } from '$houdini';
 
   const result: LayoutTestQueryStore = graphql`
-    query LayoutTestQuery {
+    query LayoutTestQuery @load {
       user(id: "1", snapshot: "preprocess-query-simple") {
         name
       }

e2e/sveltekit/src/routes/plugin/query/multiple/+page.svelte

@@ -6,15 +6,15 @@
   } from '$houdini';
 
   const result1: PreprocessorTestQuery3Store = graphql`
-    query PreprocessorTestQuery3 {
+    query PreprocessorTestQuery3 @load {
       user(id: "1", snapshot: "preprocess-query-multiple") {
         name
       }
     }
   `;
 
   const result2: PreprocessorTestQuery4Store = graphql`
-    query PreprocessorTestQuery4 {
+    query PreprocessorTestQuery4 @load {
       user(id: "2", snapshot: "preprocess-query-multiple") {
         name
       }

e2e/sveltekit/src/routes/plugin/query/scalars/+page.svelte

@@ -2,7 +2,7 @@
   import { graphql } from '$houdini';
 
   const result = graphql`
-    query PreprocessorTestQueryScalars {
+    query PreprocessorTestQueryScalars @load {
       user(id: "1", snapshot: "preprocess-query-scalars") {
         id
         birthDate

e2e/sveltekit/src/routes/plugin/query/simple/+page.svelte

@@ -2,7 +2,7 @@
   import { graphql, type PreprocessorTestQuery1Store } from '$houdini';
 
   const result: PreprocessorTestQuery1Store = graphql`
-    query PreprocessorTestQuery1 {
+    query PreprocessorTestQuery1 @load {
       user(id: "1", snapshot: "preprocess-query-simple") {
         name
       }

e2e/sveltekit/src/routes/plugin/query/variable-[id=integer]/+page.svelte

@@ -2,7 +2,7 @@
   import { graphql, type PreprocessorTestQueryVarsStore } from '$houdini';
 
   const result: PreprocessorTestQueryVarsStore = graphql`
-    query PreprocessorTestQueryVars($id: ID!) {
+    query PreprocessorTestQueryVars($id: ID!) @load {
       user(id: $id, snapshot: "preprocess-query-variable") {
         name
       }

e2e/sveltekit/src/routes/plugin/query/variables-error/+page.svelte

@@ -2,7 +2,7 @@
   import { graphql, type PreprocessorTestQueryErrorStore } from '$houdini';
 
   const result: PreprocessorTestQueryErrorStore = graphql`
-    query PreprocessorTestQueryError($id: ID!) {
+    query PreprocessorTestQueryError($id: ID!) @load {
       user(id: $id, snapshot: "preprocess-query-variable") {
         name
       }

e2e/sveltekit/src/routes/stores/mutation/+page.svelte

@@ -3,7 +3,7 @@
   import { stry } from '@kitql/helper';
 
   const query: OptimisticUserQueryStore = graphql`
-    query OptimisticUserQuery {
+    query OptimisticUserQuery @load {
       user(id: "1", snapshot: "update-user-mutation") {
         name
       }

e2e/sveltekit/src/routes/stores/session/+page.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { graphql } from '$houdini';
+  import { graphql, type SessionStore } from '$houdini';
 
-  const Session = graphql`
-    query Session {
+  const Session = graphql<SessionStore>`
+    query Session @load {
       session
     }
   `;

packages/houdini-svelte/src/plugin/artifactData.ts

@@ -5,14 +5,14 @@ export type PluginArtifactData = { isManualLoad?: boolean }
 
 export function artifactData(config: Config, doc: CollectedGraphQLDocument): PluginArtifactData {
 	// put together the type information for the filter for every list
-	let isManualLoad = false
+	let isManualLoad = true
 
 	graphql.visit(doc.document, {
 		// look for any field marked with a list
 		Directive(node, _, __, ___) {
-			// check manualLoadDirective
-			if (node.name.value === config.manualLoadDirective) {
-				isManualLoad = true
+			// check loadDirective
+			if (node.name.value === config.loadDirective) {
+				isManualLoad = false
 			}
 		},
 	})

packages/houdini-svelte/src/plugin/transforms/componentQuery.test.ts

@@ -6,7 +6,7 @@ test('no variables', async function () {
 	const route = await component_test(
 		`
             const value = graphql\`
-                query TestQuery {
+                query TestQuery @load {
                     viewer {
                         id
                     }
@@ -52,7 +52,7 @@ test('with variables', async function () {
             export let prop3, prop4
 
             const result = graphql\`
-                query TestQuery($test: String!) {
+                query TestQuery($test: String!) @load {
                     users(stringValue: $test) {
                         id
                     }
@@ -116,7 +116,7 @@ test('graphql function', async function () {
             export let prop3, prop4
 
             const result = graphql(\`
-                query TestQuery($test: String!) {
+                query TestQuery($test: String!) @load {
                     users(stringValue: $test) {
                         id
                     }
@@ -166,6 +166,71 @@ test('graphql function', async function () {
 	`)
 })
 
+test("imperative cache doesn't confuse the load generator", async function () {
+	const route = await component_test(
+		`
+			import { cache } from '$houdini'
+
+			cache.read({
+				query: graphql(\`
+					query TestQuery($test: String!) {
+						users(stringValue: $test) {
+							id
+						}
+					}
+				\`)
+			})
+		`
+	)
+
+	// make sure we added the right stuff
+	expect(route).toMatchInlineSnapshot(`
+		import { TestQueryStore } from "$houdini/plugins/houdini-svelte/stores/TestQuery";
+		import { cache } from "$houdini";
+
+		cache.read({
+		    query: new TestQueryStore()
+		});
+	`)
+})
+
+test("imperative cache inside mutation doesn't confuse anything", async function () {
+	const route = await component_test(
+		`
+			import { cache } from '$houdini'
+
+			function onClick() {
+				const query = graphql(\`
+					query TestQuery($test: String!) {
+						users(stringValue: $test) {
+							id
+						}
+					}
+				\`)
+
+				cache.read({
+					query
+				})
+			}
+		`
+	)
+
+	// make sure we added the right stuff
+	expect(route).toMatchInlineSnapshot(`
+		import { TestQueryStore } from "$houdini/plugins/houdini-svelte/stores/TestQuery";
+		import { cache } from "$houdini";
+
+		function onClick() {
+		    $:
+		    query = new TestQueryStore();
+
+		    cache.read({
+		        query
+		    });
+		}
+	`)
+})
+
 test('missing variables', async function () {
 	vi.spyOn(console, 'error')
 
@@ -176,7 +241,7 @@ test('missing variables', async function () {
             export let prop3, prop4
 
             const result = graphql\`
-                query TestQuery($test: String!) {
+                query TestQuery($test: String!) @load {
                     users(stringValue: $test) {
                         id
                     }

packages/houdini-svelte/src/plugin/transforms/componentQuery.ts

@@ -235,9 +235,9 @@ export async function find_inline_queries(
 				return false
 			}
 
-			// as long as they don't have the @manual_load directive with load set to false
-			return !queryOperation.directives?.find(
-				(directive) => directive.name.value === page.config.manualLoadDirective
+			// as long as they have the @load directive
+			return !!queryOperation.directives?.find(
+				(directive) => directive.name.value === page.config.loadDirective
 			)
 		},
 		dependency: page.watch_file,