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 @@ + + + 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