graphql errors

karambarakat · Oct 8, 2023 · 21cb2b4 · 21cb2b4
1 parent 7745d0c
commit 21cb2b4
Show file tree

Hide file tree

Showing 24 changed files with 381 additions and 422 deletions.
diff --git a/apps/frontend/src/api/index.ts b/apps/frontend/src/api/index.ts
@@ -1,4 +1,4 @@
-import { QueryFunctionContext } from '@tanstack/react-query'
+import { QueryFunction, QueryFunctionContext } from '@tanstack/react-query'
 import * as mutations from './mutations'
 export { mutations }
 import * as queries from './queries'
@@ -12,44 +12,9 @@ export type queryKeys<T extends queryNames = queryNames> = T extends queryNames
     : never
   : never
 
-export type queryReturn<T extends queryNames> = T extends queryNames
-  ? ReturnType<(typeof queries)[T]> extends Promise<infer A>
-    ? A
-    : never
-  : never
-
-// still experimental
-function fnFromQueryKey<Q extends keyof typeof queries>({
-  queryKey,
-}: QueryFunctionContext<queryKeys<Q>>): () => Promise<queryReturn<Q>> {
-  const [name, ...rest] = queryKey
-
-  return () =>
-    queries[name](
-      // @ts-ignore
-      ...rest,
-    ) as any
-}
-
-// the above code is not working yet
-// const data = useQuery({
-//   queryKey: getQueryKey('find_one_log', { _id: '123' }),
-//   queryFn: fnFromQueryKey,
-// })
-// console.log(data.data?.().then(d => d._id))
-// what I want is
-// console.log(data.data?._id)
-
-export function getQueryKey<T extends queryNames>(...args: queryKeys<T>) {
-  return args
-}
-// this is not optimal way to get typescript intellisense, this results in
-// const data = useQuery({
-//   queryKey: getQueryKey('find_one_log', { _id: '123' }),
-//   queryFn: fnFromQueryKey,
-// })
-// what I want is
-// const data = useQuery({
-//   queryKey: ['find_one_log', { _id: '123' }],
-//   queryFn: fnFromQueryKey,
-// }) satisfies SomeType
+// dead code?
+// export type queryReturn<T extends queryNames> = T extends queryNames
+//   ? ReturnType<(typeof queries)[T]> extends Promise<infer A>
+//     ? A
+//     : never
+//   : never
diff --git a/apps/frontend/src/api/mutations.ts b/apps/frontend/src/api/mutations.ts
@@ -221,12 +221,8 @@ export async function handler(res: Response) {
   }
 
   const token_ = res.headers.get('X-Token')
