taneba / fullstack-graphql-app Goto Github PK

graphql error handling

This should be easier, but there's 2 options:

1. Just throw error

like Apollo instracts:
https://www.apollographql.com/blog/graphql/error-handling/full-stack-error-handling-with-graphql-apollo/

apollo exposes 3 basic errors(just wrappers around ApolloError):

• AuthenticationError — for authentication failures
• ForbiddenError — for authorization failures
• UserInputError — for validation errors on user input

Regardless of not using apollo, I would follow those patterns.

import { AuthenticationError } from 'apollo-server'
const resolvers = {
  Mutation: {
    protectedAction(root, args , { user }) { 
      if (!user) { 
        throw new AuthenticationError('You must be logged in');
      }
    }
  }
};

throws it, and the response will look like:

{
  "error": {
    "graphQLErrors": [
      {
        "message": "forbidden",
        "locations": [],
        "path": [
          "protectedAction"
        ],
        "extensions": {
          "code": "UNAUTHENTICATED",
        }
      }
    ],
    "networkError": null,
    "message": "GraphQL error: You must be logged in"
  }
}

2. Return union type response instead

Another option is to use union type for error handling.
https://blog.logrocket.com/handling-graphql-errors-like-a-champ-with-unions-and-interfaces/

Just see the schema below and you'll get it all.

type User {
  id: ID!
  login: String!
}

type UserRegisterResultSuccess {
  user: User!
}

type UserRegisterInvalidInputError {
  message: String!
  loginErrorMessage: String
  emailErrorMessage: String
  passwordErrorMessage: String
}

type CountryBlockedError {
  message: String!
}

type UserRegisterInput {
  login: String!
  email: String!
  password: String!
}

union UserRegisterResult =
  UserRegisterResultSuccess
  | UserRegisterInvalidInputError
  | CountryBlockedError

type Mutation {
  userRegister(input: UserRegisterInput!): UserRegisterResult!
}

Even though authentication/authorization is implemented well, it can be more secure.

I'd like to add a mechanism for checking ownership in the private field.

Let's say we have User type that contains public field and private field.

type User {
  name: string // public
  privateInfo: string // private. this should be restricted to user of admin role or owner
}

When we have a query that can get other users, a security concern comes in.

  type Query {
     allUsers: [User!]! @auth(role: ADMIN) // this should be ok
     friends: [User!]! @auth // this shouldn't be ok
  }

guide: https://www.prisma.io/docs/guides/upgrade-guides/upgrading-versions/upgrading-to-prisma-3

Now our code is using React.Suspense throughout our code base. With Suspense, loading ui is Suspense's work. But how about error ui? I used to see some code examples that uses Errorboundary component with suspense before. But as seeing the
React documentation, there aren't any official recommendation or code example that put Suspense and Errorboundary together.
We should investigate more on this but there's one error-boundary library by bvaughn, who is in the core React team.

https://github.com/bvaughn/react-error-boundary

As @kettanaito commented on my article about msw, @msw/data seems pretty nice in terms of reducing boilerplates.

https://dev.to/kettanaito/comment/1j2k2

https://www.prisma.io/docs/guides/testing

I'm considering better error handling in the backend. What I mean by "better" is type safety and exhaustiveness.

core error handling

Core error would be:

• validation
• errors by prisma
• errors by third party library
• side effects

My biggest concern is type safety here so that resolvers can handle error accurately. And there seems 2 possible approach for it.

First option: neverthrow

articles:

https://pianomanfrazier.com/post/what-is-functional-programming/

https://pianomanfrazier.com/post/exceptions-considered-harmful/

Second option: ts-pattern

articles:

https://dev.to/gvergnaud/bringing-pattern-matching-to-typescript-introducing-ts-pattern-v3-0-o1k

graphql error handling

