noquarterteam / boilerplate-graphql Goto Github PK
View Code? Open in Web Editor NEW⚡️Fullstack boilerplate using Typescript, React, Node & GraphQL
Home Page: https://boilerplate.noquarter.co
⚡️Fullstack boilerplate using Typescript, React, Node & GraphQL
Home Page: https://boilerplate.noquarter.co
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.
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.
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.
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)
.env.example is empty. It's hard to set any key which is needed to run backend API.
Can you share keys?
Thanks
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
See title. 😄
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))
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/``
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?
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!
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These updates are currently rate-limited. Click on a checkbox below to force their creation now.
@emotion/react
, @emotion/styled
)@react-navigation/core
, @react-navigation/native
, @react-navigation/native-stack
, @react-navigation/stack
)@types/cookie
, @types/node
, @types/react
, @types/react-dom
, @types/react-native
)@babel/eslint-parser
, eslint
, eslint-plugin-import
, eslint-plugin-react
, eslint-plugin-react-hooks
)@apollo/client
, @apollo/server
)@sentry/nextjs
, @sentry/node
, @sentry/tracing
)@graphql-codegen/add
, @graphql-codegen/cli
, @graphql-codegen/typescript
, @graphql-codegen/typescript-operations
, @graphql-codegen/typescript-react-apollo
)@sendgrid/client
, @sendgrid/mail
)These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
@types/express-jwt
, @types/ioredis
, @types/jsonwebtoken
, @types/node
, @types/react
, @types/react-dom
)@commitlint/cli
, @commitlint/config-conventional
)@typescript-eslint/eslint-plugin
, @typescript-eslint/parser
, eslint
, eslint-config-next
, eslint-config-prettier
, eslint-plugin-simple-import-sort
)react
, react-dom
)package.json
@commitlint/cli 17.8.1
@commitlint/config-conventional 17.8.1
@typescript-eslint/eslint-plugin 5.62.0
@typescript-eslint/parser 5.62.0
@babel/eslint-parser 7.23.3
eslint 8.53.0
eslint-config-prettier 8.10.0
eslint-plugin-flowtype 8.0.3
eslint-plugin-import 2.29.0
eslint-plugin-jsx-a11y 6.8.0
eslint-plugin-simple-import-sort 8.0.0
husky 8.0.3
lint-staged 13.3.0
prettier 2.8.8
turbo 1.10.16
typescript 4.9.5
node >=16.0.0
prettier 2.8.8
packages/api/package.json
@sendgrid/client 7.7.0
@sendgrid/mail 7.7.0
@sentry/node 7.80.1
@sentry/tracing 7.80.1
apollo-graphql 0.9.7
@apollo/server 4.9.5
aws-sdk 2.1206.0
bcryptjs 2.4.3
chalk 4.1.2
class-transformer 0.5.1
class-validator 0.14.0
dayjs 1.11.10
dotenv 16.3.1
express 4.18.2
express-jwt 6.1.2
glob 8.1.0
graphql 15.8.0
graphql-fields 2.0.3
graphql-scalars 1.22.4
handlebars 4.7.8
ioredis 5.3.2
jsonwebtoken 8.5.1
morgan 1.10.0
nodemailer 6.9.7
pg 8.11.3
reflect-metadata 0.1.13
type-graphql 1.1.1
typedi 0.10.0
typegraphql-prisma 0.27.1
@types/bcryptjs 2.4.6
@types/express 4.17.21
@types/express-jwt 6.0.4
@types/graphql-fields 1.3.9
@types/ioredis 4.28.10
@types/jsonwebtoken 8.5.9
@types/morgan 1.9.9
@types/node 16.18.61
@types/nodemailer 6.4.14
ts-node 10.9.1
ts-node-dev 2.0.0
packages/app/package.json
@apollo/client 3.8.7
@react-navigation/core 6.4.10
@react-navigation/native 6.1.9
@react-navigation/native-stack 6.9.17
@react-navigation/stack 6.3.20
expo 45.0.8
expo-status-bar 1.7.1
graphql 15.8.0
graphql-tag 2.12.6
native-base 3.4.28
polished 4.2.2
react 17.0.2
react-dom 17.0.2
react-native-svg 12.5.1
react-native-web 0.19.9
styled-components 5.3.11
styled-system 5.1.5
@babel/core 7.23.3
@graphql-codegen/add 3.2.3
@graphql-codegen/cli 2.16.5
@graphql-codegen/typescript 2.8.8
@graphql-codegen/typescript-operations 2.5.13
@graphql-codegen/typescript-react-apollo 3.3.7
@types/react 17.0.70
@types/react-dom 17.0.23
@types/react-native 0.72.6
eslint-plugin-react 7.33.2
eslint-plugin-react-hooks 4.6.0
packages/web/package.json
@apollo/client 3.8.7
@chakra-ui/react 1.8.9
@emotion/react 11.11.1
@emotion/styled 11.11.0
@hookform/resolvers 2.9.11
@sentry/nextjs 7.80.1
dayjs 1.11.10
framer-motion 6.5.1
graphql 15.8.0
next 12.3.4
react 17.0.2
react-dom 17.0.2
react-dropzone 14.2.3
react-hook-form 7.48.2
react-icons 4.12.0
vercel-is-pull-request 0.0.8
yup 0.32.11
@graphql-codegen/add 3.2.3
@graphql-codegen/cli 2.16.5
@graphql-codegen/typescript 2.8.8
@graphql-codegen/typescript-operations 2.5.13
@graphql-codegen/typescript-react-apollo 3.3.7
@types/cookie 0.5.4
@types/react 17.0.70
@types/react-dom 17.0.23
eslint-config-next 12.3.4
What is used to for Email in development?
I see that port 1025 is used
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.
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')
},
})
}
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: []
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?
@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 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 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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.