Looks like a promising boilerplate... Could you pl. explain to the novice developers like me how SSR is working? The transfer of "state" from server to client side is really a concern, kindly explain that.

Also, it'd be great if you can provide leads how to proceed ahead after an page initial page is rendered.

Thanks

Hi Jack,

What is the format for the Authentication header in the Apollo studio explorer?

I can't seem to find a key value pair that works to recognise the token. All my queries return not authorised (apart from the me query, which returns null data) - even when the login mutation runs.

Is there a specific syntax for JWT in the Apollo Studio Explorer header?

thank you

Hi,

thank you for making this demo.

When you say:

We use Husky to run a couple of checks each commit (prettier, eslint & commitlint), make sure to add a .huskyrc file to your home directory ~/.huskyrc, and add this in:

Do you mean that I should add a file at the root level called .huskyrc?

I did that and it has converted the file structure to:

BOILERPLATE/.husky/.huskyrc

The commit message and pre-commit files are now located in the same folder. Is that what should be created?

Thank you!

Hey Jack!
Thank you for putting this boilerplate together! I was trying to do the initial setup of this repo and ran into this issue when running yarn install. Is there something with Prisma that I need to install separately or do I need to setup the .env file for api before running yarn install? I tried deleting node_modules and trying it again to no avail. I also do not have Prisma installed globally. Any insight into this issue would be greatly appreciated!

[4/4] Building fresh packages...
[-/9] ⠈ waiting...
[-/9] ⠈ waiting...
[9/9] ⠈ @boilerplate/api
[-/9] ⠈ waiting...
error [path]\node_modules\@boilerplate\api: Command failed.
Exit code: 1
Command: prisma generate
Arguments:
Directory: [path]\node_modules\@boilerplate\api
node:internal/modules/cjs/loader:936
  throw err;
  ^

Error: Cannot find module '[path]\node_modules\node_modules\prisma\build\index.js'
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []

I just saw your reddit comment and viewed the example webpage on mobile.
Some padding is missing on the forgot password page.

The other pages look good:

Hi Jack,

Thank you for sharing this repo - it's so helpful. You've made it really easy to learn your approach.

When I start this, a cors configuraion error arises when I try to upload the avatar image.

The error says:

> Access to fetch at 'https://s3.ap-southeast-2.amazonaws.com/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I can see that the api/src/index/ts applies middleware with cors set to true.

If I make the following changes, will I mess other parts of your code around? I'm not sure how to implement cors within this structure.

apolloServer.applyMiddleware({ app, cors: false })
and then add

app.use(cors(corsOptions))

In the ormconfig.json under "name": "production"

we see originally

    "entities": ["packages/api/dist/modules/**/*.entity.js"],
    "migrations": ["packages/api/dist/db/migrations/*.js"],