moved to separate issue: #91

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Datasource	Name	Replacement PR?
npm	@types/testing-library__jest-dom

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• Update dependency @hookform/resolvers to v2.9.11
• Update dependency @radix-ui/colors to v0.1.9
• Update dependency @radix-ui/react-avatar to v1.0.4
• Update dependency @radix-ui/react-dialog to v1.0.5
• Update dependency @radix-ui/react-portal to v1.0.4
• Update dependency @types/node to v16.18.98
• Update dependency @types/styled-components to v5.1.34
• Update dependency @types/testing-library__jest-dom to v5.14.9
• Update dependency autoprefixer to v10.4.19
• Update dependency postcss to v8.4.38
• Update dependency prettier to v2.8.8
• Update dependency tailwindcss-animate to v1.0.7
• Update dependency tsc-alias to v1.8.10
• Update graphql-tools monorepo (@graphql-tools/schema, @graphql-tools/utils)
• Update dependency @fastify/compress to v6.5.0
• Update dependency @fastify/cors to v8.5.0
• Update dependency eslint to v8.57.0
• Update dependency eslint-config-prettier to v8.10.0
• Update dependency eslint-import-resolver-typescript to v3.6.1
• Update dependency eslint-plugin-react to v7.34.2
• Update dependency graphql to v16.8.2
• Update dependency prettier-plugin-tailwindcss to ^0.6.0
• Update dependency react-hook-form to v7.52.0
• Update dependency tailwind-merge to v1.14.0
• Update dependency ts-pattern to v4.3.0
• Update dependency tsconfig-paths to v4.2.0
• Update dependency tsup to v6.7.0
• Update dependency tsx to v3.14.0
• Update dependency turbo to v1.13.4
• Update dependency zod to v3.23.8
• Update nextjs monorepo to v13.5.6 (@next/font, next)
• Update pnpm to v7.33.7
• Update prisma monorepo to v4.16.2 (@prisma/client, prisma)
• Update react monorepo (@types/react, @types/react-dom, eslint-plugin-react-hooks, react, react-dom, react-is, react-test-renderer)
• Update testing-library monorepo (@testing-library/jest-dom, @testing-library/user-event)
• Update typescript-eslint monorepo to v5.62.0 (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• Update actions/cache action to v4
• Update actions/checkout action to v4
• Update actions/setup-node action to v4
• Update dependency @auth0/auth0-react to v2
• Update dependency @envelop/auth0 to v6
• Update dependency @envelop/core to v5
• Update dependency @envelop/depth-limit to v4
• Update dependency @envelop/generic-auth to v7
• Update dependency @envelop/rate-limiter to v6
• Update dependency @fastify/compress to v7
• Update dependency @fastify/cors to v9
• Update dependency @fastify/helmet to v11
• Update dependency @graphql-yoga/render-graphiql to v5
• Update dependency @heroicons/react to v2
• Update dependency @hookform/resolvers to v3
• Update dependency @radix-ui/colors to v3
• Update dependency @types/node to v20
• Update dependency @types/testing-library__jest-dom to v6
• Update dependency chalk to v5
• Update dependency clsx to v2
• Update dependency dotenv-cli to v7
• Update dependency eslint to v9
• Update dependency eslint-config-prettier to v9
• Update dependency eslint-plugin-simple-import-sort to v12
• Update dependency got to v14
• Update dependency graphql-yoga to v5
• Update dependency isomorphic-unfetch to v4
• Update dependency jsonwebtoken to v9 (jsonwebtoken, @types/jsonwebtoken)
• Update dependency jwks-rsa to v3
• Update dependency msw to v2
• Update dependency nodemon to v3
• Update dependency prettier to v3
• Update dependency tailwind-merge to v2
• Update dependency ts-pattern to v5
• Update dependency tsup to v8
• Update dependency tsx to v4
• Update dependency turbo to v2
• Update dependency typescript to v5
• Update dependency urql to v4
• Update graphql-tools monorepo (major) (@graphql-tools/schema, @graphql-tools/utils, graphql-tools)
• Update graphqlcodegenerator monorepo (major) (@graphql-codegen/cli, @graphql-codegen/gql-tag-operations-preset, @graphql-codegen/schema-ast, @graphql-codegen/typed-document-node, @graphql-codegen/typescript, @graphql-codegen/typescript-operations, @graphql-codegen/typescript-resolvers, @graphql-codegen/typescript-urql, @graphql-codegen/visitor-plugin-common)
• Update nextjs monorepo to v14 (major) (@next/bundle-analyzer, @next/font, eslint-config-next, next)
• Update pnpm to v9
• Update prisma monorepo to v5 (major) (@prisma/client, prisma)
• Update testing-library monorepo (major) (@testing-library/jest-dom, @testing-library/react)
• Update typescript-eslint monorepo to v7 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency @graphql-typed-document-node/core to v3.2.0
• Update dependency @graphql-yoga/render-graphiql to v3.9.1
• Update dependency class-variance-authority to ^0.7.0
• Update dependency fastify to v4.28.0
• Update dependency graphql-codegen-typescript-validation-schema to ^0.15.0
• Update dependency lucide-react to ^0.395.0
• Update dependency msw to v0.49.3
• Update dependency tailwindcss to v3.4.4
• Update dependency wonka to v6
• Update jest monorepo to v29 (major) (@types/jest, babel-jest, jest, ts-jest)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Add auth0 based authentication. We're going to have 2 types of users. 1. normal user 2. admin user. Admin user should access all users information.

I'm planning to use envelop plugins:

• @envelop/auth0 for authentication, general api protection
• @envelop/generic-auth for authorization

I don't know for sure how those 2 plugins are able to work together well but I'm trying.

as The Guild recommends graphql-yoga over graphql-helix

https://github.com/hashicorp/nextjs-bundle-analysis

I'm thinking about using spinners-react
https://github.com/adexin/spinners-react

see: ben-rogerson/twin.macro#576