Skip to content

Commit

Permalink
Write Props typing as separate type for improved clarity
Browse files Browse the repository at this point in the history
  • Loading branch information
SeppahBaws committed Jul 5, 2024
1 parent fa4efa5 commit fc4abff
Show file tree
Hide file tree
Showing 7 changed files with 36 additions and 10 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@
import { graphql } from '$houdini';
import type { Svelte5ComponentQueryVariables } from './$houdini';
const { id }: { id: string } = $props();
interface Props {
id: string;
}
const { id }: Props = $props();
export const _Svelte5ComponentQueryVariables: Svelte5ComponentQueryVariables = ({ props }) => {
return {
Expand Down
5 changes: 4 additions & 1 deletion e2e/kit/src/routes/svelte5-runes/fragment/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@
import type { PageData } from './$houdini';
import UserDetailsSvelte5 from './UserDetailsSvelte5.svelte';
const { data }: {data: PageData} = $props();
interface Props {
data: PageData;
}
const { data }: Props = $props();
const { Svelte5UsersList } = $derived(data);
</script>

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
<script lang="ts">
import { fragment, graphql, type Svelte5UserDetails } from '$houdini';
const { user }: { user: Svelte5UserDetails } = $props();
interface Props {
user: Svelte5UserDetails;
}
const { user }: Props = $props();
const userDetails = fragment(
user,
Expand Down
5 changes: 4 additions & 1 deletion e2e/kit/src/routes/svelte5-runes/mutation/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@
import { graphql } from '$houdini';
import type { PageData } from './$houdini';
const { data }: { data: PageData } = $props();
interface Props {
data: PageData;
}
const { data }: Props = $props();
const { Svelte5MutationGetData } = $derived(data);
const changeNameMutation = graphql(`
Expand Down
5 changes: 4 additions & 1 deletion e2e/kit/src/routes/svelte5-runes/pagination/+page.svelte
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
<script lang="ts">
import type { PageData } from './$houdini';
const { data }: { data: PageData } = $props();
interface Props {
data: PageData;
}
const { data }: Props = $props();
const { Svelte5Pagination } = $derived(data);
</script>

Expand Down
5 changes: 4 additions & 1 deletion e2e/kit/src/routes/svelte5-runes/simple-ssr/+page.svelte
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
<script lang="ts">
import type { PageData } from './$houdini';
const { data }: { data: PageData } = $props();
interface Props {
data: PageData;
}
const { data }: Props = $props();
const { Svelte5SimpleSSR } = $derived(data);
</script>

Expand Down
16 changes: 12 additions & 4 deletions site/src/routes/guides/svelte-5/+page.svx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,10 @@ If your query is SSR'ed, you need to get the store from the PageData like so:
<script lang="ts">
import type { PageData } from './$houdini'

const { data }: { data: PageData } = $props();
interface Props {
data: PageData;
}
const { data }: Props = $props();
const { MyProfile } = $derived(data);
</script>

Expand All @@ -36,7 +39,10 @@ The only thing that changes with component queries is how your props are coming
import { graphql } from '$houdini';
import type { UserDetailsVariables } from './$houdini';

const { id }: { id: string } = $props();
interface Props {
id: string;
}
const { id }: Props = $props();

export const _UserDetailsVariables: UserDetailsVariables = ({ props }) => {
return {
Expand Down Expand Up @@ -64,7 +70,10 @@ Similar to component queries, the only thing that changes with fragments is how
<script lang="ts">
import { fragment, graphql, type UserCardFragment } from '$houdini';

const { user }: { user: UserCardFragment } = $props();
interface Props {
user: UserCardFragment
}
const { user }: Props = $props();

const data = fragment(
user,
Expand Down Expand Up @@ -103,5 +112,4 @@ Mutations are unchanged, simply use them as before:
<button onclick={() => uncheckItem.mutate({ id: 'my-item' })}>
Uncheck Item
</button>

```

0 comments on commit fc4abff

Please sign in to comment.