Rename isFetching to fetching (#800)

* rename isFetching to fetching * fix e2e test routes * changeset * base64 encode better emojis * use async emoji alternatives * try emoji with just a static image * unused import * rename isFetching in getting started guide
HoudiniGraphql · Dec 31, 2022 · a107f6c · a107f6c · vercel · Dec 31, 2022
1 parent a8237aa
commit a107f6c
Show file tree

Hide file tree

Showing 26 changed files with 199 additions and 137 deletions.
diff --git a/.changeset/popular-lobsters-collect.md 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
@@ -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/...rc/routes/isFetching/route_1/+page.svelte → .../src/routes/fetching/route_1/+page.svelte b/...rc/routes/isFetching/route_1/+page.svelte → .../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
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import type { PageData } from './$types';
+
+  export let data: PageData;
+
+  $: ({ fetching_route_1 } = data);
+
+  $: console.info(`fetching_route_2 - fetching: ${$fetching_route_1.fetching}`);
+</script>
+
+<pre>{JSON.stringify($fetching_route_1, null, 2)}</pre>
diff --git a/e2e/sveltekit/src/routes/fetching/route_2/+page.ts 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 → e2e/sveltekit/src/routes/fetching/spec.ts b/e2e/sveltekit/src/routes/isFetching/spec.ts → 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,42 +39,42 @@ 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([
       page.waitForEvent('console', { predicate: (msg) => msg.type() === 'info' }),
       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/.../routes/isFetching/with_load/+page.svelte → ...rc/routes/fetching/with_load/+page.svelte b/.../routes/isFetching/with_load/+page.svelte → ...rc/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}`);
 </script>
 
 <pre>{JSON.stringify($store, null, 2)}</pre>
diff --git a/...utes/isFetching/without_load/+page.svelte → ...routes/fetching/without_load/+page.svelte b/...utes/isFetching/without_load/+page.svelte → ...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}`);
 </script>
 
 <button on:click={getData}>Fetch</button>

diff --git a/e2e/sveltekit/src/routes/isFetching/route_2/+page.svelte b/e2e/sveltekit/src/routes/isFetching/route_2/+page.svelte
diff --git a/e2e/sveltekit/src/routes/isFetching/route_2/+page.ts b/e2e/sveltekit/src/routes/isFetching/route_2/+page.ts
diff --git 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
@@ -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
@@ -30,7 +30,7 @@
 <button id="refresh-77" on:click={() => refresh('77')}>Fetch 77</button>
 <button id="refresh-2Star" on:click={() => refresh2WithVariableDifferentOrder()}>Fetch 2*</button>
 
-{#if $User.isFetching}
+{#if $User.fetching}
   <p>Loading...</p>
 {:else if $User.errors}
   <pre>

diff --git 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<MutationResult<_Data, _Input>>
 
-	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
@@ -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
@@ -77,7 +77,7 @@ class FragmentStoreCursor<_Data extends GraphQLObject, _Input> extends BasePagin
 	get(initialValue: _Data | null) {
 		const store = writable<FragmentPaginatedResult<_Data, { pageInfo: PageInfo }>>({
 			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,15 +189,15 @@ export class FragmentStoreOffset<
 	get(initialValue: _Data | null) {
 		const parent = writable<FragmentPaginatedResult<_Data>>({
 			data: initialValue,
-			isFetching: false,
+			fetching: false,
 		})
 
 		// create the offset handlers we'll add to the store
 		const handlers = offsetHandlers<_Data, _Input>({
 			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
@@ -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,