What worked for me was this pattern (because I wasn't aware node needed the current working directory to be at the root):

    "entities": ["modules/**/*.entity.js"],
    "migrations": ["db/migrations/*.js"],

Perhaps these can be added to the array of glob paths. I've added debug printout in
the createDbConnection function that shows if any files were loaded:

    const entity_names = connection.entityMetadatas.map(entity => entity.name)
    console.log('connection.entities', entity_names)
    console.log('connection.migrations', connection.migrations

I noticed that running heroku local web it does use the original paths. However node running with current working directory of packages/api/dist instead at the root caused my issue.

tl;dr

I suggest adding debug printout in createDbConnection to show the entities and migration files being loaded, just to double check the paths are correct. I had spent couple hours trying to figure out why my production params didn't populate an empty database. It could save others some time.

This link this is not handled by the CheckAuth router.

https://.localhost:3000/reset-password?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjNhY2NkNjMwLTcxYjEtNGMxOS1hMjM5LTYxMmY1ODE3Nzk4NSIsImlhdCI6MTU4ODM1MDE4OCwiZXhwIjoxNTkwNzY5Mzg4LCJhdWQiOlsiQGZhbmN5c3RhY2svYXBwIiwiQGZhbmN5c3RhY2svd2ViIl0sImlzcyI6IkBmYW5jeXN0YWNrL2FwaSJ9.I-VV2sgiM8lNFcbaQNBXRFYojdrY7zZy63DaGie8w_0

I see the api exists in user.resolver.ts so maybe this page was forgotten to be added. I could create a PR for my version of this page or you guys can add it.

Whenever attempting to make a request from the Apollo Client from the API or SSR, you receive an error detailing

Error: Network error: Only absolute URLs are supported
at new ApolloError

To replicate error on main/develop, just try to make a SSR Apollo query or mutation within the index.tsx or within a /api/... route.

This looks to be due to the fact that the /api/graphql proxy is being executed server side in which sends a request to...well..not an absolute URL.

I issued #1776 so you can see where it's happening.

I've tried to create my own error to throw when login fails too many times:

import { ApolloError } from "apollo-server-errors/src/index"

export class AuthLockdownError extends ApolloError {
  constructor(message: string, properties?: Record<string, any>) {
    super(message, 'AUTH_LOCKDOWN', properties);

    Object.defineProperty(this, 'name', { value: 'AuthLockdownError' });
  }
}

Usage:

 // Handle a login request to the application.
  async login(requestIP: string, data: { email: string; password: string }): Promise<User> {
    ...

    if (AUTH_THROTTLE && await this.hasTooManyLoginAttempts(throttleKey)) {
      throw new AuthLockdownError("Too many loin attempts have failed")
    }

    const isValidPassword = await bcrypt.compare(data.password, user.password)
    ....
  }

When doing so I get the following error

(node:7284) UnhandledPromiseRejectionWarning: D:\graphql-tests\typescript-boilerplate\node_modules\apollo-server-errors\src\index.ts:1
import { GraphQLError, GraphQLFormattedError } from 'graphql';
^^^^^^

SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:1070:16)
at Module._compile (internal/modules/cjs/loader.js:1120:27)
at Module._compile (D:\graphql-tests\typescript-boilerplate\node_modules\source-map-support\source-map-support.js:521:25)
at Module.m._compile (C:\Users\Hitech95\AppData\Local\Temp\ts-node-dev-hook-8290200771403802.js:57:25)
at Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
at require.extensions. (C:\Users\Hitech95\AppData\Local\Temp\ts-node-dev-hook-8290200771403802.js:59:14)
at Object.nodeDevHook [as .ts] (D:\graphql-tests\typescript-boilerplate\node_modules\ts-node-dev\lib\hook.js:61:7)
at Module.load (internal/modules/cjs/loader.js:1000:32)
at Function.Module._load (internal/modules/cjs/loader.js:899:14)
at Module.require (internal/modules/cjs/loader.js:1042:19)

(node:7284) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To term

I'm quite new with TS/Node but I don't understand why is giving me this issue on a module instead of on my code. Reading online looks like that it have to do with the tsconfig.ts file.

Any suggestyion on how to solve this using this boilerplate?

There's no docs for this page so I hope its cool to ask this here.

Whenever adding a relation to the User model such as shown below, I'm under the impression the typegraphql-prisma package with the help of the lib/loadResolvers function will automatically include the Relation and Crud resolvers as referenced within the docs here

For graphql's introspection to pickup the relations, I'm having to explicitly define the @FieldResovlers in which case I lose the ability to paginate or set limits within my query.

I'm brand new to prisma, type-graphql, and this pattern so I might be misunderstanding the intended use case or pattern here, but is this an intended result or am I utilizing the stack incorrectly?

Resolver

  @FieldResolver(() => UsersResponse)
  async followedBy(@Root() user: User) {
    const items = user.followedBy || []
    const count = user.followedBy?.length || 0
    return { items, count }
  }

  @FieldResolver(() => UsersResponse)
  following(@Root() user: User) {
    const items = user.following || []
    const count = user.following?.length || 0
    return { items, count }
  }

Model

model User {
id          String   @id @default(uuid())
createdAt   DateTime @default(now())
updatedAt   DateTime @default(now()) @updatedAt

followedBy User[] @relation("UserFollows", references: [id])
following  User[] @relation("UserFollows", references: [id])
}

When I'm trying to log in on the UI i'm getting Cannot set property 'user' of undefined any ideas?

Hi I am get the following error when I run yarn dev

Hi Jack,

where is the login route coming from?

I'm trying to change the on success handler on the login page to redirect to a different page, but I can't follow whats happening in the direct flow.

Where can I change the redirect router?

thank you

const onSubmit = (data: LoginInput) => {
    return form.handler(() => login({ variables: { data } }), {
      onSuccess: async (data) => {
        await fetch("/api/login", {
          method: "post",
          body: JSON.stringify({ [LOGIN_TOKEN_KEY]: data.login.token }),
        })
        client.writeQuery<MeQuery>({ query: MeDocument, data: { me: data.login.user } })
        router.replace(redirect || "/")
        // router.replace('/dashboard')

      },
    })
  }

model User {
  id        String   @id @default(dbgenerated("gen_random_uuid()")) @db.Uuid
  email     String   @unique
  /// @TypeGraphQL.omit(output: true)
  password  String
  firstName String
  lastName  String
  avatar    String?
  role      Role     @default(USER)
  bio       String?
  createdAt DateTime @default(now()) @db.Timestamptz(6)
  updatedAt DateTime @default(now()) @updatedAt @db.Timestamptz(6)
}

model Todo {
  id         String   @id @default(dbgenerated("gen_random_uuid()")) @db.Uuid
  title      String
  user       User     @relation(fields: [userId], references: [id])
  userId     String   @db.Uuid
  isComplete Boolean? @default(false)
  createdAt  DateTime @default(now()) @db.Timestamptz(6)
  updatedAt  DateTime @default(now()) @updatedAt @db.Timestamptz(6)
}

Error from terminal

Environment variables loaded from .env
Prisma schema loaded from src/db/schema.prisma
Datasource "db": PostgreSQL database "boilerplate", schema "public" at "localhost:5432"

Error: Schema parsing
error: Error validating field `user` in model `Todo`: The relation field `user` on Model `Todo` is missing an opposite relation field on the model `User`. Either run `prisma format` or add it manually.
  -->  schema.prisma:38
   |
37 |   title      String
38 |   user       User     @relation(fields: [userId], references: [id])
39 |   userId     String   @db.Uuid
   |

Validation Error Count: 1
error Command failed with exit code 1.

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

File: renovate.json
Error type: The renovate configuration file contains some invalid settings
Message: Invalid regExp for packageRules[0].packagePatterns: eslint, Invalid regExp for packageRules[1].packagePatterns: @types/``

If you try to run yarn seed you'll get an error. seed.ts file is missed.
(P.S. probably it should be inside of db directory)

What is used to for Email in development?
I see that port 1025 is used

.env.example is empty. It's hard to set any key which is needed to run backend API.

Can you share keys?

Thanks

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

Datasource	Name	Replacement PR?
npm	@types/express-jwt
npm	@types/ioredis
npm	@types/react-native
npm	vercel-is-pull-request

Rate-Limited

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

• chore(deps): update dependency @types/node to v16.18.106
• fix(deps): update dependency dayjs to v1.11.13
• fix(deps): update react-navigation monorepo (@react-navigation/core, @react-navigation/native, @react-navigation/native-stack, @react-navigation/stack)
• chore(deps): update dependency @babel/core to v7.25.2
• chore(deps): update eslint (@babel/eslint-parser, eslint-plugin-react)
• fix(deps): update apollo graphql packages (@apollo/client, @apollo/server)
• fix(deps): update dependency aws-sdk to v2.1687.0
• fix(deps): update dependency react-hook-form to v7.53.0
• fix(deps): update dependency typegraphql-prisma to v0.28.0
• fix(deps): update emotion monorepo (@emotion/react, @emotion/styled)
• fix(deps): update sentry-javascript monorepo to v7.119.0 (@sentry/nextjs, @sentry/node)
• chore(deps): update dependency lint-staged to v15
• chore(deps): update dependency prettier to v3
• chore(deps): update dependency turbo to v2
• chore(deps): update dependency typescript to v5
• chore(deps): update graphqlcodegenerator monorepo (major) (@graphql-codegen/add, @graphql-codegen/cli, @graphql-codegen/typescript, @graphql-codegen/typescript-operations, @graphql-codegen/typescript-react-apollo)
• fix(deps): update dependency @hookform/resolvers to v3
• fix(deps): update dependency framer-motion to v11
• fix(deps): update dependency glob to v11
• fix(deps): update dependency jsonwebtoken to v9
• fix(deps): update dependency react-icons to v5
• fix(deps): update dependency react-native-svg to v15
• fix(deps): update dependency styled-components to v6
• fix(deps): update dependency yup to v1
• fix(deps): update sendgrid-nodejs monorepo to v8 (major) (@sendgrid/client, @sendgrid/mail)
• fix(deps): update sentry-javascript monorepo to v8 (major) (@sentry/nextjs, @sentry/node)
• 🔐 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.

• chore(deps): update @types (major) (@types/express-jwt, @types/ioredis, @types/jsonwebtoken, @types/node, @types/react, @types/react-dom)
• chore(deps): update commitlint monorepo to v19 (major) (@commitlint/cli, @commitlint/config-conventional)
• chore(deps): update dependency husky to v9
• chore(deps): update eslint (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser, eslint, eslint-config-next, eslint-config-prettier, eslint-plugin-simple-import-sort)
• fix(deps): update dependency @chakra-ui/react to v2
• fix(deps): update dependency chalk to v5
• fix(deps): update dependency expo to v51
• fix(deps): update dependency express-jwt to v8
• fix(deps): update dependency graphql to v16
• fix(deps): update dependency next to v14
• fix(deps): update react monorepo to v18 (major) (react, react-dom)
• 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

Hi Jack,

Thanks you for sharing this repo, it help me a lot.

I have a problem with upload file to s3. Could you show me how to config that?

See title. 😄