From 44f8acc0d168da50a8b1b7658de16519dab61746 Mon Sep 17 00:00:00 2001 From: JYC Date: Wed, 21 Dec 2022 19:17:07 +0100 Subject: [PATCH] Tweak docs for endpoints (#785) * :pencil2: DOC: tweaks * :pencil2: FIX: \t to ' ' --- e2e/sveltekit/src/lib/utils/routes.ts | 1 + .../stores/action-mutation/+page.server.js | 26 ++++++++++++++ .../stores/action-mutation/+page.svelte | 21 +++++++++++ .../src/routes/stores/action-mutation/spec.ts | 36 +++++++++++++++++++ .../{+page.server.ts => +page.server.js} | 6 ++-- site/src/routes/api/graphql/+page.svx | 6 ++-- site/src/routes/api/mutation/+page.svx | 34 ++++++++++++++++++ site/src/routes/api/query/+page.svx | 9 ++--- site/src/routes/guides/contributing/+page.svx | 2 +- site/src/routes/guides/typescript/+page.svx | 2 +- 10 files changed, 129 insertions(+), 14 deletions(-) create mode 100644 e2e/sveltekit/src/routes/stores/action-mutation/+page.server.js create mode 100644 e2e/sveltekit/src/routes/stores/action-mutation/+page.svelte create mode 100644 e2e/sveltekit/src/routes/stores/action-mutation/spec.ts rename e2e/sveltekit/src/routes/stores/endpoint-query/{+page.server.ts => +page.server.js} (55%) diff --git a/e2e/sveltekit/src/lib/utils/routes.ts b/e2e/sveltekit/src/lib/utils/routes.ts index 50e7b39414..55159253d3 100644 --- a/e2e/sveltekit/src/lib/utils/routes.ts +++ b/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', diff --git a/e2e/sveltekit/src/routes/stores/action-mutation/+page.server.js b/e2e/sveltekit/src/routes/stores/action-mutation/+page.server.js new file mode 100644 index 0000000000..89e8fb26d8 --- /dev/null +++ b/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 }); + } +}; diff --git a/e2e/sveltekit/src/routes/stores/action-mutation/+page.svelte b/e2e/sveltekit/src/routes/stores/action-mutation/+page.svelte new file mode 100644 index 0000000000..9473582826 --- /dev/null +++ b/e2e/sveltekit/src/routes/stores/action-mutation/+page.svelte @@ -0,0 +1,21 @@ + + +
+ + {#if form?.name}{form?.name}{/if} + +
+ +
+ {form?.addUser?.name || 'No user added'} +
diff --git a/e2e/sveltekit/src/routes/stores/action-mutation/spec.ts b/e2e/sveltekit/src/routes/stores/action-mutation/spec.ts new file mode 100644 index 0000000000..8cae0beb95 --- /dev/null +++ b/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'); + }); +}); diff --git a/e2e/sveltekit/src/routes/stores/endpoint-query/+page.server.ts b/e2e/sveltekit/src/routes/stores/endpoint-query/+page.server.js similarity index 55% rename from e2e/sveltekit/src/routes/stores/endpoint-query/+page.server.ts rename to e2e/sveltekit/src/routes/stores/endpoint-query/+page.server.js index 09a592285c..875a8295f7 100644 --- a/e2e/sveltekit/src/routes/stores/endpoint-query/+page.server.ts +++ b/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 }; -} +}; diff --git a/site/src/routes/api/graphql/+page.svx b/site/src/routes/api/graphql/+page.svx index 2cc0bc30ce..cc379cc507 100644 --- a/site/src/routes/api/graphql/+page.svx +++ b/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 } }) diff --git a/site/src/routes/api/mutation/+page.svx b/site/src/routes/api/mutation/+page.svx index 79fd3bd077..20599cbb4b 100644 --- a/site/src/routes/api/mutation/+page.svx +++ b/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 diff --git a/site/src/routes/api/query/+page.svx b/site/src/routes/api/query/+page.svx index 979b9b6504..1f85820f54 100644 --- a/site/src/routes/api/query/+page.svx +++ b/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 } } ``` diff --git a/site/src/routes/guides/contributing/+page.svx b/site/src/routes/guides/contributing/+page.svx index 09d16cded3..5649c187f7 100644 --- a/site/src/routes/guides/contributing/+page.svx +++ b/site/src/routes/guides/contributing/+page.svx @@ -107,7 +107,7 @@ To understand how this works, consider this query: