prisma/awesome-links

Users browse through a list of curated links and bookmark their favorite ones. Code for prisma.io course.

Awesome Links

This project is the source code for the tutorial series of three parts about building a Fullstack Web application With TypeScript, PostgreSQL, Next.js, Prisma & GraphQL.

Here is what you will learn:

Part 1: Data Modeling

• Set up Prisma on a Next.js project to connect to PostgreSQL database
• Define database models with Prisma
• Define relationship with Prisma (Many-to-Many)
• Execute migration and seed your database with Prisma
• Explore your database with Prisma Studio

Link to the article

Part 2: GraphQL API

• Create a GraphQL schema
• Set up a GraphQL server on Next.js
• Inject Prisma client in the GraphQL context
• Use GraphQL code-first approach using Pothos
• Set up Apollo client on Next.js to consume a GraphQL API
• Implement the pagination on a GraphQL API

Link to the article

Part 3: Authentication

Link to article

Part 4: Image Upload

Link to article

Part 5: Deployment

Link to article

awesome-links's Issues

Does this tutorial use cursor or offset navigation?

In the tutorial series it says it uses cursor-based pagination:

https://www.prisma.io/blog/fullstack-nextjs-graphql-prisma-2-fwpc6ds155#pagination-at-the-database-level

However, the code says something different:

https://github.com/prisma/awesome-links/blob/main/graphql/types/Link.ts#L28

Doesn't seem to me that it uses cursor-based pagination 🤔

Can't query from Apollo Studio after Part 3

Hi team,

I was following the tutorial and after part 3 (Adding authentication with Auth0). I am unable to query the Graphql with Apollo Studio anymore.

I believe it must because I am unable to pass token to query to Apollo Studio so it query it as anonymous user. Do you guys have any tip how to use Apollo Studio after part 3?

Thank you very much.

Best regards,

Hoang Phi

Part 3? :)

Hey @m-abdelwahab, love the first two blog posts for this! Are you still planning to write a post for part 3? I noticed the part-3 branch hasn't been updated in a couple of months.

Runtime error on part-3 branch: Cannot read properties of undefined (reading 'Symbol(Pothos.contextCache)')

Full error:

- event compiled successfully in 118 ms (91 modules)
- error Error [TypeError]: Cannot read properties of undefined (reading 'Symbol(Pothos.contextCache)')
    at file:///Users/bee/projects/biowerks/software/awesome-links/node_modules/@pothos/core/esm/utils/context-cache.js:10:33
    at SchemaBuilder.prismaObject (file:///Users/bee/projects/biowerks/software/awesome-links/node_modules/@pothos/plugin-prisma/esm/schema-builder.js:18:22)
    at eval (webpack-internal:///(api)/./graphql/types/Link.ts:8:47) {
  digest: undefined

Node version: 16.15.1

Repro steps:

git checkout part-3
rm -Rf node_modules
rm -f package-lock.json
npm install 
npx prisma generate
npm run dev
`

When the browser tries to fetch localhost:3000 the error above occurs.

Property 'connectionField' does not exist on type 'ObjectDefinitionBlock<"Query">'

Hi, I just cloned the repo and made a fresh installation of node_modules; but Typescript throwing the following error at graphql/types/Links.ts,

Property 'connectionField' does not exist on type 'ObjectDefinitionBlock<"Query">'

Any solution how to fix it other than downgrading packages? I didn't upgrade any version number form package.json, just a fresh "yarn install"

GraphQL Queries fail after any changes

I completed the first 4 blog posts and thought I was understanding everything but then I tried to make an extremely small modification and everything stopped working. I changed the Link object to another name in both Prisma + Nexus and did a prisma db push and confirmed the DB was updated. Now I see that Nexus updated my queries and all the names look right, but none of my queries work. They all say "GRAPHQL_VALIDATION_FAILED".

Any advice appreciated. Trying to read through the Nexus documentation and see if I'm misunderstanding something.

Are the old branches available?

Hi, I'm trying to follow along, and am stuck at the last step of the 2nd instalment.

I can see there is an instruction to update the resolver, but I can't see how or where to do that. The part 2 repo no longer has a resolvers file in the graphql folder. Where did that go?

I have an error message with the form of the index.tsx file, that says: Property 'links' does not exist on type 'unknown'. I don't seem to be defining links in that file. How did you do that?

Thank you?

Set up Renovate

How to manipulate/use DateTime using Nexus ?

Hi, first and foremost "Thank you"

Thanks to your tutorial i have been able to start a personal project using :

• NextJS
• Chakra UI
• Prisma
• Nexus
• Apollo
• Sqlite

All of which are new to me.

I'm a beginner in the database/ORM/GraphQL world

---

I have been stuck a bit on an issue lately

"How to use DateTime inside Nexus ?"

To explain a bit, following/adapting your tutorial i did this

// graphql/types/recipe.ts
export const Recipe = objectType({
    name: 'Recipe',
    definition(t) {
        t.string('id')
        t.string('name')
        t.string('description')
        t.string('url')
        t.string('category')
        t.string('createdAt')  //  Not the good Type (should be a "DateTime")
        t.string('updatedAt')  //  Not the good Type (should be a "DateTime")
    },
})

But i had seated "this" inside schema.prisma

// schema.prisma
model Recipe {
  id          String   @id @unique
  name        String
  description String
  url         String
  category    String
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
}

Finally i had a Typescript error on a query "resolver". I took a bit of time to found that error.

Copy past are evil

---

From my understanding , nexus doesn't support "DateTime" natively

In order to implement DateTime type you need to setup some complexe "mapping" inside the makeSchema method (could you point me on the documentation ?)

Or use nexus-prisma in order to make prisma and nexus communicate about the types.

Is there another way? I am missing something else ?

If you're close to the team developing nexus-prisma tell them i'm waiting for this plugin 😁

---

Thanks you again

You're helping me becoming a better developer

ReferenceError: prisma is not defined

My app works fine locally and is able to pull data through the data proxy, but when I deploy I get this error.

[31mERR�[0m ReferenceError: prisma is not defined
    at resolve (/var/task/.next/server/pages/api/graphql.js:154:68)
    at file:///var/task/node_modules/@pothos/plugin-prisma/esm/field-builder.js:72:37
    at resolvePrismaCursorConnection (file:///var/task/node_modules/@pothos/plugin-prisma/esm/util/cursors.js:234:27)
    at resolve (file:///var/task/node_modules/@pothos/plugin-prisma/esm/field-builder.js:54:51)
    at executeField (file:///var/task/node_modules/@graphql-tools/executor/esm/execution/execute.js:294:24)
    at executeFields (file:///var/task/node_modules/@graphql-tools/executor/esm/execution/execute.js:241:28)
    at executeOperation (file:///var/task/node_modules/@graphql-tools/executor/esm/execution/execute.js:205:18)
    at file:///var/task/node_modules/@graphql-tools/executor/esm/execution/execute.js:62:37
    at new ValueOrPromise (/var/task/node_modules/value-or-promise/build/main/ValueOrPromise.js:14:21)
    at executeImpl (file:///var/task/node_modules/@graphql-tools/executor/esm/execution/execute.js:62:12) {
  path: [ 'links' ],
  locations: [ { line: 2, column: 3 } ],
  extensions: [Object: null prototype] {}
}

I have "vercel-build": "npx prisma generate --data-proxy && next build", in the scripts in package.json. And I can see prisma is getting generated in the deployment logs on Vercel:

Running build in Cleveland, USA (East) – cle1
--
19:52:47.943 | Cloning github.com/chriscreber/awesome-links-done (Branch: main, Commit: 12a8d69)
19:52:48.254 | Cloning completed: 310.432ms
19:52:51.502 | Restored build cache
19:52:51.533 | Running "vercel build"
19:52:52.046 | Vercel CLI 29.3.6
19:52:52.305 | Installing dependencies...
19:52:52.592 | yarn install v1.22.17
19:52:52.622 | info No lockfile found.
19:52:52.627 | [1/4] Resolving packages...
19:52:57.424 | warning aws-sdk > [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
19:52:57.425 | warning aws-sdk > url > [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
19:53:03.700 | [2/4] Fetching packages...
19:53:18.994 | [3/4] Linking dependencies...
19:53:18.997 | warning "graphql-yoga > @envelop/[email protected]" has incorrect peer dependency "@envelop/core@^3.0.6".
19:53:18.998 | warning "graphql-yoga > @envelop/[email protected]" has incorrect peer dependency "@envelop/core@^3.0.6".
19:53:18.998 | warning "react-hot-toast > [email protected]" has unmet peer dependency "csstype@^3.0.10".
19:53:31.896 | [4/4] Building fresh packages...
19:53:32.929 | success Saved lockfile.
19:53:32.932 | $ npx prisma generate --data-proxy
19:53:33.755 | Prisma schema loaded from prisma/schema.prisma
19:53:34.393 |  
19:53:34.394 | ✔ Generated Prisma Client (4.15.0 \| dataproxy) to ./node_modules/@prisma/client in 171ms
19:53:34.394 |  
19:53:34.394 | ✔ Generated Pothos integration to ./node_modules/@pothos/plugin-prisma/generated.ts in 18ms
19:53:34.394 | You can now start using Prisma Client in your code. Reference: https://pris.ly/d/client
19:53:34.394 | ```
19:53:34.394 | import { PrismaClient } from '@prisma/client'
19:53:34.395 | const prisma = new PrismaClient()
19:53:34.395 | ```
19:53:34.395 |  
19:53:34.395 | To use Prisma Client in edge runtimes like Cloudflare Workers or Vercel Edge Functions, import it like this:
19:53:34.395 | ```
19:53:34.396 | import { PrismaClient } from '@prisma/client/edge'
19:53:34.396 | ```
19:53:34.396 |  
19:53:34.397 | You will need a Prisma Data Proxy connection string. See documentation: https://pris.ly/d/data-proxy
19:53:34.397 |  
19:53:34.457 | Done in 41.87s.
19:53:34.498 | Detected Next.js version: 13.4.4
19:53:34.499 | Running "yarn run build"
19:53:34.700 | yarn run v1.22.17
19:53:34.732 | $ next build
19:53:35.247 | - info Linting and checking validity of types...
19:53:45.170 | - info Creating an optimized production build...
19:53:54.943 | - info Compiled successfully
19:53:54.950 | - info Collecting page data...
19:53:55.485 | in prisma file
19:53:55.485 | production
19:53:55.485 | 1
19:53:55.485 | 2
19:53:55.490 | 3
19:53:55.490 | 4
19:54:07.122 | - info Generating static pages (0/5)
19:54:07.194 | - info Generating static pages (1/5)
19:54:07.206 | - info Generating static pages (2/5)
19:54:07.207 | in index file
19:54:07.207 | new changes
19:54:07.207 | production
19:54:07.208 | true
19:54:07.208 | user: undefined
19:54:07.209 |  
19:54:07.216 | - info Generating static pages (3/5)
19:54:07.231 | - info Generating static pages (5/5)
19:54:07.428 | - info Finalizing page optimization...
19:54:07.431 |  
19:54:07.443 | Route (pages)                              Size     First Load JS
19:54:07.443 | ┌ ○ /                                      3.84 kB         134 kB
19:54:07.443 | ├   /_app                                  0 B             122 kB
19:54:07.443 | ├ ○ /404                                   182 B           122 kB
19:54:07.443 | ├ ○ /about                                 270 B           122 kB
19:54:07.443 | ├ λ /admin                                 13.8 kB         144 kB
19:54:07.443 | ├ λ /api/auth/[...auth0]                   0 B             122 kB
19:54:07.443 | ├ λ /api/auth/hook                         0 B             122 kB
19:54:07.443 | ├ λ /api/graphql                           0 B             122 kB
19:54:07.443 | ├ λ /api/upload-image                      0 B             122 kB
19:54:07.443 | ├ ○ /favorites                             3.5 kB          133 kB
19:54:07.443 | └ λ /link/[id]                             5.87 kB         136 kB
19:54:07.443 | + First Load JS shared by all              127 kB
19:54:07.443 | ├ chunks/framework-cda2f1305c3d9424.js   45.2 kB
19:54:07.444 | ├ chunks/main-6f0913649682f6ca.js        26.8 kB
19:54:07.445 | ├ chunks/pages/_app-080515f3b3b51fac.js  48.7 kB
19:54:07.445 | ├ chunks/webpack-87b3a303122f2f0d.js     995 B
19:54:07.445 | └ css/eea48206b604b5a0.css               4.92 kB
19:54:07.445 |  
19:54:07.445 | λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
19:54:07.445 | ○  (Static)  automatically rendered as static HTML (uses no initial props)
19:54:07.445 |  
19:54:08.129 | Done in 33.43s.
19:54:11.246 | Traced Next.js server files in: 3.080s
19:54:14.128 | Created all serverless functions in: 2.880s
19:54:14.134 | Collected static files (public/, static/, .next/static): 4.086ms
19:54:15.663 | Build Completed in /vercel/output [1m]
19:54:16.246 | Deploying outputs...
19:54:24.378 | Deployment completed
19:54:29.654 | Uploading build cache [115.83 MB]...
19:54:32.320 | Build cache uploaded: 2.666s

Please help.

[Question] Missing blog posts

Hi...

Any reason why the new blog posts (parts 2 and 3) related to this course are not published? :(

Incorrect import in part-1

Hi, I found that if I import 'data' as in the example, I can't find it. I need to change it to import { links as data } from "../data/links";.

Nexus and ApolloServer types discrepancy

When passing a Nexus-generated schema to ApolloServer like this:

const apolloServer = new ApolloServer({
   schema,
   resolvers,
   context: createContext,
});

the editor starts screaming at me saying Type 'NexusGraphQLSchema' is missing the following properties from type 'GraphQLSchema': _queryType, _mutationType, _subscriptionType, _directives, and 3 more..

Here is my graphql.ts file:

import { ApolloServer } from "apollo-server-micro";
import { schema } from "../../graphql/schema";
import { resolvers } from "../../graphql/resolvers";
import { createContext } from "../../graphql/context";
import Cors from "micro-cors";

const cors = Cors();

const apolloServer = new ApolloServer({
   schema,
   resolvers,
   context: createContext,
});

const startServer = apolloServer.start();

const handler = async (req, res) => {
   if (req.method === "OPTIONS") {
      res.end();
      return false;
   }

   await startServer;

   await apolloServer.createHandler({
      path: "/api/graphql",
   })(req, res);
};

export default cors(handler);

export const config = {
   api: {
      bodyParser: false,
   },
};

And my schema.ts file:

import { makeSchema } from "nexus";
import { join } from "path";
import * as types from "./types";

export const schema = makeSchema({
   types,
   outputs: {
      typegen: join(
         process.cwd(),
         "node_modules",
         "@types",
         "nexus-typegen",
         "index.d.ts"
      ),
      schema: join(process.cwd(), "graphql", "schema.graphql"),
   },
   contextType: {
      export: "Context",
      module: join(process.cwd(), "graphql", "context.ts"),
   },
});

So far I haven't been able to solve the issue nor find any reference of it online, apart from a comment under your Building a GraphQL schema using Nexus, Prisma and Nextjs video mentioning the same error message.

High vulnerabilities: XSS in Image Optimization API for Next.js

Hi, thanks for this great tutorial. Can't wait to see the upcoming release of part-3. However, there's a vulnerabilities issue for Next.js if the version is below 11.1.1. Is it convenient to update this project to the latest Next.js version? Thanks in advance!

link: GHSA-9gr3-7897-pp7m
reproduce: run npm install

Typescript intellense not working

Hi, the awesome-links example doesn't trigger autocomplete intellisense in the IDE when accesing the prisma client in ctx, but this other example does.

Why is that? How can I make the intellisense work with awesome-links. I can't tell why it is not working.

Importing the Context type from the context file and manually assigning it to the ctx variable helps intellense figure out the prisma object is in ctx, but it doesn't generate suggestions beyond that.