신규 graphql 클라이언트 구현

Author: devunt

.gitignore

@@ -2,6 +2,7 @@
 
 node_modules/
 
+.bifrost/
 .glitch/
 .svelte-kit/
 .turbo/

apps/penxle.com/package.json

@@ -8,7 +8,7 @@
   ],
   "scripts": {
     "build": "vite build",
-    "codegen": "svelte-kit sync && panda codegen && glitch generate",
+    "codegen": "svelte-kit sync && panda codegen && bifrost codegen",
     "dev": "doppler run -- vite dev",
     "lint:svelte": "svelte-check --fail-on-warnings",
     "lint:typecheck": "tsc",
@@ -32,6 +32,7 @@
     "@opentelemetry/api": "^1.8.0",
     "@paralleldrive/cuid2": "^2.2.2",
     "@penxle/adapter-docker": "workspace:^",
+    "@penxle/bifrost": "workspace:^",
     "@penxle/glitch": "workspace:^",
     "@penxle/lib": "workspace:^",
     "@pothos/core": "^3.41.0",

apps/penxle.com/src/hooks/handles/headers.ts

@@ -0,0 +1,13 @@
+import type { Handle } from '@sveltejs/kit';
+
+export const headers = (async ({ event, resolve }) => {
+  return await resolve(event, {
+    filterSerializedResponseHeaders: (name) => {
+      if (name === 'content-type') {
+        return true;
+      }
+
+      return false;
+    },
+  });
+}) satisfies Handle;

apps/penxle.com/src/hooks/handles/index.ts

@@ -1,2 +1,3 @@
+export * from './headers';
 export * from './logging';
 export * from './maintenance';

apps/penxle.com/src/hooks/server.ts

@@ -1,13 +1,13 @@
 import { sequence } from '@sveltejs/kit/hooks';
 import { building } from '$app/environment';
 import { setupGlobals } from './common';
-import { logging } from './handles';
+import { headers, logging } from './handles';
 
 export { handleError } from './common';
 
 setupGlobals();
 
-export const handle = sequence(logging);
+export const handle = sequence(logging, headers);
 
 if (!building) {
   await import('$lib/server/graphql/handler');

apps/penxle.com/src/lib/components/Avatar.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { fragment, graphql } from '$glitch';
+  import { fragment, graphql } from '$bifrost';
   import { css } from '$styled-system/css';
   import Image from './Image.svelte';
-  import type { Avatar_profile } from '$glitch';
+  import type { Avatar_profile } from '$bifrost';
   import type { SystemStyleObject } from '$styled-system/types';
 
   let _profile: Avatar_profile;

apps/penxle.com/src/lib/components/GridImage.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Image } from '$lib/components';
   import { css, sva } from '$styled-system/css';
-  import type { Image_image } from '$glitch';
+  import type { Image_image } from '$bifrost';
   import type { SystemStyleObject } from '$styled-system/types';
 
   export let style: SystemStyleObject | undefined = undefined;

apps/penxle.com/src/lib/components/Image.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import qs from 'query-string';
   import CompactLogo from '$assets/logos/compact.svg?component';
-  import { fragment, graphql } from '$glitch';
+  import { fragment, graphql } from '$bifrost';
   import { css } from '$styled-system/css';
-  import type { Image_image } from '$glitch';
+  import type { Image_image } from '$bifrost';
   import type { SystemStyleObject } from '$styled-system/types';
 
   type $$Props = {

apps/penxle.com/src/lib/components/PostCard.svelte

@@ -4,12 +4,12 @@
   import IconBookmark from '~icons/tabler/bookmark';
   import IconBookmarkFilled from '~icons/tabler/bookmark-filled';
   import IconDotsVertical from '~icons/tabler/dots-vertical';
-  import { fragment, graphql } from '$glitch';
+  import { fragment, graphql } from '$bifrost';
   import { mixpanel } from '$lib/analytics';
   import { Avatar, Chip, Icon, Image, Tag } from '$lib/components';
   import { css } from '$styled-system/css';
   import { center, flex } from '$styled-system/patterns';
-  import type { Feed_post } from '$glitch';
+  import type { Feed_post } from '$bifrost';
   import type { SystemStyleObject } from '$styled-system/types';
 
   let _post: Feed_post;
@@ -44,14 +44,14 @@
           ...Image_image
         }
 
-        publishedRevision @_required {
+        publishedRevision @required {
           id
           title
           previewText
           price
         }
 
-        space @_required {
+        space @required {
           id
           slug
           name
@@ -62,7 +62,7 @@
           }
         }
 
-        member @_required {
+        member @required {
           id
 
           profile {

apps/penxle.com/src/lib/components/media/ThumbnailPicker.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import ky from 'ky';
   import { createEventDispatcher } from 'svelte';
-  import { graphql } from '$glitch';
+  import { graphql } from '$bifrost';
   import { Button, Modal } from '$lib/components';
   import { trackable } from '$lib/svelte/store';
   import { isValidImageFile, validImageMimes } from '$lib/utils';

apps/penxle.com/src/lib/components/pages/collections/CreateCollectionModal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import mixpanel from 'mixpanel-browser';
   import IconCamera from '~icons/tabler/camera';
-  import { graphql } from '$glitch';
+  import { graphql } from '$bifrost';
   import { Icon, Image } from '$lib/components';
   import { ThumbnailPicker } from '$lib/components/media';
   import { Button, Modal } from '$lib/components/v2';
@@ -10,7 +10,7 @@
   import { UpdateSpaceCollectionSchema } from '$lib/validations';
   import { css } from '$styled-system/css';
   import { center } from '$styled-system/patterns';
-  import type { Image_image } from '$glitch';
+  import type { Image_image } from '$bifrost';
 
   let thumbnailPicker: ThumbnailPicker;
   export let open = false;

apps/penxle.com/src/lib/components/pages/collections/ManageCollectionModal.svelte

@@ -2,7 +2,7 @@
   import dayjs from 'dayjs';
   import mixpanel from 'mixpanel-browser';
   import { page } from '$app/stores';
-  import { fragment, graphql } from '$glitch';
+  import { fragment, graphql } from '$bifrost';
   import { Button, Modal } from '$lib/components';
   import { Editable, PopupSearch } from '$lib/components/forms';
   import Image from '$lib/components/Image.svelte';
@@ -13,7 +13,7 @@
   import type {
     SpaceCollectionsEntityPage_ManageCollectionModal_collection,
     SpaceCollectionsEntityPage_ManageCollectionModal_post,
-  } from '$glitch';
+  } from '$bifrost';
 
   $: slug = $page.params.space;
 
@@ -42,7 +42,7 @@
           ...Image_image
         }
 
-        publishedRevision @_required {
+        publishedRevision @required {
           id
           title
         }

apps/penxle.com/src/lib/components/pages/collections/UpdateCollectionModal.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
   import mixpanel from 'mixpanel-browser';
   import IconCamera from '~icons/tabler/camera';
-  import { fragment, graphql } from '$glitch';
+  import { fragment, graphql } from '$bifrost';
   import { Button, Icon, Image, Modal } from '$lib/components';
   import { FormField, TextInput } from '$lib/components/forms';
   import { ThumbnailPicker } from '$lib/components/media';
   import { createMutationForm } from '$lib/form';
   import { UpdateSpaceCollectionSchema } from '$lib/validations';
   import { css, cx } from '$styled-system/css';
   import { center } from '$styled-system/patterns';
-  import type { UpdateCollectionModal_Collection_query } from '$glitch';
+  import type { UpdateCollectionModal_Collection_query } from '$bifrost';
 
   let thumbnailPicker: ThumbnailPicker;
   export let open = false;

apps/penxle.com/src/lib/components/pages/posts/PostManageTable.svelte

@@ -7,7 +7,7 @@
   import IconChevronDown from '~icons/tabler/chevron-down';
   import IconPlus from '~icons/tabler/plus';
   import IconTrash from '~icons/tabler/trash';
-  import { fragment, graphql } from '$glitch';
+  import { fragment, graphql } from '$bifrost';
   import { mixpanel } from '$lib/analytics';
   import { Avatar, Button, Chip, Icon, Image, Modal, Tag, Tooltip } from '$lib/components';
   import { Checkbox, Editable, Switch } from '$lib/components/forms';
@@ -16,12 +16,8 @@
   import { css } from '$styled-system/css';
   import { flex } from '$styled-system/patterns';
   import type { ChangeEventHandler } from 'svelte/elements';
-  import type {
-    PostManageTable_Collection,
-    PostManageTable_Post_query,
-    PostManageTable_SpaceMember,
-    PostVisibility,
-  } from '$glitch';
+  import type { PostManageTable_Collection, PostManageTable_Post_query, PostManageTable_SpaceMember } from '$bifrost';
+  import type { PostVisibility } from '$lib/enums';
   import type { PublishPostInput } from '$lib/validations/post';
 
   const toolbarMenuOffset = 16;
@@ -67,13 +63,13 @@
           id
         }
 
-        space @_required {
+        space @required {
           id
           name
           slug
         }
 
-        member @_required {
+        member @required {
           id
 
           profile {
@@ -83,7 +79,7 @@
           }
         }
 
-        publishedRevision @_required {
+        publishedRevision @required {
           id
           title
           createdAt

apps/penxle.com/src/lib/const/feed.ts

@@ -1,4 +1,4 @@
-import type { ContentFilterCategory, PostCategory, PostPair } from '$glitch';
+import type { ContentFilterCategory, PostCategory, PostPair } from '$lib/enums';
 
 export const filterToLocaleString: Record<ContentFilterCategory, string> = {
   ADULT: '성인물',

apps/penxle.com/src/lib/emoji/Emoji.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import IconX from '~icons/tabler/x';
-  import { graphql } from '$glitch';
+  import { graphql } from '$bifrost';
   import { mixpanel } from '$lib/analytics';
   import { Icon } from '$lib/components';
   import { cx } from '$styled-system/css';

apps/penxle.com/src/lib/emoji/EmojiPicker.svelte

@@ -3,7 +3,7 @@
   import { onMount } from 'svelte';
   import IconMoodPlus from '~icons/tabler/mood-plus';
   import { afterNavigate } from '$app/navigation';
-  import { fragment, graphql } from '$glitch';
+  import { fragment, graphql } from '$bifrost';
   import { mixpanel } from '$lib/analytics';
   import { Icon } from '$lib/components';
   import { createFloatingActions } from '$lib/svelte/actions';
@@ -12,7 +12,7 @@
   import i18n from './i18n.json';
   import { emojiData as data } from './index';
   import type { Emoji } from '@emoji-mart/data';
-  import type { EmojiPicker_query } from '$glitch';
+  import type { EmojiPicker_query } from '$bifrost';
   import type { SystemStyleObject } from '$styled-system/types';
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any