🚧 Tryinng urql

api/src/__tests__/account.spec.ts

@@ -9,10 +9,14 @@ import { getArgs } from '../core/__tests__/graphql'
 import { prisma } from '../core/__tests__/prisma'
 
 gql`
+  fragment Account on Account {
+    id
+    email
+  }
+
   query Account {
     account {
-      id
-      email
+      ...Account
     }
   }
 
@@ -21,7 +25,9 @@ gql`
   }
 
   mutation login($email: String!, $password: String!) {
-    login(email: $email, password: $password)
+    login(email: $email, password: $password) {
+      ...Account
+    }
   }
 
   mutation logout {

api/src/account.schema.ts

@@ -20,7 +20,7 @@ export const typeDefs = gql`
 
   extend type Mutation {
     signup(email: String!, password: String!): Boolean! @isPublic
-    login(email: String!, password: String!): Boolean! @isPublic
+    login(email: String!, password: String!): Account @isPublic
     logout: Boolean!
   }
 `
@@ -70,10 +70,7 @@ export const resolvers: Resolvers = {
         throw new Error(ErrorCode.BAD_USER_INPUT)
       }
 
-      const user = await prisma.user.findFirst({
-        where: { email },
-        select: { hashedPassword: true, id: true },
-      })
+      const user = await prisma.user.findFirst({ where: { email } })
 
       if (!user || !user.hashedPassword) {
         fakePasswordTest()
@@ -84,7 +81,7 @@ export const resolvers: Resolvers = {
         }
 
         await auth.login(user)
-        return true
+        return user
       }
     },
 

api/src/app.ts

@@ -18,7 +18,7 @@ export const app = new Koa<DefaultState, Context>()
 export const graphqlOptions = {
   definitions: [root, todo, account],
   transformers: [authenticationSchemaTransformer],
-  isSafelistEnabled: true,
+  isSafelistEnabled: false,
   safelists: [safelist],
 }
 

api/src/core/graphql.ts

