Infer query inputs from route params (#789)

* first pass mixing url parameters with the variable function

* params need to be pulled out of event.params 🤦

* run ci on all branches

* marshal variable function return value, not all inputs

* throw error export from sveltejs/kit

* add test

* rename routes in e2e and add failing unit tests

* use official route parser

* remove comments

* update getting started guide and query api docs

* update getting started guide to use +page.gql

* more tweaks

* move setFieldType to separate section

* dont double run CI

* remove unused imports

* fix nested route test

* changeset

* fix scroll background

* tweak wording

* remove invalid import

* add filepaths to doc codeblocks

* more filepaths

* one more filepath

* Add toggle to docs between typescript and jsdocs (#791)

* Tweak docs for endpoints (#785)

* ✏️ DOC: tweaks

* ✏️ FIX: \t to ' '

* Fix error when prerendering application (#786)

* don't add session infrastructure when static is set to true

* use existing static config value

* changeset

* unused import

* 📦 v0.19.2 (#788)

* 📦 v{VERSION}

* update changelogs

* oops

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Alec Aivazis <[email protected]>

* add js/ts toggle

* fix search input sizing

* duplicate code examples and implement toggle

* convert all blocks to typescript

* transform handles variable declaration type signatures

* transform function parameters

* transform svelte documents

* add type definitions to rest of getting started guide

* update guides

* add types to authentication docs

* remove semicolon

* update snapshots

* move typescript test to js

Co-authored-by: JYC <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* invert toolbar icons

* fix spacing

* update changeset

* hide discord link on mobile

* better support for optional inputs

* add test for custom functions

* fix a few titles

* formatting tweak

* : -> ,

Co-authored-by: JYC <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.changeset/calm-brooms-sit.md

@@ -0,0 +1,6 @@
+---
+'houdini-svelte': major
+'houdini': major
+---
+
+Removed this.error and this.redirect from function variables

.changeset/tender-goats-flow.md

@@ -0,0 +1,5 @@
+---
+'houdini-svelte': patch
+---
+
+Query variables can now be inferred from route params

.github/workflows/tests.yml

@@ -10,7 +10,7 @@ on:
     # every commit on master
     push:
         branches:
-            - main
+            - 'main'
 
 jobs:
     format:
@@ -63,7 +63,7 @@ jobs:
               id: pnpm-install
               with:
                 version: 7
-                
+
             - name: Get pnpm store directory
               id: pnpm-cache
               run: |
@@ -107,7 +107,7 @@ jobs:
               id: pnpm-install
               with:
                 version: 7
-                
+
             - name: Get pnpm store directory
               id: pnpm-cache
               run: |
@@ -121,7 +121,7 @@ jobs:
                   ${{ matrix.os }}-pnpm-store-
             - name: Install dependencies
               run: pnpm install
-              
+
             - name: Cache playwright binaries (ubuntu)
               uses: actions/cache@v3
               if: matrix.os == 'ubuntu-latest'
@@ -167,7 +167,7 @@ jobs:
               id: pnpm-install
               with:
                 version: 7
-                
+
             - name: Get pnpm store directory
               id: pnpm-cache
               run: |
@@ -193,4 +193,4 @@ jobs:
               run: pnpm --filter sveltekit run lint
 
             - name: End-to-End check
-              run: pnpm --filter sveltekit run check
+              run: pnpm --filter sveltekit run check

.gitignore

@@ -19,3 +19,5 @@ $houdini
 build/**
 dist/**
 .next/**
+
+vite.config.js.timestamp-*

e2e/_api/server.mjs

@@ -6,7 +6,7 @@ import { resolvers, typeDefs } from './graphql.mjs'
 
 async function main() {
 	const yogaApp = createServer({
-		hostname: "::",
+		hostname: '::',
 		logging: true,
 		schema: {
 			typeDefs,
@@ -51,13 +51,13 @@ mutation AddUser {
 			onSubscribe: async (ctx, msg) => {
 				// prettier-ignore
 				const {
-          schema,
-          execute,
-          subscribe,
-          contextFactory,
-          parse,
-          validate
-        } = yogaApp.getEnveloped(ctx);
+					schema,
+					execute,
+					subscribe,
+					contextFactory,
+					parse,
+					validate
+				} = yogaApp.getEnveloped(ctx);
 
 				const args = {
 					schema,
@@ -72,7 +72,10 @@ mutation AddUser {
 				}
 
 				const errors = validate(args.schema, args.document)
-				if (errors.length) return errors
+				if (errors.length) {
+					console.log(errors)
+					return errors
+				}
 				return args
 			},
 		},

e2e/sveltekit/package.json

@@ -37,7 +37,7 @@
     "prettier": "^2.5.1",
     "prettier-plugin-svelte": "^2.5.0",
     "svelte": "3.55.0",
-    "svelte-check": "^2.2.6",
+    "svelte-check": "^3.0.1",
     "svelte-preprocess": "^5.0.0",
     "tslib": "^2.3.1",
     "typescript": "^4.9",

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

@@ -3,7 +3,7 @@ export const routes = {
   GraphQL: 'http://localhost:4000/graphql',
 
   // features
-  Query_param: '/query-param',
+  nested_routes: '/nested-routes',
   isFetching_with_load: '/isFetching/with_load',
   isFetching_without_load: '/isFetching/without_load',
   isFetching_route_1: '/isFetching/route_1',
@@ -44,6 +44,11 @@ export const routes = {
   Plugin_query_afterLoad: '/plugin/query/afterLoad',
   Plugin_query_onError: '/plugin/query/onError',
   Plugin_query_layout: '/plugin/query/layout',
+  Plugin_query_inferInput_userRoute_params: '/plugin/query/infer-input/user-testSnapshot-1',
+  Plugin_query_inferInput_optional: '/plugin/query/infer-input/optional',
+  Plugin_query_inferInput_optional2: '/plugin/query/infer-input/optional2',
+  Plugin_query_inferInput_customFunction:
+    '/plugin/query/infer-input/custom-function-testSnapshot-1',
 
   Plugin_subscription_renders: '/plugin/subscription/renders',
 

e2e/sveltekit/src/routes/query-param/+page.server.ts → e2e/sveltekit/src/routes/nested-routes/+page.server.ts

@@ -2,7 +2,7 @@ import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async (event) => {
-  if (event.url.pathname.endsWith('query-param')) {
+  if (event.url.pathname.endsWith('nested-routes')) {
     // fallback to user 2... because why not?
     throw redirect(307, event.url.pathname + '/user-2');
   }

e2e/sveltekit/src/routes/query-param/user-[userId]/spec.ts → e2e/sveltekit/src/routes/nested-routes/user-[userId]/spec.ts

@@ -4,7 +4,7 @@ import { expectToBe, expect_n_gql, goto, navSelector } from '../../../lib/utils/
 
 test.describe('+Layout.gql', () => {
   test('No GraphQL request & response happen (SSR)', async ({ page }) => {
-    await goto(page, routes.Query_param);
+    await goto(page, routes.nested_routes);
     await expectToBe(page, 'Page: Samuel Jackson', 'h3');
   });
 
@@ -13,7 +13,7 @@ test.describe('+Layout.gql', () => {
   }) => {
     await goto(page, routes.Home);
 
-    const listStr = await expect_n_gql(page, navSelector(routes.Query_param), 1);
+    const listStr = await expect_n_gql(page, navSelector(routes.nested_routes), 1);
     const expected = [`{"data":{"user":{"id":"Page_User:2","name":"Samuel Jackson"}}}`];
     expect(listStr).toStrictEqual(expected);
   });

e2e/sveltekit/src/routes/plugin/query/infer-input/custom-function-[snapshot]-[id]/+page.gql

@@ -0,0 +1,5 @@
+query CustomFunctionRouteParamsUserQuery($snapshot: String! = "test", $id: ID! = "1") {
+  user(id: $id, snapshot: $snapshot) {
+    name
+  }
+}

e2e/sveltekit/src/routes/plugin/query/infer-input/custom-function-[snapshot]-[id]/+page.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import type { PageData } from './$houdini';
+  export let data: PageData;
+
+  let { CustomFunctionRouteParamsUserQuery } = data;
+  $: ({ CustomFunctionRouteParamsUserQuery } = data);
+</script>
+
+<div id="result">
+  {$CustomFunctionRouteParamsUserQuery.data?.user.name}
+</div>

e2e/sveltekit/src/routes/plugin/query/infer-input/custom-function-[snapshot]-[id]/+page.ts

@@ -0,0 +1,8 @@
+import type { CustomFunctionRouteParamsUserQueryVariables } from './$houdini';
+
+export const _CustomFunctionRouteParamsUserQueryVariables: CustomFunctionRouteParamsUserQueryVariables =
+  () => {
+    return {
+      id: '2'
+    };
+  };

e2e/sveltekit/src/routes/plugin/query/infer-input/custom-function-[snapshot]-[id]/spec.ts

@@ -0,0 +1,11 @@
+import { test } from '@playwright/test';
+import { routes } from '../../../../../lib/utils/routes.js';
+import { expectToBe, goto } from '../../../../../lib/utils/testsHelper.js';
+
+test.describe('query variables from route params', () => {
+  test('custom function', async ({ page }) => {
+    await goto(page, routes.Plugin_query_inferInput_customFunction);
+
+    await expectToBe(page, 'Samuel Jackson');
+  });
+});

e2e/sveltekit/src/routes/plugin/query/infer-input/optional[[id]]/+page.gql

@@ -0,0 +1,5 @@
+query OptionalRouteParamsUserQuery($snapshot: String! = "test", $id: ID! = "1") {
+  user(id: $id, snapshot: $snapshot) {
+    name
+  }
+}

e2e/sveltekit/src/routes/plugin/query/infer-input/optional[[id]]/+page.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import type { PageData } from './$houdini';
+  export let data: PageData;
+
+  let { OptionalRouteParamsUserQuery } = data;
+  $: ({ OptionalRouteParamsUserQuery } = data);
+</script>
+
+<div id="result">
+  {$OptionalRouteParamsUserQuery.data?.user.name}
+</div>

e2e/sveltekit/src/routes/plugin/query/infer-input/optional[[id]]/spec.ts

@@ -0,0 +1,11 @@
+import { test } from '@playwright/test';
+import { routes } from '../../../../../lib/utils/routes.js';
+import { expectToBe, goto } from '../../../../../lib/utils/testsHelper.js';
+
+test.describe('query variables from route params', () => {
+  test('optional param in query,  no value', async ({ page }) => {
+    await goto(page, routes.Plugin_query_inferInput_optional);
+
+    await expectToBe(page, 'Bruce Willis');
+  });
+});

e2e/sveltekit/src/routes/plugin/query/infer-input/user-[snapshot]-[id]/+page.gql

@@ -0,0 +1,5 @@
+query RouteParamsUserQuery($snapshot: String!, $id: ID!) {
+  user(id: $id, snapshot: $snapshot) {
+    name
+  }
+}

e2e/sveltekit/src/routes/plugin/query/infer-input/user-[snapshot]-[id]/+page.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import type { PageData } from './$houdini';
+  export let data: PageData;
+
+  let { RouteParamsUserQuery } = data;
+  $: ({ RouteParamsUserQuery } = data);
+</script>
+
+<div id="result">
+  {$RouteParamsUserQuery.data?.user.name}
+</div>

e2e/sveltekit/src/routes/plugin/query/infer-input/user-[snapshot]-[id]/spec.ts

@@ -0,0 +1,11 @@
+import { test } from '@playwright/test';
+import { routes } from '../../../../../lib/utils/routes.js';
+import { expectToBe, goto } from '../../../../../lib/utils/testsHelper.js';
+
+test.describe('query variables from route params', () => {
+  test('happy path', async ({ page }) => {
+    await goto(page, routes.Plugin_query_inferInput_userRoute_params);
+
+    await expectToBe(page, 'Bruce Willis');
+  });
+});

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

@@ -1,4 +1,5 @@
+import { error } from '@sveltejs/kit';
+
 export function _PreprocessorTestQueryErrorVariables() {
-  // @ts-ignore
-  return this.error(403, 'test');
+  throw error(403, 'test');
 }

example/src/routes/[filter]/+page.ts

@@ -1,4 +1,5 @@
 import { graphql } from '$houdini'
+import { error } from '@sveltejs/kit'
 
 export const _houdini_load = graphql`
 	query AllItems($completed: Boolean) @cache(policy: CacheOrNetwork) {
@@ -32,7 +33,7 @@ export function _AllItemsVariables({ params }) {
 
 	// make sure we recognize the value
 	if (!['active', 'completed', 'all'].includes(params.filter)) {
-		return this.error(400, "filter must be one of 'active' or 'completed'")
+		throw error(400, "filter must be one of 'active' or 'completed'")
 	}
 
 	return {

packages/houdini-plugin-svelte-global-stores/README.md

@@ -73,7 +73,7 @@ query MyAwesomeQuery {
 }
 ```
 
-```javascript
+```typescript
 // src/routes/myRoute/+page.js
 import { GQL_MyAwesomeQuery } from '$houdini'
 ```
@@ -117,7 +117,7 @@ Fragments stores can be created from your external documents by using the `.get`
 Using a query store inside of an endpoint looks very similar to the `load` function: just pass the event you
 are handed in your route function:
 
-```javascript
+```typescript
 import { GQL_MyQuery } from '$houdini'
 
 export async function get(event) {

packages/houdini-plugin-svelte-global-stores/src/plugin/codegen/stores/fragment.test.ts

@@ -49,6 +49,10 @@ test('global fragment type', async function () {
 	)
 
 	expect(contents).toMatchInlineSnapshot(
-		'"import { TestFragment1Store } from \'../../houdini-svelte/stores\'\\n\\nexport const GQL_TestFragment1: TestFragment1Store"'
+		`
+		"import { TestFragment1Store } from '../../houdini-svelte/stores'
+
+		export const GQL_TestFragment1: TestFragment1Store"
+	`
 	)
 })