diff --git a/.changeset/popular-lobsters-collect.md b/.changeset/popular-lobsters-collect.md new file mode 100644 index 0000000000..afcefe65e1 --- /dev/null +++ b/.changeset/popular-lobsters-collect.md @@ -0,0 +1,6 @@ +--- +'houdini-svelte': major +'houdini': major +--- + +Rename `isFetching` to `fetching` diff --git a/e2e/sveltekit/src/lib/utils/routes.ts b/e2e/sveltekit/src/lib/utils/routes.ts index 7d7ce6eabc..36774c8b22 100644 --- a/e2e/sveltekit/src/lib/utils/routes.ts +++ b/e2e/sveltekit/src/lib/utils/routes.ts @@ -4,9 +4,9 @@ export const routes = { // features nested_routes: '/nested-routes', - isFetching_with_load: '/isFetching/with_load', - isFetching_without_load: '/isFetching/without_load', - isFetching_route_1: '/isFetching/route_1', + fetching_with_load: '/fetching/with_load', + fetching_without_load: '/fetching/without_load', + fetching_route_1: '/fetching/route_1', lists_all: '/lists-all?limit=15', union_result: '/union-result', diff --git a/e2e/sveltekit/src/routes/isFetching/route_1/+page.svelte b/e2e/sveltekit/src/routes/fetching/route_1/+page.svelte similarity index 69% rename from e2e/sveltekit/src/routes/isFetching/route_1/+page.svelte rename to e2e/sveltekit/src/routes/fetching/route_1/+page.svelte index 55e3e6a4d6..35209062ec 100644 --- a/e2e/sveltekit/src/routes/isFetching/route_1/+page.svelte +++ b/e2e/sveltekit/src/routes/fetching/route_1/+page.svelte @@ -2,8 +2,8 @@ import { graphql } from '$houdini'; const store = graphql(` - query isFetching_route_1 { - user(id: 1, snapshot: "isFetching_route_1", delay: 200) { + query fetching_route_1 { + user(id: 1, snapshot: "fetching_route_1", delay: 200) { id name } diff --git a/e2e/sveltekit/src/routes/fetching/route_2/+page.svelte b/e2e/sveltekit/src/routes/fetching/route_2/+page.svelte new file mode 100644 index 0000000000..92adcc4dcc --- /dev/null +++ b/e2e/sveltekit/src/routes/fetching/route_2/+page.svelte @@ -0,0 +1,11 @@ + + +
{JSON.stringify($fetching_route_1, null, 2)}
diff --git a/e2e/sveltekit/src/routes/fetching/route_2/+page.ts b/e2e/sveltekit/src/routes/fetching/route_2/+page.ts new file mode 100644 index 0000000000..6eb3439f33 --- /dev/null +++ b/e2e/sveltekit/src/routes/fetching/route_2/+page.ts @@ -0,0 +1,7 @@ +import { load_fetching_route_1 } from '$houdini'; +import type { PageLoad } from './$types'; + +export const load: PageLoad = async (event) => { + // Here we have a new but no initial state with fetching to true! + return await load_fetching_route_1({ event }); +}; diff --git a/e2e/sveltekit/src/routes/isFetching/spec.ts b/e2e/sveltekit/src/routes/fetching/spec.ts similarity index 60% rename from e2e/sveltekit/src/routes/isFetching/spec.ts rename to e2e/sveltekit/src/routes/fetching/spec.ts index 2903822b93..b3538cf335 100644 --- a/e2e/sveltekit/src/routes/isFetching/spec.ts +++ b/e2e/sveltekit/src/routes/fetching/spec.ts @@ -7,14 +7,14 @@ import { waitForConsoleInfo } from '../../lib/utils/testsHelper.js'; -test.describe('isFetching', () => { +test.describe('fetching', () => { test('with_load SSR', async ({ page }) => { const [msg] = await Promise.all([ waitForConsoleInfo(page), - goto(page, routes.isFetching_with_load) + goto(page, routes.fetching_with_load) ]); - expect(msg.text()).toBe('with_load - isFetching: false'); + expect(msg.text()).toBe('with_load - fetching: false'); }); test('with_load CSR', async ({ page }) => { @@ -23,13 +23,13 @@ test.describe('isFetching', () => { // Switch page and check directly the first console log const [msg] = await Promise.all([ waitForConsoleInfo(page), - clientSideNavigation(page, routes.isFetching_with_load) + clientSideNavigation(page, routes.fetching_with_load) ]); - expect(msg.text()).toBe('with_load - isFetching: true'); + expect(msg.text()).toBe('with_load - fetching: true'); - // wait for the isFetching false + // wait for the fetching false const msg2 = await waitForConsoleInfo(page); - expect(msg2.text()).toBe('with_load - isFetching: false'); + expect(msg2.text()).toBe('with_load - fetching: false'); }); test('without_load CSR', async ({ page }) => { @@ -39,32 +39,32 @@ test.describe('isFetching', () => { // It's expected to stay true until the first fetch! const [msg] = await Promise.all([ waitForConsoleInfo(page), - clientSideNavigation(page, routes.isFetching_without_load) + clientSideNavigation(page, routes.fetching_without_load) ]); - expect(msg.text()).toBe('without_load - isFetching: true'); + expect(msg.text()).toBe('without_load - fetching: true'); const [msg2] = await Promise.all([ waitForConsoleInfo(page), // manual fetch locator_click(page, 'button') ]); - expect(msg2.text()).toBe('without_load - isFetching: true'); + expect(msg2.text()).toBe('without_load - fetching: true'); - // wait for the isFetching false + // wait for the fetching false const msg3 = await waitForConsoleInfo(page); - expect(msg3.text()).toBe('without_load - isFetching: false'); + expect(msg3.text()).toBe('without_load - fetching: false'); - // second click should not refetch... so isFetching should be false + // second click should not refetch... so fetching should be false const [msg4] = await Promise.all([ waitForConsoleInfo(page), // manual fetch locator_click(page, 'button') ]); - expect(msg4.text()).toBe('without_load - isFetching: false'); + expect(msg4.text()).toBe('without_load - fetching: false'); }); test('loading the same store somewhere else', async ({ page }) => { - await goto(page, routes.isFetching_route_1); + await goto(page, routes.fetching_route_1); // Switch page and check the first console log const [msg] = await Promise.all([ @@ -72,9 +72,9 @@ test.describe('isFetching', () => { clientSideNavigation(page, './route_2') ]); - // Here we load the same query with load_isFetching_route_1, but + // Here we load the same query with load_fetching_route_1, but // 1/ we get the values from the cache directly! - // 2/ we never go to isFetching! no more flickering. - expect(msg.text()).toBe('isFetching_route_2 - isFetching: false'); + // 2/ we never go to fetching! no more flickering. + expect(msg.text()).toBe('fetching_route_2 - fetching: false'); }); }); diff --git a/e2e/sveltekit/src/routes/isFetching/with_load/+page.svelte b/e2e/sveltekit/src/routes/fetching/with_load/+page.svelte similarity index 55% rename from e2e/sveltekit/src/routes/isFetching/with_load/+page.svelte rename to e2e/sveltekit/src/routes/fetching/with_load/+page.svelte index 5f5dabd329..3645774230 100644 --- a/e2e/sveltekit/src/routes/isFetching/with_load/+page.svelte +++ b/e2e/sveltekit/src/routes/fetching/with_load/+page.svelte @@ -2,15 +2,15 @@ import { graphql } from '$houdini'; const store = graphql(` - query isFetching_w { - user(id: 1, snapshot: "isFetching_w", delay: 200) { + query fetching_w { + user(id: 1, snapshot: "fetching_w", delay: 200) { id name } } `); - $: console.info(`with_load - isFetching: ${$store.isFetching}`); + $: console.info(`with_load - fetching: ${$store.fetching}`);
{JSON.stringify($store, null, 2)}
diff --git a/e2e/sveltekit/src/routes/isFetching/without_load/+page.svelte b/e2e/sveltekit/src/routes/fetching/without_load/+page.svelte similarity index 62% rename from e2e/sveltekit/src/routes/isFetching/without_load/+page.svelte rename to e2e/sveltekit/src/routes/fetching/without_load/+page.svelte index 1ac96e4dac..88b4fbd9ac 100644 --- a/e2e/sveltekit/src/routes/isFetching/without_load/+page.svelte +++ b/e2e/sveltekit/src/routes/fetching/without_load/+page.svelte @@ -2,8 +2,8 @@ import { graphql } from '$houdini'; const store = graphql` - query isFetching_wo @manual_load { - user(id: 1, snapshot: "isFetching_wo", delay: 200) { + query fetching_wo @manual_load { + user(id: 1, snapshot: "fetching_wo", delay: 200) { id name } @@ -14,7 +14,7 @@ store.fetch(); }; - $: console.info(`without_load - isFetching: ${$store.isFetching}`); + $: console.info(`without_load - fetching: ${$store.fetching}`); diff --git a/e2e/sveltekit/src/routes/isFetching/route_2/+page.svelte b/e2e/sveltekit/src/routes/isFetching/route_2/+page.svelte deleted file mode 100644 index 6f4d2db82f..0000000000 --- a/e2e/sveltekit/src/routes/isFetching/route_2/+page.svelte +++ /dev/null @@ -1,11 +0,0 @@ - - -
{JSON.stringify($isFetching_route_1, null, 2)}
diff --git a/e2e/sveltekit/src/routes/isFetching/route_2/+page.ts b/e2e/sveltekit/src/routes/isFetching/route_2/+page.ts deleted file mode 100644 index e2875c7a21..0000000000 --- a/e2e/sveltekit/src/routes/isFetching/route_2/+page.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { load_isFetching_route_1 } from '$houdini'; -import type { PageLoad } from './$types'; - -export const load: PageLoad = async (event) => { - // Here we have a new but no initial state with isFetching to true! - return await load_isFetching_route_1({ event }); -}; diff --git a/e2e/sveltekit/src/routes/stores/mutation/spec.ts b/e2e/sveltekit/src/routes/stores/mutation/spec.ts index a87650ed23..466f88333c 100644 --- a/e2e/sveltekit/src/routes/stores/mutation/spec.ts +++ b/e2e/sveltekit/src/routes/stores/mutation/spec.ts @@ -10,7 +10,7 @@ test.describe('Mutation Page', () => { const defaultStoreValues = { data: null, errors: null, - isFetching: false, + fetching: false, isOptimisticResponse: false, variables: null }; diff --git a/e2e/sveltekit/src/routes/stores/prefetch-[userId]/spec.ts b/e2e/sveltekit/src/routes/stores/prefetch-[userId]/spec.ts index f18f5bac6f..edf662b98f 100644 --- a/e2e/sveltekit/src/routes/stores/prefetch-[userId]/spec.ts +++ b/e2e/sveltekit/src/routes/stores/prefetch-[userId]/spec.ts @@ -7,7 +7,7 @@ test.describe('prefetch-[userId] Page', () => { await goto(page, routes.Stores_Prefetch_UserId_2); const dataDisplayedSSR = - '{"data":{"user":{"id":"store-user-query:2","name":"Samuel Jackson"}},"errors":null,"isFetching":false,"partial":false,"source":"ssr","variables":{"id":"2"}}'; + '{"data":{"user":{"id":"store-user-query:2","name":"Samuel Jackson"}},"errors":null,"fetching":false,"partial":false,"source":"ssr","variables":{"id":"2"}}'; // The page should have the right data directly await expectToBe(page, dataDisplayedSSR); diff --git a/e2e/sveltekit/src/routes/stores/ssr-[userId]/+page.svelte b/e2e/sveltekit/src/routes/stores/ssr-[userId]/+page.svelte index 47ca78e720..36e8ea9b92 100644 --- a/e2e/sveltekit/src/routes/stores/ssr-[userId]/+page.svelte +++ b/e2e/sveltekit/src/routes/stores/ssr-[userId]/+page.svelte @@ -30,7 +30,7 @@ -{#if $User.isFetching} +{#if $User.fetching}

Loading...

{:else if $User.errors}
diff --git a/packages/houdini-svelte/src/runtime/stores/mutation.ts b/packages/houdini-svelte/src/runtime/stores/mutation.ts
index e8beda067b..a600e0e571 100644
--- a/packages/houdini-svelte/src/runtime/stores/mutation.ts
+++ b/packages/houdini-svelte/src/runtime/stores/mutation.ts
@@ -20,8 +20,8 @@ export class MutationStore<
 
 	private store: Writable>
 
-	protected setFetching(isFetching: boolean) {
-		this.store?.update((s) => ({ ...s, isFetching }))
+	protected setFetching(fetching: boolean) {
+		this.store?.update((s) => ({ ...s, fetching }))
 	}
 
 	constructor({ artifact }: { artifact: MutationArtifact }) {
@@ -46,7 +46,7 @@ export class MutationStore<
 		const config = await this.getConfig()
 
 		this.store.update((c) => {
-			return { ...c, isFetching: true }
+			return { ...c, fetching: true }
 		})
 
 		// treat a mutation like it has an optimistic layer regardless of
@@ -99,7 +99,7 @@ export class MutationStore<
 				this.store.update((s) => ({
 					...s,
 					errors: result.errors,
-					isFetching: false,
+					fetching: false,
 					isOptimisticResponse: false,
 					data: result.data,
 					variables: (newVariables || {}) as _Input,
@@ -132,7 +132,7 @@ export class MutationStore<
 			const storeData: MutationResult<_Data, _Input> = {
 				data: unmarshalSelection(config, this.artifact.selection, result.data) as _Data,
 				errors: result.errors ?? null,
-				isFetching: false,
+				fetching: false,
 				isOptimisticResponse: false,
 				variables: newVariables,
 			}
@@ -146,7 +146,7 @@ export class MutationStore<
 			this.store.update((s) => ({
 				...s,
 				errors: error as { message: string }[],
-				isFetching: false,
+				fetching: false,
 				isOptimisticResponse: false,
 				data: null,
 				variables: newVariables,
@@ -170,7 +170,7 @@ export class MutationStore<
 		return {
 			data: null as _Data | null,
 			errors: null,
-			isFetching: false,
+			fetching: false,
 			isOptimisticResponse: false,
 			variables: null,
 		}
@@ -184,7 +184,7 @@ export type MutationConfig<_Result, _Input, _Optimistic> = {
 export type MutationResult<_Data, _Input> = {
 	data: _Data | null
 	errors: { message: string }[] | null
-	isFetching: boolean
+	fetching: boolean
 	isOptimisticResponse: boolean
 	variables: _Input | null
 }
diff --git a/packages/houdini-svelte/src/runtime/stores/pagination/cursor.ts b/packages/houdini-svelte/src/runtime/stores/pagination/cursor.ts
index 2fa22c9398..a953534850 100644
--- a/packages/houdini-svelte/src/runtime/stores/pagination/cursor.ts
+++ b/packages/houdini-svelte/src/runtime/stores/pagination/cursor.ts
@@ -231,7 +231,7 @@ export function cursorHandlers<_Data extends GraphQLObject, _Input>({
 			return {
 				data: result.data,
 				variables: queryVariables as _Input,
-				isFetching: false,
+				fetching: false,
 				partial: result.partial,
 				errors: null,
 				source: result.source,
diff --git a/packages/houdini-svelte/src/runtime/stores/pagination/fragment.ts b/packages/houdini-svelte/src/runtime/stores/pagination/fragment.ts
index 8f619c4f87..1415bee395 100644
--- a/packages/houdini-svelte/src/runtime/stores/pagination/fragment.ts
+++ b/packages/houdini-svelte/src/runtime/stores/pagination/fragment.ts
@@ -77,7 +77,7 @@ class FragmentStoreCursor<_Data extends GraphQLObject, _Input> extends BasePagin
 	get(initialValue: _Data | null) {
 		const store = writable>({
 			data: initialValue,
-			isFetching: false,
+			fetching: false,
 			pageInfo: nullPageInfo(),
 		})
 
@@ -171,7 +171,7 @@ export class FragmentStoreBackwardCursor<
 		const handlers = this.storeHandlers(
 			parent,
 			// it really is a writable under the hood :(
-			(isFetching: boolean) => parent.data.update((p) => ({ ...p, isFetching }))
+			(fetching: boolean) => parent.data.update((p) => ({ ...p, fetching }))
 		)
 
 		return {
@@ -189,7 +189,7 @@ export class FragmentStoreOffset<
 	get(initialValue: _Data | null) {
 		const parent = writable>({
 			data: initialValue,
-			isFetching: false,
+			fetching: false,
 		})
 
 		// create the offset handlers we'll add to the store
@@ -197,7 +197,7 @@ export class FragmentStoreOffset<
 			artifact: this.paginationArtifact,
 			fetch: async () => ({} as any),
 			getValue: () => get(parent).data,
-			setFetching: (isFetching: boolean) => parent.update((p) => ({ ...p, isFetching })),
+			setFetching: (fetching: boolean) => parent.update((p) => ({ ...p, fetching })),
 			queryVariables: () => this.queryVariables({ subscribe: parent.subscribe }),
 			storeName: this.name,
 			getConfig: () => this.getConfig(),
@@ -215,7 +215,7 @@ export class FragmentStoreOffset<
 
 export type FragmentStorePaginated<_Data extends GraphQLObject, _Input> = Readable<{
 	data: _Data
-	isFetching: boolean
+	fetching: boolean
 	pageInfo: PageInfo
 }> & {
 	loadNextPage(
@@ -232,5 +232,5 @@ export type FragmentStorePaginated<_Data extends GraphQLObject, _Input> = Readab
 
 export type FragmentPaginatedResult<_Data, _ExtraFields = {}> = {
 	data: _Data | null
-	isFetching: boolean
+	fetching: boolean
 } & _ExtraFields
diff --git a/packages/houdini-svelte/src/runtime/stores/pagination/offset.ts b/packages/houdini-svelte/src/runtime/stores/pagination/offset.ts
index 64edecc58a..7d9598528f 100644
--- a/packages/houdini-svelte/src/runtime/stores/pagination/offset.ts
+++ b/packages/houdini-svelte/src/runtime/stores/pagination/offset.ts
@@ -137,7 +137,7 @@ export function offsetHandlers<_Data extends GraphQLObject, _Input>({
 			return {
 				data: result.data,
 				variables: queryVariables as _Input,
-				isFetching: false,
+				fetching: false,
 				partial: result.partial,
 				errors: null,
 				source: result.source,
diff --git a/packages/houdini-svelte/src/runtime/stores/query.ts b/packages/houdini-svelte/src/runtime/stores/query.ts
index d1ac95d687..d0edf1a594 100644
--- a/packages/houdini-svelte/src/runtime/stores/query.ts
+++ b/packages/houdini-svelte/src/runtime/stores/query.ts
@@ -56,8 +56,8 @@ export class QueryStore<
 	// the string identifying the store
 	protected storeName: string
 
-	protected setFetching(isFetching: boolean) {
-		this.store?.update((s) => ({ ...s, isFetching }))
+	protected setFetching(fetching: boolean) {
+		this.store?.update((s) => ({ ...s, fetching }))
 	}
 
 	protected async currentVariables() {
@@ -163,12 +163,12 @@ This will result in duplicate queries. If you are trying to ensure there is alwa
 				rawCacheOnlyResult: true,
 			})
 			if (cachedStore && cachedStore?.result.data) {
-				// update only what matters at this stage (data & isFetching),
+				// update only what matters at this stage (data & fetching),
 				// not all the store. The complete store will be filled later.
 				this.store.update((s) => ({
 					...s,
 					data: cachedStore?.result.data,
-					isFetching: false,
+					fetching: false,
 				}))
 			}
 		}
@@ -292,7 +292,7 @@ This will result in duplicate queries. If you are trying to ensure there is alwa
 			store.update((s) => ({
 				...s,
 				errors: result.errors,
-				isFetching: false,
+				fetching: false,
 				partial: false,
 				data: unmarshaled as _Data,
 				source,
@@ -311,7 +311,7 @@ This will result in duplicate queries. If you are trying to ensure there is alwa
 				data: (unmarshaled || {}) as _Data,
 				variables: variables || ({} as _Input),
 				errors: null,
-				isFetching: false,
+				fetching: false,
 				partial: request.partial,
 				source: request.source,
 			})
@@ -381,7 +381,7 @@ This will result in duplicate queries. If you are trying to ensure there is alwa
 		return {
 			data: null,
 			errors: null,
-			isFetching: true,
+			fetching: true,
 			partial: false,
 			source: null,
 			variables: {} as _Input,
diff --git a/packages/houdini/src/runtime/lib/types.ts b/packages/houdini/src/runtime/lib/types.ts
index 7f958108c4..fa45bf7046 100644
--- a/packages/houdini/src/runtime/lib/types.ts
+++ b/packages/houdini/src/runtime/lib/types.ts
@@ -187,7 +187,7 @@ export type FetchQueryResult<_Data> = {
 export type QueryResult<_Data, _Input, _Extra = {}> = {
 	data: _Data | null
 	errors: { message: string }[] | null
-	isFetching: boolean
+	fetching: boolean
 	partial: boolean
 	source: DataSource | null
 	variables: _Input
diff --git a/site/src/components/Emoji.svelte b/site/src/components/Emoji.svelte
new file mode 100644
index 0000000000..c5a44a1639
--- /dev/null
+++ b/site/src/components/Emoji.svelte
@@ -0,0 +1,7 @@
+
+
+{name}
diff --git a/site/src/components/index.js b/site/src/components/index.js
index e84c22dd69..4f7fa96bb4 100644
--- a/site/src/components/index.js
+++ b/site/src/components/index.js
@@ -6,5 +6,6 @@ export { default as DeepDive } from './DeepDive.svelte'
 export { default as Transformation } from './Transformation.svelte'
 export { default as Warning } from './Warning.svelte'
 export { default as Highlight } from './Highlight.svelte'
+export { default as Emoji } from './Emoji.svelte'
 
 export * from './search'
diff --git a/site/src/routes/+page.svelte b/site/src/routes/+page.svelte
index e873092310..79eb8ef5d5 100644
--- a/site/src/routes/+page.svelte
+++ b/site/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 
 
 # Release Notes
 
+## 1.0.0
+
+It's finally here! 
+
+There are just a few breaking changes that have been introduced with this and one _very_ cool feature.
+
+### `isFetching` has been renamed to `fetching`
+
+This sounds big but we suspect that the fix should be relatively safe and quick. Just replace all instances of `isFetching` in your
+application with `fetching`.
+
+```diff
+- {#if $MyQuery.isFetching}
++ {#if $MyQuery.fetching}
+```
+
+### `error` and `redirect` are no longer attached to `this` in hooks
+
+We felt that these methods didn't offer a lot on top of SvelteKit's exports and were just complicating the situation. Now, you should just
+use the exported values from SvelteKit:
+
+```diff
++ import { error } from '@sveltejs/kit'
+
+  export function _houdini_beforeLoad({ params }) {
+    if (valueIsValid(params)) {
+-         throw this.error(400, "message")
++         throw error(400, "message")
+    }
+  }
+```
+
+### Query Inputs can now be inferred from route parameters
+
+For example, if a route is defined at `src/routes/users/[id]` and a query looks like this:
+
+```graphql
+query UserInfo($id: Int!) {
+    user(id: $id) {
+        ...
+    }
+}
+```
+
+Then the `Variable` function is not required. That being said, you can still define a `Variable` function for custom logic if you want.
+
 ## 0.19.0
 
 `v0.19.0` brings changes quickly after `0.18`. We're trying to get out as much as possible as quickly as possible
@@ -45,14 +91,14 @@ and add it to the `plugins` section of your config file (order doesn't matter).
 
  export default {
 
- 	plugins: {
- 		'houdini-svelte': {
-- 			globalStorePrefix: "G_"
- 		},
-+		'houdini-plugin-svelte-global-stores': {
-+ 			prefix: "G_"
-+		},
- 	}
+     plugins: {
+         'houdini-svelte': {
+-             globalStorePrefix: "G_"
+         },
++        'houdini-plugin-svelte-global-stores': {
++             prefix: "G_"
++        },
+     }
  }
 ```
 
@@ -83,11 +129,11 @@ will allow TypeScript to infer types for your store values:
 
 - const store: MyQueryStore = graphql`
 + const store = graphql(`
-  	query MyQuery {
-  		user {
-  			id
-  		}
-  	}
+      query MyQuery {
+          user {
+              id
+          }
+      }
 - `
 + `)
 ```
@@ -235,17 +281,17 @@ with the underlying query store directly
 
 ```svelte
 
 
 
- {$MyQuery.data.viewer.id} + {$MyQuery.data.viewer.id}
``` @@ -255,10 +301,10 @@ The core of this change is that instead of using stores that you import, your co ```svelte {$UserInfo.data.firstName} @@ -325,9 +371,9 @@ You can now define a `+page.gql` file inside of a route directory to automatical ```graphql:title=src/routes/myProfile/+page.gql query MyQuery { - viewer { - id - } + viewer { + id + } } ``` @@ -340,13 +386,13 @@ The `graphql` template tag can now be used to define your stores in your javascr ```svelte id: {$store.data?.viewer.id} @@ -363,6 +409,7 @@ import { GQL_MyQuery } from '$houdini' export const houdini_load = GQL_MyQuery ``` + ```typescript:title=src/routes/myProfile/+page.ts import { GQL_Query1, GQL_Query2 } from '$houdini' @@ -376,11 +423,11 @@ This can be mixed with the new `graphql` tag api to define your queries inside o import { GQL_MyQuery, graphql } from '$houdini' const otherQuery = graphql` - query ViewerInfo { - viewer { - id - } - } + query ViewerInfo { + viewer { + id + } + } ` export const houdini_load = [ GQL_MyQuery, otherQuery ] @@ -433,8 +480,8 @@ previous behavior, you should use the `quiet` log level: ```javascript:title=houdini.config.js export default { - // ... - logLevel: 'quiet' + // ... + logLevel: 'quiet' } ``` diff --git a/site/src/routes/intro/fetching-data/+page.svx b/site/src/routes/intro/fetching-data/+page.svx index 858886934e..0e3493d508 100644 --- a/site/src/routes/intro/fetching-data/+page.svx +++ b/site/src/routes/intro/fetching-data/+page.svx @@ -67,9 +67,9 @@ A GraphQL query is a string that describes what information you want from the AP ```graphql query CurrentUserInfo { - current_user { - firstName - } + current_user { + firstName + } } ``` @@ -77,11 +77,11 @@ The result of the above query might look something like: ```json { - "data": { - "current_user": { - "firstName": "Bill" - } - } + "data": { + "current_user": { + "firstName": "Bill" + } + } } ``` @@ -91,10 +91,10 @@ Fields in a query can take arguments to customize their behavior, for example: ```graphql query CurrentUserInfo { - current_user { - # specify the format for the date time stamp - lastLogin(format: "YYYY-MM-DD") - } + current_user { + # specify the format for the date time stamp + lastLogin(format: "YYYY-MM-DD") + } } ``` @@ -102,11 +102,11 @@ might return something like this: ```json { - "data": { - "current_user": { - "lastLogin": "2022-12-25" - } - } + "data": { + "current_user": { + "lastLogin": "2022-12-25" + } + } } ``` @@ -175,7 +175,7 @@ Defining variables for your document looks like the follow: ```graphql query MyQuery($variable1: Boolean) { - myField(argument: $variable1) + myField(argument: $variable1) } ``` @@ -236,7 +236,7 @@ If you've already clicked on those links you probably saw a scary message about to handle the loading state for our view. Let's just do something quick and dirty: ```svelte:title=src/routes/[[id]]/+page.svelte -{#if $Info.isFetching} +{#if $Info.fetching} {:else} diff --git a/site/static/images/emojis/exploding-head.png b/site/static/images/emojis/exploding-head.png new file mode 100644 index 0000000000..6411f9e537 Binary files /dev/null and b/site/static/images/emojis/exploding-head.png differ diff --git a/site/static/images/emojis/partying-face.png b/site/static/images/emojis/partying-face.png new file mode 100644 index 0000000000..f38a095205 Binary files /dev/null and b/site/static/images/emojis/partying-face.png differ