-  token_
-    ? token.setItem(token_)
-    : console.warn(
-        'api should always return token on successful requests',
-        res.headers.forEach(console.warn),
-      )
+  token_ && token.setItem(token_)
+
   const json = await res.json()
 
   if (String(res.status).startsWith('4') && 'error' in json) {
@@ -238,10 +234,17 @@ export async function handler(res: Response) {
   }
 
   if ('data' in json) {
+    token_ ||
+      console.warn(
+        'api should always return token on successful requests',
+        res.headers.forEach(console.warn),
+      )
+
     return json.data
   }
 
-  throw new Error('Response is not JSON')
+  console.error('Response is not data JSON: ', { json })
+  throw new Error(`Response is not data JSON: ${Object.keys(json)}`)
 }
 
 export function gql(query: string, variables?: object) {

diff --git a/apps/frontend/src/components/CategoryFrom.stories.tsx b/apps/frontend/src/components/CategoryFrom.stories.tsx
@@ -2,6 +2,7 @@ import 'twin.macro'
 import React from 'react'
 import { CategoryBody, FormBody, FormFooter, FormRoot } from './_FormUtils'
 import Button from 'ui/src/components/Button'
+import { within } from '@storybook/testing-library'
 
 function Component({ renderAs }: { renderAs: JSX.Element }) {
   return <div tw="w-[400px]">{renderAs}</div>
@@ -24,7 +25,7 @@ export default {
   component: Component,
 } satisfies SB.Meta<typeof Component>
 
-export const CreateCategory = {
+export const BasicForm = {
   args: {
     renderAs: (
       <FormRoot
@@ -47,23 +48,11 @@ export const CreateCategory = {
   },
 } satisfies SB.Story<typeof Component>
 
-export const UpdateCategory = {
-  args: {
-    renderAs: (
-      <FormRoot
-        action={async category => console.log({ category })}
-        asChild
-        required={['title']}
-      >
-        <div aria-label="Add new Entry">
-          <FormBody
-            form={<CategoryBody />}
-            footer={<FormFooter Button={p => <Button {...p}>Update</Button>} />}
-          />
-        </div>
-      </FormRoot>
-    ),
+export const ThemeIcon = {
+  args: BasicForm.args,
+  play: async ({ canvasElement }) => {
+    const root = within(canvasElement)
+    const elem1 = await root.findByLabelText('Change Icon')
+    elem1.click()
   },
-}
-
-export const Light = {} satisfies SB.Story<typeof Component>
+} satisfies SB.Story<typeof Component>
diff --git a/apps/frontend/src/components/EntryForm.tsx b/apps/frontend/src/components/EntryForm.tsx
@@ -37,6 +37,7 @@ export function CreateEntryFormPortal() {
                   Rest={() => (
                     <Dialog.Close asChild>
                       <Button
+                        type="button"
                         variant="subtle"
                         color="slate"
                         size="null"

diff --git a/apps/frontend/src/components/EntryFrom.stories.tsx b/apps/frontend/src/components/EntryFrom.stories.tsx
@@ -1,10 +1,11 @@
 import 'twin.macro'
 import React from 'react'
 import { useQueryClient } from '@tanstack/react-query'
-import { EntryInput, Query } from 'types/gql/graphql'
-import { rejectGraphql } from 'ui/src/storybook_utils/msw'
+import { CategoryFragment, EntryInput } from 'types/gql/graphql'
+import { GraphqlMsw, rejectGraphql } from 'ui/src/storybook_utils/msw'
 import { EntryBody, FormBody, FormFooter, FormRoot } from './_FormUtils'
 import Button from 'ui/src/components/Button'
+import { within } from '@storybook/testing-library'
 
 function Component({ renderAs }: { renderAs: JSX.Element }) {
   return <div tw="w-[400px]">{renderAs}</div>
@@ -14,7 +15,24 @@ export default {
   title: 'app/EntryForm',
   parameters: {
     layout: 'centered',
-    msw: [rejectGraphql],
+    msw: [
+      GraphqlMsw({
+        getAllCategories: [
+          {
+            id: '1',
+            title: 'Cat 1',
+            color: 'Red',
+            icon: null,
+          },
+          {
+            id: '2',
+            title: 'Cat 2',
+            color: 'Orange',
+            icon: '4',
+          },
+        ],
+      }),
+    ],
     query: {},
     a11y: {
       rules: [
@@ -26,31 +44,9 @@ export default {
     },
   },
   component: Component,
-  decorators: [
-    Story => {
-      const client = useQueryClient()
-
-      client.setQueryData(['find_category'], [
-        {
-          id: 'sdf',
-          createdAt: 'sdf',
-          createdBy: {
-            id: 'sdf',
-            email: 'sdf',
-            createdAt: 'sdf',
-            providers: 'sdf',
-            updatedAt: 'sd',
-          },
-          title: 'sdf',
-          updatedAt: 'sdlfk',
-        },
-      ] satisfies Query['getAllCategories'])
-      return <Story />
-    },
-  ],
 } satisfies SB.Meta<typeof Component>
 
-export const CreateEntry = {
+export const BasicForm = {
   args: {
     renderAs: (
       <FormRoot
@@ -67,6 +63,7 @@ export const CreateEntry = {
                 Rest={() => (
                   <Button
                     variant="subtle"
+                    type="button"
                     color="slate"
                     size="null"
                     tw="py-1 px-2"
@@ -84,36 +81,11 @@ export const CreateEntry = {
   },
 } satisfies SB.Story<typeof Component>
 
-export const UpdateEntry = {
-  args: {
-    renderAs: (
-      <FormRoot
-        action={async values => console.log(values)}
-        values={undefined as unknown as EntryInput}
-        asChild
-        required={['amount', 'title']}
-      >
-        <div aria-label="Update Entry">
-          <FormBody
-            form={<EntryBody />}
-            footer={
-              <FormFooter
-                Rest={() => (
-                  <Button
-                    variant="subtle"
-                    color="slate"
-                    size="null"
-                    tw="py-1 px-2"
-                  >
-                    Close
-                  </Button>
-                )}
-                Button={p => <Button {...p}>Update</Button>}
-              />
-            }
-          />
-        </div>
-      </FormRoot>
-    ),
+export const ThemeIcon = {
+  args: BasicForm.args,
+  play: async ({ canvasElement }) => {
+    const root = within(canvasElement)
+    const elem1 = await root.findByLabelText('Change Category')
+    elem1.click()
   },
 } satisfies SB.Story<typeof Component>
diff --git a/apps/frontend/src/components/LogEntry.tsx b/apps/frontend/src/components/LogEntry.tsx