Tweak docs for endpoints (#785)

* ✏️ DOC: tweaks

* ✏️ FIX: \t to ' '

e2e/sveltekit/src/lib/utils/routes.ts

@@ -24,6 +24,7 @@ export const routes = {
   Stores_SSR_One_Store_Multivariables: '/stores/ssr-one-store-multivariables',
   Stores_Fragment_Null: '/stores/fragment-null',
   Stores_Metadata: '/stores/metadata',
+  Stores_action_mutation: '/stores/action-mutation',
   Stores_Endpoint_Query: '/stores/endpoint-query',
   Stores_Endpoint_Mutation: '/stores/endpoint-mutation',
   Stores_Session: '/stores/session',

e2e/sveltekit/src/routes/stores/action-mutation/+page.server.js

@@ -0,0 +1,26 @@
+import { graphql } from '$houdini';
+import { fail } from '@sveltejs/kit';
+
+/** @type {import('./$types').Actions} */
+export const actions = {
+  add: async (event) => {
+    const data = await event.request.formData();
+
+    const name = data.get('name')?.toString();
+
+    if (!name) {
+      return fail(403, { name: '*' });
+    }
+
+    const actionMutation = graphql(`
+      mutation ActionMutation($name: String!) {
+        addUser(name: $name, birthDate: 254143016000, snapshot: "ActionMutation") {
+          id
+          name
+        }
+      }
+    `);
+
+    return await actionMutation.mutate({ name });
+  }
+};

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

@@ -0,0 +1,21 @@
+<script>
+  import { enhance } from '$app/forms';
+
+  /** @type {import('./$types').ActionData} */
+  export let form;
+</script>
+
+<form method="POST" action="?/add" use:enhance>
+  <label>
+    Name
+    <input name="name" type="name" />
+  </label>
+  <span id="name-error"
+    >{#if form?.name}{form?.name}{/if}</span
+  >
+  <button type="submit">Add</button>
+</form>
+
+<div id="result">
+  {form?.addUser?.name || 'No user added'}
+</div>

e2e/sveltekit/src/routes/stores/action-mutation/spec.ts

@@ -0,0 +1,36 @@
+import { sleep } from '@kitql/helper';
+import { test } from '@playwright/test';
+import { routes } from '../../../lib/utils/routes.js';
+import { expectToBe, goto } from '../../../lib/utils/testsHelper.js';
+
+test.describe('action-mutation', () => {
+  test('happy path action-mutation ', async ({ page }) => {
+    await goto(page, routes.Stores_action_mutation);
+
+    await expectToBe(page, 'No user added');
+
+    // click the button
+    await Promise.all([
+      page.waitForResponse((res) => res.url().endsWith('action-mutation?/add'), { timeout: 1000 }),
+      page.getByRole('button', { name: 'Add' }).click()
+    ]);
+
+    // a start should be displayed
+    await expectToBe(page, '*', 'span[id=name-error]');
+
+    // fill the input
+    await page.getByLabel('Name').fill('My New Name');
+
+    // add
+    await Promise.all([
+      page.waitForResponse((res) => res.url().endsWith('action-mutation?/add'), { timeout: 1000 }),
+      page.getByRole('button', { name: 'Add' }).click()
+    ]);
+
+    // wait for the message to appear
+    await sleep(500);
+
+    // check that we have the right data
+    await expectToBe(page, 'My New Name');
+  });
+});

e2e/sveltekit/src/routes/stores/endpoint-query/+page.server.ts → e2e/sveltekit/src/routes/stores/endpoint-query/+page.server.js

@@ -1,8 +1,8 @@
 import { GQL_Hello } from '$houdini';
-import type { RequestEvent } from '@sveltejs/kit';
 
-export async function load(event: RequestEvent) {
+/** @type {import('./$types').PageServerLoad} */
+export const load = async (event) => {
   const { data } = await GQL_Hello.fetch({ event });
 
   return { hello: data?.hello };
-}
+};

site/src/routes/api/graphql/+page.svx

@@ -129,13 +129,13 @@ Houdini generates runtime representations of every enum in your schema. They can
 `$houdini`:
 
 ```javascript
-import { MyEnum, type UpdateStore } from '$houdini'
+import { MyEnum } from '$houdini'
 
-const update: UpdateStore = graphql`
+const update = graphql(`
 	mutation Update($input: MyEnum!) {
 		update(input: $input)
 	}
-`
+`)
 
 function onClick() {
 	update.mutate({ variables: { input: MyEnum.Value1 } })

site/src/routes/api/mutation/+page.svx

@@ -45,6 +45,40 @@ can be used to configure its behavior. The following values can be provided:
 - mutations usually do best when combined with at least one fragment grabbing
   the information needed for the mutation (for an example of this pattern, see below.)
 
+## Form actions
+
+Using a mutation inside an action endpoint looks very similar to anywhere else.
+For reference, it would look like:
+
+```js
+import { graphql } from '$houdini';
+import { fail } from '@sveltejs/kit';
+
+/** @type {import('./$types').Actions} */
+export const actions = {
+  add: async (event) => {
+    const data = await event.request.formData();
+
+    const name = data.get('name')?.toString();
+
+    if (!name) {
+      return fail(403, { name: '*' });
+    }
+
+    const actionMutation = graphql(`
+      mutation ActionMutation($name: String!) {
+        addUser(name: $name, birthDate: 254143016000, snapshot: "ActionMutation") {
+          id
+          name
+        }
+      }
+    `);
+
+    return await actionMutation.mutate({ name });
+  }
+};
+```
+
 ## Updating fields
 
 When a mutation is responsible for updating fields of entities, houdini

site/src/routes/api/query/+page.svx

@@ -449,15 +449,12 @@ are handed in your route function:
 ```javascript
 import { MyQueryStore } from '$houdini'
 
-export async function get(event) {
+/** @type {import('./$types').PageServerLoad} */
+export const load = (event) => {
 	const myQuery = new MyQueryStore()
 	const { data } = await myQuery.fetch({ event })
 
-	return {
-		body: {
-			data
-		}
-	}
+	return { data }
 }
 ```
 

site/src/routes/guides/contributing/+page.svx

@@ -107,7 +107,7 @@ To understand how this works, consider this query:
 <script>
 	import { query, graphql } from '$houdini'
 
-	const SpeciesInfo = graphql`
+	const SpeciesInfo = graphql(`
 		query SpeciesInfo {
 			species(id: 1) {
 				name

site/src/routes/guides/typescript/+page.svx

@@ -68,7 +68,7 @@ If you are working with inline stores, you don't have to provide types when usin
 ```typescript
 import { graphql } from '$houdini'
 
-const store: AllItemsStore = graphql(`
+const store = graphql(`
 	query AllItems {
 		items {
 			id