@@ -65,6 +65,7 @@ async function processSafelist(ctx: Context, { safelists = [], lazyLoadSafelist
   const safelist = ctx.request.body?.extensions?.safelist
 
   if (!safelist || !safelist.hash || !safelist.version) {
+    ctx.status = 403
     throw new Error(ErrorCode.FORBIDDEN)
   }
 
@@ -79,6 +80,7 @@ async function processSafelist(ctx: Context, { safelists = [], lazyLoadSafelist
 
   const query = safelistsByVersion[version]?.[hash]
   if (!query) {
+    ctx.status = 403
     throw new Error(ErrorCode.FORBIDDEN)
   }
 

app/codegen.yml

@@ -9,21 +9,19 @@ generates:
     plugins:
       - typescript
       - typescript-operations
-      - typescript-react-apollo
-      - named-operations-object
-      - typescript-apollo-client-helpers
+      - typescript-urql
+      - typescript-urql-graphcache
     config:
       identifierName: ListAllOperations
       scalars:
         Date: 'string'
-      reactApolloVersion: 3
       exportFragmentSpreadSubTypes: true
       namingConvention:
         enumValues: keep
 
-  src/generated/fragments.json:
+  src/generated/schema.json:
     plugins:
-      - fragment-matcher
+      - urql-introspection
 
   src/generated/safelist.json:
     plugins:

app/package.json

@@ -12,13 +12,17 @@
   },
   "dependencies": {
     "@apollo/client": "^3.5.6",
+    "@graphql-codegen/typescript-urql-graphcache": "^2.2.3",
+    "@graphql-codegen/urql-introspection": "^2.1.1",
     "@types/node": "^17.0.4",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
+    "@urql/exchange-graphcache": "^4.3.6",
     "graphql": "^16.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "typescript": "^4.5.4",
+    "urql": "^2.0.6",
     "web-vitals": "^2.1.2"
   },
   "devDependencies": {
@@ -29,7 +33,9 @@
     "@graphql-codegen/typescript-apollo-client-helpers": "^2.1.8",
     "@graphql-codegen/typescript-operations": "^2.2.1",
     "@graphql-codegen/typescript-react-apollo": "^3.2.2",
+    "@graphql-codegen/typescript-urql": "^3.4.2",
     "@graphql-example/graphql-codegen-operations-safelist": "file:../packages/graphql-codegen-operations-safelist",
+    "@urql/devtools": "^2.0.3",
     "graphql": "^16.1.0",
     "react-scripts": "5.0.0"
   },

app/src/App.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import { Auth } from './components/Auth'
 import { TodoInput } from './components/TodoInput'
 import { TodoList } from './components/TodoList'
-import { ToggleMock } from './components/ToggleMock'
 
 function App() {
   return (
@@ -17,7 +16,7 @@ function App() {
           </div>
         </Auth>
       </main>
-      <ToggleMock />
+      {/* <ToggleMock /> */}
     </div>
   )
 }

app/src/components/Auth.tsx

@@ -1,13 +1,17 @@
-import { gql } from '@apollo/client'
 import React from 'react'
+import { gql } from 'urql'
 import { useAccountQuery } from '../generated/graphql'
 import { Login } from './Login'
 
 gql`
+  fragment AccountForAuth on Account {
+    id
+    email
+  }
+
   query Account {
     account {
-      id
-      email
+      ...AccountForAuth
     }
   }
 `
@@ -17,9 +21,9 @@ type AuthProps = {
 }
 
 export function Auth({ children }: AuthProps) {
-  const { data, loading, called } = useAccountQuery()
+  const [{ data, fetching }] = useAccountQuery()
 
-  if (loading || !called) {
+  if (fetching) {
     return null
   } else if (data?.account) {
     return children

app/src/components/Login.tsx

@@ -1,26 +1,31 @@
-import { gql } from '@apollo/client'
 import React, { useState } from 'react'
+import { gql } from 'urql'
 import { useLoginMutation } from '../generated/graphql'
 
 gql`
   mutation Login($email: String!, $password: String!) {
-    login(email: $email, password: $password)
+    login(email: $email, password: $password) {
+      ...AccountForAuth
+    }
   }
 `
 
 export function Login() {
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
-  const [login, loginMutation] = useLoginMutation()
+  const [loginResult, login] = useLoginMutation()
 
   return (
     <form
       onSubmit={async (event) => {
         event.preventDefault()
-        if (!loginMutation.loading) {
-          const { data } = await login({ variables: { email, password } })
+        if (!loginResult.fetching) {
+          const { data } = await login({ email, password })
           if (data?.login) {
-            await loginMutation.client.resetStore()
+            /**
+             * @todo reset local store
+             */
+            // await loginResult.
           }
         }
       }}

app/src/components/TodoInput.tsx

@@ -1,5 +1,5 @@
-import { gql } from '@apollo/client'
 import React from 'react'
+import { gql } from 'urql'
 import { useAddTodoMutation } from '../generated/graphql'
 
 gql`
@@ -12,30 +12,29 @@ gql`
 
 export function TodoInput() {
   const [label, setLabel] = React.useState<string>('')
-  const [addTodo, addTodoMutation] = useAddTodoMutation({
-    /**
-     * @todo find a way to type this
-     * Maybe use merge methods defined in apolloclient
-     * node_modules/@apollo/client/core/types.d.ts L.48 and L.53
-     */
-    updateQueries: {
-      TodoList: (previousData, { mutationResult }) => {
-        if (!mutationResult.data) return previousData
+  /**
+   * @todo fix cache
+   */
+  // {
+  //   updateQueries: {
+  //     TodoList: (previousData, { mutationResult }) => {
+  //       if (!mutationResult.data) return previousData
 
-        return {
-          todos: [...previousData.todos, mutationResult.data.addTodo],
-        }
-      },
-    },
-  })
+  //       return {
+  //         todos: [...previousData.todos, mutationResult.data.addTodo],
+  //       }
+  //     },
+  //   },
+  // }
+  const [addTodoResult, addTodo] = useAddTodoMutation()
 
   return (
     <form
       onSubmit={async (event) => {
         event.preventDefault()
-        if (!addTodoMutation.loading && label != '') {
+        if (!addTodoResult.fetching && label != '') {
           setLabel('')
-          await addTodo({ variables: { label } })
+          await addTodo({ label })
         }
       }}
     >

app/src/components/TodoItem.tsx

@@ -1,5 +1,5 @@
-import { gql } from '@apollo/client'
 import React from 'react'
+import { gql } from 'urql'
 import {
   TodoItemForTodoFragment,
   useRemoveTodoMutation,
@@ -29,23 +29,27 @@ type TodoItemProps = {
 }
 
 export function TodoItem({ todo }: TodoItemProps) {
-  const [updatetodo, updatetodoMutation] = useUpdateTodoMutation()
+  const [, updatetodo] = useUpdateTodoMutation()
 
-  const [removeTodo, removeTodoMutation] = useRemoveTodoMutation({
-    variables: { id: todo.id },
-    /**
-     * @todo find a way to type this
-     */
-    updateQueries: {
-      TodoList: (previousData, { mutationResult }) => {
-        if (!mutationResult.data) return previousData
+  /**
+   * @todo fix cache
+   */
+  //  {
+  //   variables: { id: todo.id },
+  //   /**
+  //    * @todo find a way to type this
+  //    */
+  //   updateQueries: {
+  //     TodoList: (previousData, { mutationResult }) => {
+  //       if (!mutationResult.data) return previousData
 
-        return {
-          todos: previousData.todos.filter((previousTodo) => previousTodo.id !== todo.id),
-        }
-      },
-    },
-  })
+  //       return {
+  //         todos: previousData.todos.filter((previousTodo) => previousTodo.id !== todo.id),
+  //       }
+  //     },
+  //   },
+  // }
+  const [removeTodoResult, removeTodo] = useRemoveTodoMutation()
 
   return (
     <li key={todo.id} className={todo.isCompleted ? 'done' : ''}>
@@ -56,11 +60,9 @@ export function TodoItem({ todo }: TodoItemProps) {
           type="button"
           onClick={async (event) => {
             event.preventDefault()
-            if (!updatetodoMutation.loading) {
+            if (!removeTodoResult.fetching) {
               await updatetodo({
-                variables: {
-                  input: { id: todo.id, label: todo.label, isCompleted: !todo.isCompleted },
-                },
+                input: { id: todo.id, label: todo.label, isCompleted: !todo.isCompleted },
               })
             }
           }}
@@ -74,8 +76,8 @@ export function TodoItem({ todo }: TodoItemProps) {
           type="button"
           onClick={async (event) => {
             event.preventDefault()
-            if (!removeTodoMutation.loading) {
-              await removeTodo()
+            if (!removeTodoResult.fetching) {
+              await removeTodo({ id: todo.id })
             }
           }}
         >

app/src/components/TodoList.tsx

@@ -1,5 +1,5 @@
-import { gql } from '@apollo/client'
 import React from 'react'
+import { gql } from 'urql'
 import { useTodoListQuery } from '../generated/graphql'
 import { TodoItem } from './TodoItem'
 
@@ -12,9 +12,9 @@ gql`
 `
 
 export function TodoList() {
-  const { data, loading } = useTodoListQuery()
+  const [{ data, fetching }] = useTodoListQuery()
 
-  if (loading) {
+  if (fetching) {
     return null
   } else if (data?.todos.length) {
     return <ul>{data && data.todos.map((todo) => <TodoItem key={todo.id} todo={todo} />)}</ul>