diff --git a/.changeset/clean-rules-itch.md b/.changeset/clean-rules-itch.md
index 2e5c429e62..0529b20df1 100644
--- a/.changeset/clean-rules-itch.md
+++ b/.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
diff --git a/.changeset/shaggy-clocks-retire.md b/.changeset/shaggy-clocks-retire.md
new file mode 100644
index 0000000000..a5ca70e79c
--- /dev/null
+++ b/.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
diff --git a/.changeset/swift-buttons-nail.md b/.changeset/swift-buttons-nail.md
new file mode 100644
index 0000000000..7e9b2920dd
--- /dev/null
+++ b/.changeset/swift-buttons-nail.md
@@ -0,0 +1,5 @@
+---
+'houdini': minor
+---
+
+Restructure programmatic cache api
diff --git a/e2e/sveltekit/src/lib/QueryComponent.svelte b/e2e/sveltekit/src/lib/QueryComponent.svelte
index 05fd9c430d..9c13dab05c 100644
--- a/e2e/sveltekit/src/lib/QueryComponent.svelte
+++ b/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
}
diff --git a/e2e/sveltekit/src/lib/QueryExtNoAutoFetch.svelte b/e2e/sveltekit/src/lib/QueryExtNoAutoFetch.svelte
index 81f48875ec..625ded1455 100644
--- a/e2e/sveltekit/src/lib/QueryExtNoAutoFetch.svelte
+++ b/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
diff --git a/e2e/sveltekit/src/routes/+layout.svelte b/e2e/sveltekit/src/routes/+layout.svelte
index 636488d608..d5c192a767 100644
--- a/e2e/sveltekit/src/routes/+layout.svelte
+++ b/e2e/sveltekit/src/routes/+layout.svelte
@@ -18,7 +18,7 @@
});
const info = graphql(`
- query LayoutSession {
+ query LayoutSession @load {
session
}
`);
diff --git a/e2e/sveltekit/src/routes/fetching/route_1/+page.svelte b/e2e/sveltekit/src/routes/fetching/route_1/+page.svelte
index 35209062ec..701cb20de4 100644
--- a/e2e/sveltekit/src/routes/fetching/route_1/+page.svelte
+++ b/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
diff --git a/e2e/sveltekit/src/routes/fetching/with_load/+page.svelte b/e2e/sveltekit/src/routes/fetching/with_load/+page.svelte
index 3645774230..33cc657691 100644
--- a/e2e/sveltekit/src/routes/fetching/with_load/+page.svelte
+++ b/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
diff --git a/e2e/sveltekit/src/routes/fetching/without_load/+page.svelte b/e2e/sveltekit/src/routes/fetching/without_load/+page.svelte
index 88b4fbd9ac..ce1a41469b 100644
--- a/e2e/sveltekit/src/routes/fetching/without_load/+page.svelte
+++ b/e2e/sveltekit/src/routes/fetching/without_load/+page.svelte
@@ -1,8 +1,8 @@
-```
## Manual Loading
@@ -438,7 +419,7 @@ equivalent of the load function.
}
const store = graphql(`
- query MyComponentQuery($id: ID!) {
+ query MyComponentQuery($id: ID!) @load {
user(id: $id) {
id
}
@@ -449,6 +430,9 @@ equivalent of the load function.
{$store.data.value}
```
+Using the `@load` directive instructs Houdini to load that query automatically by generating
+the appropriate `load` function.
+
## Endpoints
Using a query store inside of an endpoint looks very similar to the `load` function: just pass the event you
diff --git a/site/src/routes/api/welcome/+page.svx b/site/src/routes/api/welcome/+page.svx
index 35bfbd5b75..efba59f3b2 100644
--- a/site/src/routes/api/welcome/+page.svx
+++ b/site/src/routes/api/welcome/+page.svx
@@ -60,17 +60,17 @@ const subscriptionExample = `graphql(\`
\`)`
const cacheExample = `
- const user = cache.get("User", {
- id: 3
+ const user = cache.get("User", {
+ id: 3
})
- user.writeFragment({
+ user.write({
fragment: graphql(\`
- fragment Update on User {
+ fragment Update on User {
firstName
}
- \`),
- data: {
+ \`),
+ data: {
firstName: "Harry"
}
})
diff --git a/site/src/routes/guides/release-notes/+page.svx b/site/src/routes/guides/release-notes/+page.svx
index e1a80c2ced..af53f17a3e 100644
--- a/site/src/routes/guides/release-notes/+page.svx
+++ b/site/src/routes/guides/release-notes/+page.svx
@@ -13,7 +13,9 @@ description: A guide to migrating your application to each breaking version of h
It's finally here!
-This is a huge milestone for the project and we're so thankful to everyone that made it possible
+This is a huge milestone for the project and we're so thankful to
+everyone that made it possible. As I'm sure you're expecting, this version brings a
+lot of changes so please read through this document carefully.
### Client Plugins
@@ -204,6 +206,60 @@ need to pass a new config to your client:
+### Imperative Cache Reworked
+
+We removed all of that `setFieldType` complexity and now you can read and write data by passing
+fragments and queries to the cache:
+
+```typescript
+import { cache, graphql } from '$houdini'
+
+cache.read({
+ query: graphql(`
+ query AllUsersCache($pattern: String!) {
+ users {
+ firstName(pattern: $pattern)
+ }
+ }
+ `)
+ variables: {
+ pattern: "capitalize"
+ }
+})
+```
+
+For more information, check out the [new docs page](/api/cache)
+
+### Inline Queries No Longer Automatically Load
+
+We removed `@manual_load` since using `graphql` in your `.svelte` files will not cause the query to be automatically loaded. You must now
+opt into automatically loading for queries defined inside of your components using the `@load` directive.
+This change only affects `.svelte` files.
+
+```diff:title=src/routes/+page.svelte
+
+
+
+ {$UserList.data?.users.map(user => user.name).join(',')}
+
+```
+
+With the recent improvements we've made to our data loading patterns, `graphql` in svelte files
+has become mostly used for "lazy" stores that don't fetch automatically. On top of that, the
+new imperative cache api relies heavily on `graphql` documents which would mean a lot of accidental
+loading. At least this way everything is very explicit.
+
## 0.20.0
This release was originally planned to be `1.0` but we have some exciting stuff planned
diff --git a/site/src/routes/guides/working-with-graphql/+page.svx b/site/src/routes/guides/working-with-graphql/+page.svx
index 658f0477f6..b8dc0087e5 100644
--- a/site/src/routes/guides/working-with-graphql/+page.svx
+++ b/site/src/routes/guides/working-with-graphql/+page.svx
@@ -359,14 +359,14 @@ export const _UserInfoVariables: UserInfoVariables = ({ params }) => {
### Inline Queries
-Another way to get a generated load for your route queries, is to define your query inside of your `+page.svelte`:
+Another way to get a generated load for your route queries, is to add `@load` to a query inside of your `+page.svelte`:
```svelte:title=src/lib/UserList.svelte&typescriptToggle=true