-
- {/each}
- {/await}
-
- 
-
- {user.login}
-
- {#await details then detail}
-
-
-```
-
-
-The component should accept a prop for the GitHub handle of the user we want more detail on. This is where we can type-hint the prop for this component. If we type-hint `userLogin` as a `string`, we won't be able to pass anything but a `string` as input from the parent component.
-
-Let's now import and call the `UserDetails` component in our `Users` component. We'll need to make some adjustments to toggle it open and closed from the parent.
-
-
-
-```svelte
-
-
-{detail.name}
-{detail.company}
-{detail.location}
- {/await} - (user.showDetails = true)}>
- {
- setTimeout(() => (user.showDetails = false));
- }}
- />
- {/if}
-
- {/each}
- {/await}
-
-
-
- {#if user.showDetails}
- {user.login}
--[Start from scratch with CockroachDB](https://www.prisma.io/docs/getting-started/setup-prisma/start-from-scratch/relational-databases/connect-your-database-typescript-cockroachdb) - -### ... or use Prisma with your existing CockroachDB database - -If you already have an existing project that uses a CockroachDB database, you can easily start to incrementally adopt Prisma using introspection. - -Prisma's _introspection_ features reads the schema of your database and automatically builds the Prisma schema with those models. - -
-[Add Prisma to existing CockroachDB project](https://www.prisma.io/docs/getting-started/setup-prisma/add-to-existing-project/relational-databases-typescript-cockroachdb) diff --git a/apps/blog/content/blog/connections-edges-nodes-in-relay-758d358aa4c7/index.mdx b/apps/blog/content/blog/connections-edges-nodes-in-relay-758d358aa4c7/index.mdx deleted file mode 100644 index 9aba9c2ebe..0000000000 --- a/apps/blog/content/blog/connections-edges-nodes-in-relay-758d358aa4c7/index.mdx +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: "Connections, Edges & Nodes in Relay" -slug: "connections-edges-nodes-in-relay-758d358aa4c7" -date: "2016-05-27" -authors: - - "Johannes Schickling" - - "Søren Bramer Schmidt" -metaTitle: "Learn more about Connections, Edges & Nodes in Relay | Prisma" -metaDescription: "Learn how Relay uses connections, edges, and nodes to model relationships and pagination on top of GraphQL schemas." -metaImagePath: "/connections-edges-nodes-in-relay-758d358aa4c7/imgs/meta-cc730c78d87244cb877764a6a4a850b2c9223871-1200x775.png" -heroImagePath: "/connections-edges-nodes-in-relay-758d358aa4c7/imgs/hero-a86c8de527177e03b9e08b9f1f1522dc1debbc6d-559x361.png" ---- - -The terminology of Relay can be quite overwhelming in the beginning. Relay introduces a handful of new concepts on top - of GraphQL, mainly in order to manage relationships between models.. - -This already leads to the first new term: a one-to-many relationship between two models is called a **connection**. - -### Example - -Let’s consider this following simple GraphQL query. It fetches the `releaseDate` of the `movie` “Inception” and the `name`s of all of its `actors`. The `actors` field is a _connection_ between a `movie` and multiple `actors`. - -```graphql -{ - movie(title: "Inception") { - releaseDate - actors { - name - } - } -} -``` -Now let’s take this query and adjust it to the expected format of Relay. - -```graphql -{ - movie(title: "Inception") { - releaseDate - actors(first: 10) { - edges { - node { - name - } - } - } - } -``` -## Edges and nodes - -Okay, let’s see what’s going on here. The `actors` connection now has a more complex structure containing the fields `edges` and `node`. These terms should be a bit more clear when looking at the following image. - -Don’t worry. In order to use Relay, you don’t have to understand the reasons why the structure is designed this way but rest assured that [it makes a lot of sense](https://relay.dev/graphql/connections.htm). - - - -Lastly, we also notice the first: 10 parameter on the actors field. This gives us a way to [paginate](https://en.wikipedia.org/wiki/Pagination) over the entire list of related actors. In this case we’re taking the first 10 actors (nodes). In the same way we could additionally specify the after parameter which allows us to skip a certain amount of nodes. - -## Further reading - -This was just a brief overview on connections in Relay. If you want to dive deeper please check out the [Relay docs on connections](https://relay.dev/docs/api-reference/store/#connectionhandler) or explore the [Relay Cursor Connections Specification](https://relay.dev/graphql/connections.htm). - diff --git a/apps/blog/content/blog/coo-announcement-aer1fgviirjb/index.mdx b/apps/blog/content/blog/coo-announcement-aer1fgviirjb/index.mdx deleted file mode 100644 index ca5fb732c3..0000000000 --- a/apps/blog/content/blog/coo-announcement-aer1fgviirjb/index.mdx +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: "Prisma Is Expanding Its Executive Team" -slug: "coo-announcement-aer1fgviirjb" -date: "2023-01-03" -authors: - - "Søren Bramer Schmidt" -metaTitle: "Prisma Is Expanding Its Executive Team" -metaDescription: "Announcement about new COO joining Prisma" -metaImagePath: "/coo-announcement-aer1fgviirjb/imgs/hero-c79e2c7b7f4cd64f5be9677d4fab38140809b0f9-1267x711.png" -heroImagePath: "/coo-announcement-aer1fgviirjb/imgs/hero-c79e2c7b7f4cd64f5be9677d4fab38140809b0f9-1267x711.png" -heroImageAlt: "Prisma Is Expanding Its Executive Team" -tags: - - "announcement" ---- - -We are expanding our executive leadership team and are very excited to announce that Nitin Gupta joins us as COO. - -We’re excited to announce that [Nitin Gupta](https://linkedin.com/in/gniting) has joined Prisma as our first Chief Operating Officer (COO). Nitin brings a wealth of experience from his time in Silicon Valley and at various startups. Nitin joins us from [Scandit](https://scandit.com/), where he spent four years as their VP of Partnerships and Customer Success. Nitin has a proven track record of driving growth, streamlining operations and leading high-performing teams. - -As COO, Nitin will oversee our commercial, people, and operational functions, focusing on alignment and optimization to support the delivery of our product ambitions. This is a pivotal role for Prisma as we continue to build upon the upward trajectory of our product adoption in the market. - -“*Since our [last fundraise](https://www.prisma.io/blog/series-b-announcement-v8t12ksi6x), we’ve felt the need to augment our executive team, and Nitin brings the right mix of experience, foresight, and execution rigor. I’m excited to have him join Prisma and be my sparring partner.*” Søren Bramer Schmidt, CEO @ Prisma. - -We are thrilled to have Nitin on board and look forward to the contributions he will make as Prisma continues to grow and evolve. Welcome to the team, Nitin! - diff --git a/apps/blog/content/blog/data-platform-static-ips/index.mdx b/apps/blog/content/blog/data-platform-static-ips/index.mdx deleted file mode 100644 index 8e4d40ebf1..0000000000 --- a/apps/blog/content/blog/data-platform-static-ips/index.mdx +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: "Enabling static egress IPs in the Prisma Data Platform" -slug: "data-platform-static-ips" -date: "2022-02-09" -authors: - - "Daniel Norman" -metaTitle: "Enabling static egress IPs in the Prisma Data Platform" -metaDescription: "Static egress IP support ensures that the Prisma Data Platform connects to your databases through public static IP addresses helping you keep your database secure." -metaImagePath: "/data-platform-static-ips/imgs/meta-725058cd14e118302aa8e56bbaf31e46436bfc91-1269x640.png" -heroImagePath: "/data-platform-static-ips/imgs/hero-f9991a96b6b8ce0fa61dead528141fa1e8b911be-844x474.svg" -heroImageAlt: "Enabling static egress IPs in the Prisma Data Platform" -tags: - - "announcement" - - "platform" ---- - -We're launching Early Access support for static egress IPs. Keep your databases secure by ensuring that the Prisma - Data Platform only connects to your database from specific IPs. [Try it out](https://cloud.prisma.io/) and share your - feedback. - -> ⚠️ **Outdated Information** -> -> Please be aware that the information provided in this blog post is outdated. Since its publication, there have been updates to the Prisma Data Platform, including the discontinuation of the Data Proxy. -> If you require connection pooling and global caching, we recommend exploring [Prisma Accelerate](https://www.prisma.io/data-platform/accelerate). -> For the latest details on our platform's products and features, please visit our [website](https://www.prisma.io/) and consult our [changelog](https://www.prisma.io/changelog). - -## Keeping your database secure - -When building database-backed applications, keeping your database secure is of utmost importance. Databases typically contain sensitive information and personal user data. As a developer or company, it's your responsibility to ensure you have taken measures to keep your database secure to prevent unauthorized access. - -For this reason, it is common practice to take a layered approach to database security, whereby you layer defenses and protection mechanisms on top of each other to protect your database. - -For example, projects using a database likely employ several layers of security defenses: - -- Password or mutual TLS authentication. -- Firewall and IP allowlists to only allow database access from known hosts. -- Isolating database access from public internet with private networking and VPCs. -- Principle of least privilege whereby each entity/component (person, service account) has the minimum necessary access rights to perform its purpose. -- TLS (Transport Layer Security) ensures that all traffic is encrypted. - -By layering defenses, you protect your database from different attack vectors and minimize the risk of a breach. - -## Database security in the Prisma Data Platform - -The [Prisma Data Platform](https://www.prisma.io/data-platform) comes with tools to build and collaborate on database-driven applications. The Data Browser, Query Console, and the Data Proxy all rely on access to your database. - -Previously, the Data Platform relied solely on authentication as the security layer for your database. When creating a project in the Prisma Data Platform, you pass a database connection string that includes the authentication details (username and password) that the Platform uses to connect to your database. - -After gathering feedback from Prisma users, we learned that many could not adopt the Prisma Data Platform due to security constraints. - -Because the IPs from which the Data Platform connects to your database are dynamic by default and can change, you would have to open up your database to the public internet – a big no-no in most situations. - -Moreover, cloud providers like Google Cloud have strict security defaults that prevent public internet access to Cloud SQL databases without configuring authorized networks from which the database can be accessed. - -## Improving security with static egress IPs - -At Prisma, we take security seriously, which is why we are excited to launch Early Access support for static egress IPs. - -Most cloud database providers provide a way to restrict database access to a set of known origin public IP addresses. - -With static egress IPs enabled, you get a list of IPs that the Prisma Data Platform exclusively uses to connect to your database. It allows you to connect the Prisma Data Platform to databases that prevent public internet access by adding the static egress IPs to the database firewall's allow list. - -Static egress IPs work seamlessly across all Data Platform features: data browser, query console, and data proxy. - -You can enable static egress IPs for new and existing projects can use their databases with the Prisma Data Platform with static egress IPs while keeping databases protected from the public internet. - -> **Note:** IP addresses are specific to the region where the data proxy is configured. Changing the region of the Data Proxy will change the IPs for egress and will thus require a change of the IP allow list on your provider - - -### Enabling static egress IPs - -You can enable static egress IPs per environment in both new and existing projects. - -
-[Try the Prisma Data Platform](https://cloud.prisma.io/login) - -#### For new projects - -You will be prompted with an option to enable static IPs when configuring an environment in the project creation flow: - - - -#### For an existing environment - -To enable static egress IPs, choose a project in the Data Platform, go to the environment settings, and enable static IPs: - - - -
-[Learn more about the feature in the docs](https://www.prisma.io/docs/data-platform/static-ips) - -## What's next - -Static egress IPs in the Prisma Data Platform should help more users adopt the Prisma Data Platform while keeping their database secure. - -However, our efforts do not end there; we are actively investigating additional authentication mechanisms like self-managed TLS certificates for database connections. - -To keep up to date with the latest changes in the Prisma Data Platform, check out the [**changelog**](https://pris.ly/changelog). - -To get a glimpse into our current priorities and upcoming features, check out our [**public roadmap**](https://pris.ly/roadmap). - -## Try the static egress IPs and share your feedback - -> ⚠️ **Outdated Information** -> -> Please be aware that the information provided in this blog post is outdated. Since its publication, there have been updates to the Prisma Data Platform, including the discontinuation of Prisma Data Proxy. If you require connection pooling and global caching, we recommend exploring [**Prisma Accelerate**](https://www.prisma.io/data-platform/accelerate). For the latest details on our platform's products and features, please visit our [**website**](https://www.prisma.io/) and consult our [**changelog**](https://www.prisma.io/changelog). - -Since the [static egress IPs](https://cloud.prisma.io/login) is in [Early Access](https://www.prisma.io/docs/data-platform/about/releases#early-access), we don't recommend using it in production. - -📫 Help us improve the Prisma Data Platform by sharing feedback, issues, bugs, and questions with us using the green Intercom button on the bottom right corner of the Prisma Data Platform. diff --git a/apps/blog/content/blog/database-access-in-react-server-components-r2xgk9aztgdf/index.mdx b/apps/blog/content/blog/database-access-in-react-server-components-r2xgk9aztgdf/index.mdx deleted file mode 100644 index dacd7d1050..0000000000 --- a/apps/blog/content/blog/database-access-in-react-server-components-r2xgk9aztgdf/index.mdx +++ /dev/null @@ -1,493 +0,0 @@ ---- -title: "Database Access in React Server Components" -slug: "database-access-in-react-server-components-r2xgk9aztgdf" -date: "2021-02-24" -authors: - - "Mahmoud Abdelwahab" -metaTitle: "Send Database Queries in a React App Using Server Components" -metaDescription: "Learn how to query your database directly from React Server Components with Prisma, and why type-safe database access fits the server-rendered React model." -metaImagePath: "/database-access-in-react-server-components-r2xgk9aztgdf/imgs/meta-8befd7df92cc32135332ef9c28b41e076e2c8998-1251x630.png" -heroImagePath: "/database-access-in-react-server-components-r2xgk9aztgdf/imgs/hero-f388984fa1fe34f5d79d884f6f599c22a4107fa1-846x426.png" -heroImageAlt: "Database Access in React Server Components" -tags: - - "education" ---- - -React Server Components were previewed near the end of 2020. In this article, we'll explore what they are, the problems they solve, and how we can use them for direct database access. - -> **Update (August 15th, 2023)**: Since this article has been published, the `react-prisma` package has been deprecated. You can query your database directly from a React Server Component using Prisma Client without the `react-prisma` package. -> -> At the time of writing, February 24th 2021, React Server Components are still being researched and far from being production-ready. The React core Team [announced this feature](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html) to get initial feedback from the React community and in a spirit of transparency. - -## TL;DR - -- React Server Components allow you to render components on the server and send them as data to your frontend. This data can be merged with the React client tree without losing state. -- You also ship significantly less JavaScript when using Server Components. -- Since Server Components live on the server we're going to see how to send queries to the database, skipping the API layer altogether. We'll do that using Prisma, an open-source ORM that provides an intuitive, type-safe API with clear workflows. - -Here's the [RFC](https://github.com/reactjs/rfcs/pull/188) and the full announcement talk: - -
-
- {notes.map(note => (
-
-
-
-
- ))}
-
- {searchText ? `Couldn't find any notes titled "${searchText}".` : 'No notes created yet!'}{' '}
-
- )
-}
-```
-You'll notice that we don't need to `await` prisma here, that's because React uses a different mechanism that retries rendering when the data is cached. So it's still asynchronous, but you don't need to use async/await.
-
-## Conclusion
-
-You've now learned how to build an Express API using Prisma, consume it on the frontend and also use it in your React Server Components.
-
-This new pattern is exciting because now we can have a good, fast user experience while having easy to maintain code. Because now, we have data fetching at the component-level.
-
-We also end up having a faster user experience since less JavaScript is shipped to the browser.
-
-Finally, React's virtual DOM now spans the entire application instead of just the client.
-
-There are still many questions to be answered, and there are [drawbacks](https://github.com/josephsavona/rfcs/blob/server-components/text/0000-server-components.md#drawbacks), but it's exciting to see how the future of building Web apps using React might look like.
diff --git a/apps/blog/content/blog/database-access-on-the-edge-8F0t1s1BqOJE/index.mdx b/apps/blog/content/blog/database-access-on-the-edge-8F0t1s1BqOJE/index.mdx
deleted file mode 100644
index c3c4bafd6b..0000000000
--- a/apps/blog/content/blog/database-access-on-the-edge-8F0t1s1BqOJE/index.mdx
+++ /dev/null
@@ -1,321 +0,0 @@
----
-title: "Database access on the Edge with Next.js, Vercel & Prisma Accelerate"
-slug: "database-access-on-the-edge-8F0t1s1BqOJE"
-date: "2022-07-29"
-authors:
- - "Alex Ruheni"
-metaTitle: "Database access on the Edge with Next.js, Vercel & Prisma Accelerate"
-metaDescription: "Learn how you can query databases in Edge environments using Prisma and the Prisma Accelerate."
-metaImagePath: "/database-access-on-the-edge-8F0t1s1BqOJE/imgs/41eccd0c9a716384d9635415e90e434abfda6c58-1692x952.png"
-heroImagePath: "/database-access-on-the-edge-8F0t1s1BqOJE/imgs/1fc839965595779722b9fca14e1e517d94aa9726-844x474.svg"
-heroImageAlt: "Database access on the Edge with Next.js, Vercel & Prisma Accelerate"
-tags:
- - "education"
----
-
-The Edge enables application deployment across the globe. This article explores what Edge environments are, the challenges that arise when working in Edge environments and how to access databases on the Edge using Prisma Accelerate.
-
-
-## What is the Edge?
-
-Traditionally, applications would be deployed to a single region or data center, in either a virtual machine, Platform as a Service (PaaS) like Heroku, or Functions as a Service (FaaS) like AWS Lambda. While this deployment pattern worked fine, the problem this created was that a user located on the other side of the globe would experience slightly longer response times.
-
-We — developers — attempted to fix this with the JAMstack architecture, where static assets, such as HTML, CSS, JavaScript, and images, would be distributed across the globe in a Content Delivery Network (CDN). This improved loading times — the [Time to First Byte (TTFB)](https://web.dev/ttfb/) — of web applications, but if the application required dynamic data, e.g., from an API or database, the application needed to make another request for the data. This also worked fine. However, the side effect was that we also distributed loading spinners across the web.
-
-{/*  */}
-
-We took this a step further and introduced Edge computing such as [Vercel's Edge Network](https://vercel.com/features/edge-functions). The Edge is a form of _serverless compute_ that allows running server-side code geographically close to its end users.
-
-{/* ![[Source] Cloudflare workers](https://user-images.githubusercontent.com/33921841/180796884-3636b4f4-c065-4a85-8682-f7ee7114e2f6.png) */}
-
-Edge computing works similarly to serverless functions, without the cold starts because they have a smaller runtime. This is great because web apps would perform better, but it comes at a cost: A smaller runtime on the Edge means that you don't have the exact same capabilities as you would have in regular Node.js runtime used in serverless functions.
-
-
-### Edge functions can easily exhaust database connections
-
-Edge functions are stateless, meaning they lack persistent state between requests. This architecture clashes with the stateful nature of traditional relational databases, where each request requires a new database connection.
-
-With every request to the application, a new database connection is established, adding substantial overhead to queries and potentially hindering application performance as it scales. Moreover, during traffic spikes, the database is at risk of running out of database connections, leading to downtimes.
-
-You can learn more about the challenges of database access in Edge environments, which is similar to serverless environments, in [this article](https://www.prisma.io/blog/overcoming-challenges-in-serverless-and-edge-environments-TQtONA0RVxuW).
-
-### Database access on the Edge with Prisma Accelerate
-
-[Prisma Accelerate](https://www.prisma.io/docs/accelerate) offers a connection pooler for your database, that reuses database connections and allows you to interact with your database over HTTP.
-
-The connection pool of Accelerate ensures optimal performance by efficiently reusing database connections for serverless and edge applications (i.e. applications using [Vercel Edge Functions](https://vercel.com/features/edge-functions) or [Cloudflare Workers](https://workers.cloudflare.com/)).
-
-In addition to providing connection pooling by default, Prisma Accelerate also offers a global edge cache. You can drastically improve the performance of your applications by opting-in and caching your query results in-line with your Prisma queries. You can learn more about caching with Accelerate [here](https://www.prisma.io/docs/accelerate/caching).
-
-### Do single-region databases and the Edge fit together?
-
-Edge computing is a fairly young, yet very promising technology that has the potential to drastically speed up applications in the future. The ecosystem around the Edge is still evolving and best practices for globally distributed applications are yet to be figured out.
-
-At Prisma, we are excited about the developments in the Edge ecosystem and want to help move it forward! However, connecting to a single-region database as shown in this article is probably not the best idea for real-world applications _today_.
-
-To reduce large roundtrips from edge functions to a single-region database, you can use a global cache, which allows you to store your data closer to your edge apps. Prisma Accelerate offers a [global cache](https://www.prisma.io/docs/accelerate/caching), which you can easily opt-in to drastically improve the performance of your edge apps. As a best practice, we still recommend to generally deploy your database as closely as possible to your API server to minimize latency in response times.
-
-While the architecture shown in this article might not cater to real-world use cases yet, we are excited about the possibilities that are opening up in this space and want to make sure Prisma can help solve the problems related to database access on the Edge in the future!
-
-Here's a video from Jeff Delaney, [Fireship](https://fireship.io/), on whether "edge" computing is faster.
-
-
-
- The strength of the ecosystem is a core component of Data DX. It is an essential consideration for developers when evaluating new tooling.
-
-
-
-
-
- I just want to fix bugs, build features, and ship. I don't want to have to deal with the complexity of getting access to data.
-
-
-
--[Watch the panel](https://www.youtube.com/watch?v=6_y0CUehlUA&t=385s) - -**Panelists** -- [Deepthi Sigireddi](https://twitter.com/ATechGirl), Engineering Lead for Vitess at **PlanetScale** -- [Glauber Costa](https://twitter.com/glcst), Founder/CEO at **Turso** -- [Peter Pistorius](https://twitter.com/appfactory), Founder at **Snaplet** -- [Tudor Golubenco](https://twitter.com/tudor_g), CTO at **Xata** -- [Søren Bramer Schmidt](https://twitter.com/sorenbs), CEO at **Prisma** - -Moderated by [Petra Donka](https://twitter.com/petradonka), Head of Developer Connections at **Prisma** - -## The future of building data-driven apps -The second segment focused on the evolution of developer experience in data-driven application development, with representatives from Grafbase, Tinybird, RedwoodJS and Prisma sharing diverse perspectives. - -### The crucial role of developer experience - -High-quality developer experience is fundamental to the future of application development. The panel specifically discussed reducing repetitive tasks, automating workflows, and integrating tools and platforms effectively. - -The consensus was that modern tools should significantly **reduce time to market**, enabling developers to concentrate on product development rather than infrastructure. - -
-
- Why does the front-end community get such excellent tooling while back-end developers struggle with outdated systems and tools?
-
-
-
--[Watch the panel](https://www.youtube.com/watch?v=6_y0CUehlUA&t=3448s) - -**Panelists** -- [Fredrik Björk](https://twitter.com/fbjork), CEO at **Grafbase** -- [Amy Dutton](https://twitter.com/selfteachme), Lead maintainer at **RedwoodJS** -- [Alasdair Brown](https://github.com/sdairs), Head of DevRel at **Tinybird** -- [Søren Bramer Schmidt](https://twitter.com/sorenbs), CEO at **Prisma** - -Moderated by [Petra Donka](https://twitter.com/petradonka), Head of Developer Connections at **Prisma** - - -## Shaping the future -The Discover Data DX event was essential in establishing Data DX as an emerging category. It highlighted the industry alignment on the need for a more intuitive, efficient, and developer-focused approach to application development. - -Prisma will spearhead more initiatives to grow Data DX, driving innovation and collaboration in the industry. Learn more and stay updated at [datadx.io](https://www.datadx.io). - diff --git a/apps/blog/content/blog/datadx-manifesto-ikgyqj170k8h/index.mdx b/apps/blog/content/blog/datadx-manifesto-ikgyqj170k8h/index.mdx deleted file mode 100644 index 6613508725..0000000000 --- a/apps/blog/content/blog/datadx-manifesto-ikgyqj170k8h/index.mdx +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: "Launching the Data DX Manifesto: Shaping a new paradigm in data-driven development" -slug: "datadx-manifesto-ikgyqj170k8h" -date: "2023-10-05" -authors: - - "Nitin Gupta" -metaTitle: "Data DX Manifesto: a new era in data-driven app development" -metaDescription: "Prisma introduces Data DX (Data Developer Experience) as a fresh approach for effortlessly building data-driven applications." -metaImagePath: "/datadx-manifesto-ikgyqj170k8h/imgs/meta-96de5fd29833ae651da6ecc88c021bb9d84eba1b-1266x711.png" -heroImagePath: "/datadx-manifesto-ikgyqj170k8h/imgs/hero-2e402be560690da1dd594236284a8efa71a8f82f-844x474.svg" -heroImageAlt: "Data DX" -tags: - - "announcement" ---- - -Prisma presents the [Data DX manifesto](https://datadx.io), a transformative approach to data-driven app development. More than a document, it is a call to action. The manifesto highlights the benefits of Data DX for developers and offers insights for innovative product creation. - -### Introducing the Data DX manifesto - -The development landscape is ever-evolving, and with it, the challenges associated with data management, delivery, and usage. Recognizing the pressing need for a simple yet effective approach that addresses these challenges, we [introduced the Data DX concept](https://www.prisma.io/blog/cloudflare-partnership-qerefgvwirjq) when we announced our partnership with Cloudflare. - -Today, we are following up on that announcement with the release of our complete thinking on the concept of the Data DX category in the form of the [Data DX Manifesto](https://datadx.io). - -The Data DX manifesto is a collaborative call to action, inviting developers and product creators to engage with this innovative philosophy. We wish for the community to start a dialogue and help guide and shape our thinking even further. - -The manifesto aims to: -- Outline benefits for developers who are building data-driven applications -- Identify and recommend focus areas for products that fall into this new category -- Act as a rallying cry to here - -### A new paradigm in data-driven development - -This manifesto isn't just a document; it's the inception of a new product category, extending an invitation to explore a fresh perspective on data-driven development. - -For developers, it's about gaining a seamless and efficient pathway to handle data in application development. For companies creating products, it's an opportunity to align with a pioneering approach, potentially leading to the development and marketing of products that embody the Data DX principles. - -With the advent of Data DX, we aim to shed light on a prevalent challenge and propose a collective stride towards a solution. The manifesto serves as a starting point for a comprehensive discourse. - - -### Embark on the Data DX Journey - -Whether you are a developer eager to adopt refined data handling methods or a creator aspiring to build products aligned with Data DX, a realm of possibilities awaits you at the [Manifesto website.](https://datadx.io) - diff --git a/apps/blog/content/blog/datamodel-v11-lrzqy1f56c90/index.mdx b/apps/blog/content/blog/datamodel-v11-lrzqy1f56c90/index.mdx deleted file mode 100644 index 4fdacd5128..0000000000 --- a/apps/blog/content/blog/datamodel-v11-lrzqy1f56c90/index.mdx +++ /dev/null @@ -1,592 +0,0 @@ ---- -title: "New Datamodel Syntax: More Schema Control & Simpler Migration" -slug: "datamodel-v11-lrzqy1f56c90" -date: "2019-04-17" -authors: - - "Nikolas Burk" -metaTitle: "New Datamodel Syntax: Improved Schema Control & Simpler Migrations" -metaDescription: "Prisma's new datamodel syntax gave developers more control over database schemas while simplifying migrations and reducing opinionated defaults." -metaImagePath: "/datamodel-v11-lrzqy1f56c90/imgs/hero-99f1530d6ebe62110fd2839ba4f0185795ee5db4-1200x630.png" -heroImagePath: "/datamodel-v11-lrzqy1f56c90/imgs/hero-99f1530d6ebe62110fd2839ba4f0185795ee5db4-1200x630.png" -heroImageAlt: "New Datamodel Syntax: More Schema Control & Simpler Migration" ---- - -Prisma's latest release features an improved datamodel syntax. It removes many of the opinionated decisions Prisma used to make about the database layout and enables more control for developers. - -> ⚠️ **This article is outdated** as it relates to [Prisma 1](https://github.com/prisma/prisma1) which is now [deprecated](https://github.com/prisma/prisma1/issues/5208). To learn more about the most recent version of Prisma, read the [documentation](https://www.prisma.io/docs). ⚠️ - -Over the last months, we have worked with the community to define an improved datamodel [specification](https://github.com/prisma/prisma/issues/3408) for Prisma. This new version is called datamodel v1.1 and is available in today's stable release. Check out the docs [here](https://v1.prisma.io/docs/1.31/releases-and-maintenance/features-in-preview/datamodel-v11-b6a7/). - -> As of today, Prisma's public [Demo servers](https://v1.prisma.io/docs/1.31/prisma-server/demo-servers-prisma-cloud-jfr3) will be using the new datamodel syntax. Check out the [**docs**](https://v1.prisma.io/docs/1.31/releases-and-maintenance/features-in-preview/datamodel-v11-b6a7/#upgrading-to-datamodel-v11) or this [**tutorial video**](https://www.youtube.com/watch?v=48m1Gnmu19Q) to learn how to upgrade your existing projects. - ---- - -## A more flexible approach to data modelling - -A [datamodel](https://v1.prisma.io/docs/1.31/datamodel-and-migrations/datamodel-MYSQL-knul) is the foundation for every Prisma project. It serves as the foundation for the schema of the underlying database. - -The current datamodel is opinionated about the database layout, e.g. for relations, naming of tables/columns or system fields. The new datamodel syntax lifts many limitations so that developers have more control over their schema. - -### More control over your database layout - -Here are a few things enabled by the new datamodel syntax: - -- Specify whether a relation should use a relation table or foreign keys -- Model/field names can differ from the names of the underlying tables/columns -- Use any field as `id` field and "bring your own ID" -- Use any field as `createdAt` or `updatedAt` fields - -### Simpler migrations & improved introspection - -In previous Prisma versions, developers had to decide whether Prisma should perform database migrations for them, by setting the `migrations` flag in [`PRISMA_CONFIG`](https://v1.prisma.io/docs/1.31/prisma-server/deployment-environments/docker-rty1#prisma_config-reference). - -The `migrations` flag has been removed in the latest Prisma version, meaning developers can now at all times _either_ migrate the database manually _or_ use Prisma for the migration. - -We have also invested a lot into the introspection of existing databases, enabling smooth workflows for developers that are using Prisma with a legacy database or need to perform manual migrations at some point. - ---- - -## What's new in the improved datamodel syntax? - -### Map model and field names to the underlying tables and columns - -With the old datamodel syntax, tables and columns are always named _exactly_ after the models and fields in your datamodel. Using the new `@db` directive, you can control what tables and columns should be called in the underlying database: - - - -```graphql -type User @db(name: "user") { - id: ID! @id - name: String! @db(name: "full_name") -} -``` -```ts -CREATE TABLE "default$default"."user" ( - "id" varchar(25) NOT NULL, - "full_name" text NOT NULL, - PRIMARY KEY ("id") -); -``` - - -In this case, the underlying table will be called `user` and the column `full_name`. - -### Decide how a relation is represented in the database schema - -The old datamodel is opinionated about relations in the database schema: they're _always_ represented as relation tables. - -On the one hand, this makes it possible to easily migrate any existing relation to a _many-to-many_-relation without extra work. However, there might be a performance penalty to pay for this flexibility because relation tables are often more expensive to query. - -> While 1:1 and 1:n relations can now be represented via foreign keys, m:n relations will keep being represented as relation tables. - -With the new datamodel, developers can take full control over expressing a relation in the underlying database. There are two options: - -- Represent a relation via inline references (i.e. _foreign keys_) -- Represent a relation via a relation table - -Here is an example with two relations (one is _inline_, the other uses a _relation table_): - - - -```graphql -type User { - id: ID! @id - profile: Profile! @relation(link: INLINE) - posts: [Post!]! @relation(link: TABLE) -} - -type Profile { - id: ID! @id - user: User! -} - -type Post { - id: ID! @id - author: User! -} -``` -```ts -CREATE TABLE "default$default"."User" ( - "id" varchar(25) NOT NULL, - "profile" varchar(25), - PRIMARY KEY ("id") -); - -CREATE TABLE "default$default"."Profile" ( - "id" varchar(25) NOT NULL, - PRIMARY KEY ("id") -); - -CREATE TABLE "default$default"."Post" ( - "id" varchar(25) NOT NULL, - PRIMARY KEY ("id") -); - -CREATE TABLE "default$default"."_PostToUser" ( - "A" varchar(25) NOT NULL, - "B" varchar(25) NOT NULL -); -``` - - -In the case of the inline relation, the placement of the `@relation(link: INLINE)` directive determines on which end of the relation the foreign key is being stored, in this example it's stored in the `User` table. - -### Use any field as `id`, `createdAt` or `updatedAt` - -With the old datamodel, developers were required to use reserved fields if they wanted to automatically generate unique IDs or track when a record was created/last updated. - -With the new `@id`, `@createdAt` and `@updatedAt` directives, it is now possible to add this functionality to any field of a model: - - - -```graphql -type User { - myID: ID! @id - myCreatedAt: DateTime! @createdAt - myUpdatedAt: DateTime! @updatedAt -} -``` -```ts -CREATE TABLE "test$devasdas"."User" ( - "myID" varchar(25) NOT NULL, - "myCreatedAt" timestamp(3) NOT NULL, - "myUpdatedAt" timestamp(3) NOT NULL, - PRIMARY KEY ("myID") -); -``` - - -### More flexible IDs - -The current datamodel _always_ uses [CUIDs](https://github.com/ericelliott/cuid) to generate and store globally unique IDs for database records. The datamodel v1.1 now makes it possible to maintain custom IDs as well as to use other ID types (e.g. integers, sequences, or UUIDs). - ---- - -## Getting started with the new datamodel syntax - -We prepared two short tutorials for you to explore the new datamodel: - -- Option A: [**Upgrade an old Prisma project**](#option-a-upgrade-from-an-older-prisma-version) to the new datamodel syntax -- Option B: [**Get started from scratch**](#option-b-starting-from-scratch) with the new datamodel syntax - -For more extensive tutorials and instructions for getting started with an existing database, visit the [docs](https://v1.prisma.io/docs/1.31/releases-and-maintenance/features-in-preview/datamodel-v11-b6a7/). - -### Prerequisite: Install the latest Prisma CLI - -To install the latest version of the Prisma CLI, run: - - - -```shell -npm install -g prisma -``` - - -> When running Prisma with Docker, you need to upgrade its Docker image to `1.31`. - -### Option A: Upgrade from an older Prisma version - -When upgrading your existing Prisma projects, you can use simply run `prisma introspect` to generate the datamodel with the new syntax. The exact process is described with an example in the following sections and this video: - -
Hello World!
- ) -} - -export default App -``` -## Set up TailwindCSS - -Your application will use [TailwindCSS](https://tailwindcss.com/) to make designing and styling your components easy. To get started, you will first need a few new dependencies: - -```sh -npm install -D tailwindcss postcss autoprefixer -``` -The command above will install all of the pieces TailwindCSS requires to work in your project, including the Tailwind CLI. Initialize TailwindCSS in your project using the newly installed CLI: - -```sh -npx tailwindcss init -p -``` -This command created two files in your project: - -- `tailwind.config.cjs`: The configuration file for TailwindCSS -- `postcss.config.cjs`: The configuration file for PostCSS - -Within `tailwind.config.cjs`, you will see a `content` key. This is where you will define which files in your project TailwindCSS should be aware of when scanning through your code and deciding which of its classes and utilities you are using. This is how TailwindCSS determines what needs to be bundled into its built and minified output. - -Add the following value to the `content` key's array to tell TailwindCSS to look at any `.tsx` file within the `src` folder: - -```js -diff -// tailwind.config.cjs - -module.exports = { - content: [ -+ "./src/**/*.tsx" - ], - theme: { - extend: {}, - }, - plugins: [], -}; -``` -Finally, within `src/index.css` you will need to import the TailwindCSS utilities, which are required to use TailwindCSS in your project. Replace that entire file's contents with the following: - -```css -// src/index.css - -@tailwind base; -@tailwind components; -@tailwind utilities; -``` -TailwindCSS is now configured and ready to go! Replace the existing `` tag in `src/App.tsx` with this JSX to test that the TailwindCSS classes are working:
-
-```tsx
-// src/App.tsx
-
-// ...
-
- Hello World!
-
-// ...
-```
-If your webpage looks like this, congrats! You've successfully set up TailwindCSS!
-
-
-
-> **Note**: If not, try restarting your development server and ensure the steps above were followed correctly.
-
-## Define and mock your data
-
-Now that TailwindCSS is set up, you are almost ready to begin building the components to display your data. There is one more thing you will need to do first: define and mock your data.
-
-In order to ensure your application is type-safe, you will need to create a set of TypeScript types that define your two data models: users and messages. After building those types, you will mock a set of test data.
-
-First, create a new file in the `src` directory named `types.ts`:
-
-```sh
-touch src/types.ts
-```
-This is the file where you will store all of the types this application needs. Within that file, add and export a new `type` named `Message` with a `string` field named `body`:
-
-```ts
-// src/types.ts
-
-export type Message = {
- body: string
-}
-```
-This type describes what will be available within a `Message` object. There is only one key, however in a real-world application this may contain dozens or more field definitions.
-
-Next, add and export another type named `User` with a `name` field of the `string` type and a `messages` field that holds an array of `Message` objects:
-
-```ts
-// src/types.ts
-
-// ...
-
-export type User = {
- name: string
- messages: Message[]
-}
-```
-> **Note**: In the next sections of this series, you will replace these manually written types with automatically generated ones that contain up-to-date representations of your API's exposed data model.
-
-Now that your data has been "described", head over to `src/App.tsx`. Here you will mock some data to play with in your application.
-
-First, import the new `User` type into `src/App.tsx`:
-
-```tsx
-// src/App.tsx
-
-import { User } from './types'
-
-// ...
-```
-Next, within the `App` function in that file, create a new variable named `users` that contains an array of `User` objects with a single user entry who has a couple of messages associated with it:
-
-```tsx
-// src/App.tsx
-
-// ...
-
-function App() {
- const users: User[] = [{
- name: 'Prisma Fan',
- messages: [{
- body: 'Prisma rocks!!'
- }, {
- body: 'Did I mention I love Prisma?'
- }]
- }]
-
- // ...
-}
-
-export default Apps
-```
-In the snippet above, you defined a single user who has two associated messages. This is all the data you will need to build the UI components for this application.
-
-## Display a list of users
-
-The first piece of the UI you will build is the component that displays a user. Create a new folder inside of the `src` directory named `components`:
-
-```sh
-mkdir src/components
-```
-Inside of that folder, create a file named `UserDisplay.tsx`:
-
-```sh
-touch src/components/UserDisplay.tsx
-```
-This file wil contain the user display component. To start that component off create a function named `UserDisplay` that returns a simple `
Hello World!
-` tag for now. Then export that function: - -```tsx -// src/components/UserDisplay.tsx - -function UserDisplay() { - return
User Component
-} - -export default UserDisplay -``` -This will serve as the skeleton for your component. The goal here is to allow this component to take in a `user` parameter and display that user's data inside of the component. - -To accomplish this, first import your `User` type at the very top of `src/components/UserDisplay.tsx`: - -```tsx -// src/components/UserDisplay.tsx - -import { User } from '../types' - -// ... -``` -You will use this type to describe what a `user` property in your `UserDisplay` function should contain. - -Add a new `type` to this file named `Props` with a single `user` field of the `User` type. Use that type to describe your function's arguments _(or "props")_: - -```tsx -// src/components/UserDisplay.tsx - -import { User } from '../types' - -type Props = { - user: User -} - -function UserDisplay({ user }: Props) { - returnUser Component
-} - -export default UserDisplay -``` -> **Note**: The `user` key is being [destructured](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) within the function arguments to allow easy access to its values. - -The `user` property allows you to provide your component an object of type `User`. Each user in this application will be displayed within a rectangle that contains the user's name. - -Replace the existing `` tag with the following JSX to display a user's name with some nice TailwindCSS styles: - -```tsx -// src/components/UserDisplay.tsx - -// ... -function UserDisplay({ user }: Props) { - return
-
-}
-// ...
-```
-This component is now ready to display a user's details, however you are not yet rendering it anywhere.
-
-Head over to `src/App.tsx` and import your new component. Then, in place of the current `
-
- - {user.name} -
-` tag, render the component for each user in your `users` array:
-
-```tsx
-// src/App.tsx
-
-import { User } from './types'
-import UserDisplay from './components/UserDisplay'
-
-function App() {
- const users: User[] = [/**/]
-
- return (
-
- {
- users.map((user, i) => )
- }
-
- )
-}
-
-export default App
-```
-If you head back to your browser you should see a nice box displaying your user's name! The only thing missing at this point is the user's messages.
-
-
-
-## Display each user's messages
-
-Now that you can display your users, you will display the users' associated messages. You will create a sort of "tree view" to display the messages in.
-
-Start off by creating a component to display an individual message. Create a new file in `src/components` named `MessageDisplay.tsx`:
-
-```sh
-touch src/components/MessageDisplay.tsx
-```
-Then, import the `Message` type from `src/types.ts` into the new file and create a `Props` type with two keys:
-
-- `message`: A `Message` object that holds the message details
-- `index`: A `number` value that holds the index of the current message from the parent's list of messages
-
-The result should look like the snippet below:
-
-```tsx
-// src/components/MessageDisplay.tsx
-
-import { Message } from '../types'
-
-type Props = {
- message: Message
- index: number
-}
-```
-With those pieces in place, you are ready to build the component function. The code below uses the `Props` type you wrote to describe the function arguments, pulls out the `message` and `index` values using destructuring, renders the message in a styled container, and finally exports the component:
-
-```tsx
-// src/components/MessageDisplay.tsx
-
-// ...
-
-function MessageDisplay({ message, index }: Props) {
- return
-
- {message.body}
-
-
-}
-
-export default MessageDisplay
-```
-Now it's time to put that component to use! In `src/components/UserDisplay.tsx` import the `MessageDisplay` component and render one for each element in the `user.messages` array:
-
-```tsx
-diff
-// src/components/UserDisplay.tsx
-
-+import MessageDisplay from './MessageDisplay'
-
-// ...
-
-function UserDisplay({ user }: Props) {
- return
-
-
- {user.name}
-
-
-+
-+ {user.messages.map((message, i) =>
- {message.body}
-
-
-}
-
-export default MessageDisplay
-```
-Back over in your browser, you will now see branches for each message! Hover over a message to highlight the branch ✨
-
-
-
-## Summary & What's next
-
-In this article, you built the frontend piece of your fully type-safe application. Along the way, you:
-
-- Set up a React project
-- Set up TailwindCSS
-- Modeled and mocked out your data
-- Built the UI components for your application
-
-At this point, the data and types in your application are static and manually built. In future sections of this series you will set up dynamic type definitions using code generation and use dynamic data from a database.
-
-In the next article, you will begin to build your API, set up your database, and initialize Prisma in your project.
diff --git a/apps/blog/content/blog/e2e-type-safety-graphql-react-2-j9mEyHY0Ej/index.mdx b/apps/blog/content/blog/e2e-type-safety-graphql-react-2-j9mEyHY0Ej/index.mdx
deleted file mode 100644
index 021c529471..0000000000
--- a/apps/blog/content/blog/e2e-type-safety-graphql-react-2-j9mEyHY0Ej/index.mdx
+++ /dev/null
@@ -1,421 +0,0 @@
----
-title: "End-To-End Type-Safety with GraphQL, Prisma & React: API Prep"
-slug: "e2e-type-safety-graphql-react-2-j9mEyHY0Ej"
-date: "2022-08-30"
-authors:
- - "Sabin Adams"
-metaTitle: "End-To-End Type-Safety with GraphQL, Prisma & React: API Prep"
-metaDescription: "Learn how to build a fully type-safe application with GraphQL, Prisma, and React. This article walks you through setting up a TypeScript project, a PostgreSQL database, and Prisma."
-metaImagePath: "/e2e-type-safety-graphql-react-2-j9mEyHY0Ej/imgs/meta-06962f83ac8be93c511d0ef6cbc29e2cff49e387-1269x715.png"
-heroImagePath: "/e2e-type-safety-graphql-react-2-j9mEyHY0Ej/imgs/hero-838c88ca3817165045cc051d8845880e5a313baf-844x474.svg"
-heroImageAlt: "hero image prisma"
-series: e2e-type-safety-graphql-react
-seriesIndex: 2
-tags:
- - "education"
----
-
-
- 10 min read
-
-
- In this series you are learning how to implement end-to-end type safety using React, GraphQL, Prisma, and some other helpful tools that tie those three together.
-
-## Table Of Contents
-
-- [Introduction](#introduction)
- - [Technologies you will use](#technologies-you-will-use)
- - [Assumed knowledge](#assumed-knowledge)
- - [Development environment](#development-environment)
-- [Create a TypeScript project](#create-a-typescript-project)
- - [Install the basic packages](#install-the-basic-packages)
- - [Set up TypeScript](#set-up-typescript)
- - [Add a development script](#add-a-development-script)
-- [Set up the database](#set-up-the-database)
-- [Set up Prisma](#set-up-prisma)
- - [Initialize Prisma](#initialize-prisma)
- - [Set the environment variable](#set-the-environment-variable)
- - [Model your data](#model-your-data)
- - [Perform the first migration](#perform-the-first-migration)
- - [Seed the database](#seed-the-database-)
-- [Summary & What's next](#summary--whats-next)
-
-
-
-If you missed the [first part](/e2e-type-safety-graphql-react-1-I2GxIfxkSZ) of this series, here is a quick overview of the technologies you will be using in this application, as well as a few prerequisites.
-
-### Technologies you will use
-
-These are the main tools you will be using throughout this series:
-
-- [Prisma](https://www.prisma.io/) as the Object-Relational Mapper (ORM)
-- [PostgreSQL](https://www.postgresql.org/) as the database
-- [Railway](https://www.sqlite.org/index.html) to host your database
-- [TypeScript](https://www.typescriptlang.org/) as the programming language
-- [GraphQL Yoga](https://www.graphql-yoga.com/) as the GraphQL server
-- [Pothos](https://pothos-graphql.dev) as the code-first GraphQL schema builder
-- [Vite](https://vitejs.dev/) to manage and scaffold your frontend project
-- [React](https://reactjs.org/) as the frontend JavaScript library
-- [GraphQL Codegen](https://www.graphql-code-generator.com/) to generate types for the frontend based on the GraphQL schema
-- [TailwindCSS](https://tailwindcss.com/) for styling the application
-- [Render](https://render.com/) to deploy your API and React Application
-
-### Assumed knowledge
-
-While this series will attempt to cover everything in detail from a beginner's standpoint, the following would be helpful:
-
-- Basic knowledge of JavaScript or TypeScript
-- Basic knowledge of GraphQL
-- Basic knowledge of React
-
-### Development environment
-
-To follow along with the examples provided, you will be expected to have:
-
-- [Node.js](https://nodejs.org) installed.
-- The [Prisma VSCode Extension](https://marketplace.visualstudio.com/items?itemName=Prisma.prisma) installed. _(optional)_
-
-
-
-
-## Create a TypeScript project
-
-To kick things off, create a new folder in your working directory that will contain your GraphQL server's code wherever you would like:
-
-```shell
-mkdir graphql-server # Example folder
-```
-This project will use [npm](https://www.npmjs.com/), a package manager for Node.js, to manage and install new packages. Navigate into your new folder and initialize npm using the following commands:
-
-```shell
-cd graphql-server
-npm init -y
-```
-### Install the basic packages
-
-While building this API, you will install various packages that will help in the development of your application. For now, install the following development packages:
-
-- `ts-node-dev`: Allows you to execute TypeScript code with live-reload on file changes
-- `typescript`: The TypeScript package that allows you to provide typings to your JavaScript applications
-- `@types/node`: TypeScript type definitions for Node.js
-
-```shell
-npm i -D ts-node-dev typescript @types/node
-```
-> **Note**: These dependencies were installed as development dependencies because they are only needed during development. None of them are part of the production deployment.
-
-### Set up TypeScript
-
-With TypeScript installed in your project, you can now initialize the TypeScript configuration file using the `tsc` command-line interface tool _(CLI)_:
-
-```shell
-npx tsc --init
-```
-The above command will create a new file named `tsconfig.json` at the root of your project and comes with a default set of configurations for how to compile and handle your TypeScript code.
-For the purposes of this series, you will leave the default settings.
-
-Create a new folder named `src` and within that folder a new file named `index.ts`:
-
-```shell
-mkdir src
-touch src/index.ts
-```
-This will be the entry point to your TypeScript code. Within that file, add a simple `console.log`:
-
-```typescript
-// src/index.ts
-
-console.log('Hey there! 👋');
-```
-### Add a development script
-
-In order to run your code, you will use `ts-node-dev`, which will compile and run your TypeScript code and watch for file changes.
-When a file is changed in your application, it will re-compile and re-run your code.
-
-Within `package.json`, in the `"scripts"` section, add a new script named `"dev"` that uses `ts-node-dev` to run your entry file:
-
-```json
-// package.json
-
-// ...
-"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1",
- "dev": "ts-node-dev src/index.ts"
-},
-// ...
-```
-You can now use the following command to run your code:
-
-```shell
-npm run dev
-```
-
-
-## Set up the database
-
-The next piece you will set up is the database. You will be using a PostgreSQL database for this application. There are many different ways to host and work with a
-PostgreSQL database, however, one of the simplest ways is to deploy your database using [Railway](https://railway.app/).
-
-Head over to [https://railway.app](https://railway.app) and, if you don't already have one, create an account.
-
-After creating an account and logging in, you should see a page like this:
-
-
-
-Hit the **New Project** button, or simply click the **Create a New Project** area.
-
-You will be presented with a search box and a few common options. Select the **Provision PostgreSQL** option.
-
-
-
-The option selected above creates a new PostgreSQL database and deploys it. Once the server is ready, you should see your provisioned database on the screen. Click the **PostgreSQL** instance.
-
-
-
-That will open up a menu with a few different tabs. On the **Connect** tab, you will find your database's connection string. Take note of where to find this string as you will need them in just a little while.
-
-
-
-## Set up Prisma
-
-Next you will set up Prisma. Your GraphQL server will use Prisma Client to query your PostgreSQL database.
-
-To set up Prisma, you first need to install Prisma CLI as a development dependency:
-
-```shell
-npm i -D prisma
-```
-### Initialize Prisma
-
-With Prisma CLI installed, you will have access to a set of useful tools and commands provided by Prisma. The command you will use here is called `init`, and will initialize Prisma in your project:
-
-```shell
-npx prisma init
-```
-This command will create a new `prisma` folder within your project. Inside this folder you will find a file, `schema.prisma`, which contains the start of a Prisma schema.
-
-That file uses the Prisma Schema Language _(PSL)_ and is where you will define your database's tables and fields. It currently looks as follows:
-
-```prisma
-// prisma/schema.prisma
-
-generator client {
- provider = "prisma-client-js"
-}
-
-datasource db {
- provider = "postgresql"
- url = env("DATABASE_URL")
-}
-```
-Within the `datasource` block, note the `url` field. This fields equals a value `env("DATABASE_URL")`. This value tells Prisma to look within the environment variables for a
-variable named `DATABASE_URL` to find the database's connection string.
-
-### Set the environment variable
-`prisma init` also created a `.env` file for you with a single variable named `DATABASE_URL`. This variable holds the connection string Prisma will use to connect to your database.
-
-Replace the current default contents of that variable with the connection string you retrieved via the Railway UI:
-
-```shell
-# .env
-
-# Example: postgresql://postgres:Pb98NuLZM22ptNuR4Erq@containers-us-west-63.railway.app:6049/railway
-DATABASE_URL=""
-```
-### Model your data
-
-The application you are building will need two different database tables: `User` and `Message`. Each "user" will be able to have many associated "messages".
-
-> **Note**: Think back to the previous article, where you set up manually written types that define the user and message models.
-
-Begin by modeling the `User` table. This table will need the following columns:
-
-- `id`: The unique ID of the database record
-- `name`: The name of the user
-- `createdAt`: A timestamp of when each user was created
-
-Add the following [`model`](https://www.prisma.io/docs/concepts/components/prisma-schema/data-model) block to your Prisma schema:
-
-```prisma
-// prisma/schema.prisma
-
-model User {
- id Int @id @default(autoincrement())
- name String
- createdAt DateTime @default(now())
-}
-```
-Next, add a `Message` model with the following fields:
-
-- `id`: The unique ID of the database record
-- `body`: The contents of the message
-- `createdAt`: A timestamp of when each message was created
-
-```prisma
-// prisma/schema.prisma
-
-model Message {
- id Int @id @default(autoincrement())
- body String
- createdAt DateTime @default(now())
-}
-```
-Finally, set up a one-to-many relation between the `User` and `Message` tables.
-
-```prisma
-diff
-// prisma/schema.prisma
-
-model User {
- id Int @id @default(autoincrement())
- name String
- createdAt DateTime @default(now())
-+ messages Message[]
-}
-
-model Message {
- id Int @id @default(autoincrement())
- body String
- createdAt DateTime @default(now())
-+ userId Int
-+ user User @relation(fields: [userId], references: [id])
-}
-```
-This data modeling step is an important one. What you have done here is set up the _source of truth_ for the shape of your data.
-You database's schema is now defined in one central place, and used to generate a type-safe API that interacts with that database.
-
-> **Note**: Think of the Prisma Schema as the glue between the shape of your database and the API that interacts with it.
-
-### Perform the first migration
-
-Your database schema is now modeled and you are ready to apply this schema to your database. You will use Prisma Migrate to manage your database migrations.
-
-Run the following command to create and apply a migration to your database:
-
-```shell
-npx prisma migrate dev --name init
-```
-The above command will create a new migration file named `init`, apply that migration to your database, and finally generate Prisma Client based off of that schema.
-
-
-If you head back over to the Railway UI, in the **Data** tab you should see your tables listed. If so, the migration worked and your database is ready to be put to work!
-
-
-
-### Seed the database 🌱
-
-That last thing to do before beginning to build out your GraphQL API is seed the database with some initial data for you to interact with.
-
-Within the `prisma` folder, create a new file named `seed.ts`:
-
-```shell
-touch prisma/seed.ts
-```
-Paste the following contents into that file:
-
-```typescript
-// prisma/seed.ts
-
-import { PrismaClient } from "@prisma/client";
-const prisma = new PrismaClient();
-
-async function main() {
- // Delete all `User` and `Message` records
- await prisma.message.deleteMany({});
- await prisma.user.deleteMany({});
- // (Re-)Create dummy `User` and `Message` records
- await prisma.user.create({
- data: {
- name: "Jack",
- messages: {
- create: [
- {
- body: "A Note for Jack",
- },
- {
- body: "Another note for Jack",
- },
- ],
- },
- },
- });
- await prisma.user.create({
- data: {
- name: "Ryan",
- messages: {
- create: [
- {
- body: "A Note for Ryan",
- },
- {
- body: "Another note for Ryan",
- },
- ],
- },
- },
- });
- await prisma.user.create({
- data: {
- name: "Adam",
- messages: {
- create: [
- {
- body: "A Note for Adam",
- },
- {
- body: "Another note for Adam",
- },
- ],
- },
- },
- });
-}
-
-main().then(() => {
- console.log("Data seeded...");
-});
-```
-This script clears out the database and then creates three users. Each user is given two messages associated with it.
-
-> **Note**: In the next article, you will dive deeper into the process writing a few queries using Prisma Client.
-
-Now that the seed script is available, head over to your `package.json` file and add the following key to the JSON object:
-
-```json
-// package.json
-
-// ...
-"prisma": {
- "seed": "ts-node-dev prisma/seed.ts"
-},
-// ...
-```
-Use the following command to run your seed script:
-
-```shell
-npx prisma db seed
-```
-After running the script, if you head back to the Railway UI and into the **Data** tab, you should be able to navigate through the newly added data.
-
-
-
-## Summary & What's next
-
-In this article, you set up all of the pieces necessary to build your GraphQL API. Along the way, you:
-
-- Set up a TypeScript project that will hold your GraphQL server
-- Spun up a PostgreSQL database using Railway
-- Initialized Prisma
-- Modeled the database schema
-- Seeded the database
-
-In the next article, you will build a type-safe GraphQL server using Prisma, GraphQL Yoga, and a code-first GraphQL schema builder called Pothos.
diff --git a/apps/blog/content/blog/e2e-type-safety-graphql-react-3-fbV2ZVIGWg/index.mdx b/apps/blog/content/blog/e2e-type-safety-graphql-react-3-fbV2ZVIGWg/index.mdx
deleted file mode 100644
index 6f364d2324..0000000000
--- a/apps/blog/content/blog/e2e-type-safety-graphql-react-3-fbV2ZVIGWg/index.mdx
+++ /dev/null
@@ -1,873 +0,0 @@
----
-title: "End-To-End Type-Safety with GraphQL, Prisma & React: GraphQL API"
-slug: "e2e-type-safety-graphql-react-3-fbV2ZVIGWg"
-date: "2022-08-29"
-authors:
- - "Sabin Adams"
-metaTitle: "End-To-End Type-Safety with GraphQL, Prisma & React: GraphQL API"
-metaDescription: "Learn how to build a fully type-safe application with GraphQL, Prisma, and React. This article walks you through building a type-safe GraphQL API"
-metaImagePath: "/e2e-type-safety-graphql-react-3-fbV2ZVIGWg/imgs/meta-c8b654f7165277e7cf2cfde5311381d601463251-1269x715.png"
-heroImagePath: "/e2e-type-safety-graphql-react-3-fbV2ZVIGWg/imgs/hero-78bb7b87f2bf7e691114b2768df5ddfe12e00934-844x474.svg"
-heroImageAlt: "hero image prisma"
-series: e2e-type-safety-graphql-react
-seriesIndex: 3
-tags:
- - "education"
----
-
-
- 14 min read
-
-
- In this series you are learning how to implement end-to-end type safety using React, GraphQL, Prisma, and some other helpful tools that tie those three together.
-
-## Table Of Contents
-
-- [Introduction](#introduction)
-- [Start up a GraphQL server](#start-up-a-graphql-server)
-- [Set up the schema builder](#set-up-the-schema-builder)
-- [Define a `Date` scalar type](#define-a-date-scalar-type)
-- [Add the Pothos Prisma plugin](#add-the-pothos-prisma-plugin)
-- [Create a reusable instance of Prisma Client](#create-a-reusable-instance-of-prisma-client)
-- [Define your GraphQL types](#define-your-graphql-types)
-- [Implement your queries](#implement-your-queries)
-- [Apply the GraphQL schema](#apply-the-graphql-schema)
-- [Summary & What's next](#summary--whats-next)
-
-
-
-If you missed the [first part](/e2e-type-safety-graphql-react-1-I2GxIfxkSZ) of this series, here is a quick overview of the technologies you will be using in this application, as well as a few prerequisites.
-
-### Technologies you will use
-
-These are the main tools you will be using throughout this series:
-
-- [Prisma](https://www.prisma.io/) as the Object-Relational Mapper (ORM)
-- [PostgreSQL](https://www.postgresql.org/) as the database
-- [Railway](https://www.sqlite.org/index.html) to host your database
-- [TypeScript](https://www.typescriptlang.org/) as the programming language
-- [GraphQL Yoga](https://www.graphql-yoga.com/) as the GraphQL server
-- [Pothos](https://pothos-graphql.dev) as the code-first GraphQL schema builder
-- [Vite](https://vitejs.dev/) to manage and scaffold your frontend project
-- [React](https://reactjs.org/) as the frontend JavaScript library
-- [GraphQL Codegen](https://www.graphql-code-generator.com/) to generate types for the frontend based on the GraphQL schema
-- [TailwindCSS](https://tailwindcss.com/) for styling the application
-- [Render](https://render.com/) to deploy your API and React Application
-
-### Assumed knowledge
-
-While this series will attempt to cover everything in detail from a beginner's standpoint, the following would be helpful:
-
-- Basic knowledge of JavaScript or TypeScript
-- Basic knowledge of GraphQL
-- Basic knowledge of React
-
-### Development environment
-
-To follow along with the examples provided, you will be expected to have:
-
-- [Node.js](https://nodejs.org) installed.
-- The [Prisma VSCode Extension](https://marketplace.visualstudio.com/items?itemName=Prisma.prisma) installed. _(optional)_
-
-
-
-## Start up a GraphQL Server
-
-The very first thing you will need to build a GraphQL API is a running GraphQL server. In this application, you will use [GraphQL Yoga](https://www.graphql-yoga.com/) as your GraphQL server.
-
-Install the `@graphql-yoga/node` and `graphql` packages to get started:
-
-```shell
-npm install @graphql-yoga/node graphql
-```
-With those packages installed, you can now start up your own GraphQL server. Head over to `src/index.ts`. Replace the existing contents with the this snippet:
-
-```ts
-// src/index.ts
-
-// 1
-import { createServer } from "@graphql-yoga/node";
-// 2
-const port = Number(process.env.API_PORT) || 4000
-// 3
-const server = createServer({
- port
-});
-// 4
-server.start().then(() => {
- console.log(`🚀 GraphQL Server ready at http://localhost:${port}/graphql`);
-});
-```
-The code above does the following:
-
-1. Imports the `createServer` function from GraphQL Yoga
-2. Creates a variable to hold the API's port, defaulting to `4000` if one is not present in the environment
-3. Creates an instance of the GraphQL server
-3. Starts the server up on port `4000` and lets the console know it's up and running
-
-If you start up your server, you will have access to a running _(empty)_ GraphQL API:
-
-```shell
-npm run dev
-```
-
-
-> **Note**: The GraphQL server is up and running, however it is not usable because you have not yet defined any queries or mutations.
-
-## Set up the schema builder
-
-GraphQL uses a strongly typed schema to define how a user can interact with the API and what data should be returned. There are two different approaches to building a GraphQL schema: [code-first and SDL-first](https://www.prisma.io/blog/the-problems-of-schema-first-graphql-development-x1mn4cb0tyl3).
-
-- Code-first: Your application code defines and generates a GraphQL schema
-- SDL-first: You manually write the GraphQL schema
-
-In this application, you will take the code-first approach using a popular schema builder named [Pothos](https://pothos-graphql.dev).
-
-To get started with Pothos, you first need to install the core package:
-
-```shell
-npm i @pothos/core
-```
-Next, create an instance of the Pothos schema builder as a sharable module. Within the `src` folder, create a new file named `builder.ts` that will hold this module:
-
-```shell
-cd src
-touch builder.ts
-```
-For now, import the default export from the `@pothos/core` package and export an instance of it named `builder`:
-
-```ts
-// src/builder.ts
-
-import SchemaBuilder from "@pothos/core";
-export const builder = new SchemaBuilder({});
-```
-## Define a `Date` scalar type
-
-By default, GraphQL only supports a limited set of scalar data types:
-
-- Int
-- Float
-- String
-- Boolean
-- ID
-
-If you think back to your Prisma schema, however, you will remember there are a few fields defined that use the `DateTime` data type. To handle those within your GraphQL API, you will need to define a custom `Date` scalar type.
-
-Fortunately, pre-made custom scalar type definitions are available thanks to the open-source community. The one you will use is called [`graphql-scalars`](https://www.graphql-scalars.dev/):
-
-```shell
-npm i graphql-scalars
-```
-You will need to register a `Date` scalar with your schema builder to let it know how to handle dates. The schema builder takes in a [generic](https://www.typescriptlang.org/docs/handbook/2/generics.html) where you can specify various [configurations](https://pothos-graphql.dev/docs/api/schema-builder#schematypes).
-
-Make the following changes to register the `Data` scalar type:
-
-```ts
-// src/builder.ts
-
-import SchemaBuilder from "@pothos/core";
-// 1
-import { DateResolver } from "graphql-scalars";
-
-// 2
-export const builder = new SchemaBuilder<{
- Scalars: {
- Date: { Input: Date; Output: Date };
- };
-}>({});
-
-// 3
-builder.addScalarType("Date", DateResolver, {});
-```
-Here's what changed in the snippet above. You:
-
-1. Imported the `Date` scalar type's resolver which handles converting values to the proper date type within your API
-2. Registered a new scalar type called `"Date"` using the `SchemaBuilder`'s `Scalars` configuration and configured the JavaScript types to use when accessing and validating fields of this type
-3. Let the builder know how to handle the defined `Date` scalar type by providing the imported `DateResolver`
-
-Within your GraphQL object types and resolvers, can now use the `Date` scalar type.
-
-## Add the Pothos Prisma plugin
-
-The next thing you need to do is define your GraphQL object types. These define the objects and fields your API will expose via queries.
-
-Pothos has a fantastic [plugin](https://pothos-graphql.dev/docs/plugins/prisma) for Prisma that makes this process a lot smoother and provides type safety between your GraphQL types and the database schema.
-
-> **Note**: Pothos _can_ be used in a type-safe way with Prisma without using the plugin, however that process is very manual. See details [here](https://pothos-graphql.dev/docs/plugins/prisma).
-
-First, install the plugin:
-
-```shell
-npm i @pothos/plugin-prisma
-```
-This plugin provides a Prisma generator that generates the types Pothos requires. Add the generator to your Prisma schema in `prisma/schema.prisma`:
-
-```prisma
-diff
-// prisma/schema.prisma
-
-generator client {
- provider = "prisma-client-js"
-}
-
-+generator pothos {
-+ provider = "prisma-pothos-types"
-+}
-
-datasource db {
- provider = "postgresql"
- url = env("DATABASE_URL")
-}
-
-model User {
- id Int @id @default(autoincrement())
- name String
- createdAt DateTime @default(now())
- messages Message[]
-}
-
-model Message {
- id Int @id @default(autoincrement())
- body String
- createdAt DateTime @default(now())
- userId Int
- user User @relation(fields: [userId], references: [id])
-}
-```
-Once that is added, you will need a way to generate Pothos' artifacts. You will need to install this API's node modules and regenerate Prisma Client this each time this application is deployed later in the series, so go ahead and create a new `script` in `package.json` to handle this:
-
-```json
-// package.json
-
-{
- // ...
- "scripts": {
- // ...
- "build": "npm i && npx prisma generate"
- }
-}
-```
-Now you can run that command to install your node modules and regenerate Prisma Client and the Pothos outputs:
-
-```shell
-npm run build
-```
-When you run the command above, you should see that Prisma Client and the Pothos integration were both generated.
-
-
-
-Now that those types are generated, head over to `src/builder.ts`. Here you will import the `PrismaPlugin` and the generated Pothos types and apply them to your builder:
-
-```ts
-diff
-// src/builder.ts
-
-import SchemaBuilder from "@pothos/core";
-import { DateResolver } from "graphql-scalars";
-+import PrismaPlugin from "@pothos/plugin-prisma";
-+import type PrismaTypes from "@pothos/plugin-prisma/generated";
-
-export const builder = new SchemaBuilder<{
- Scalars: {
- Date: { Input: Date; Output: Date };
- };
-}>({});
-
-builder.addScalarType("Date", DateResolver, {});
-```
-As soon as you add the generated types, you will notice a TypeScript error occur within the instantiation of the `SchemaBuilder`.
-
-
-
-Pothos is smart enough to know that, because you are using the Prisma plugin, you need to provide a `prisma` instance to the builder. This is used by Pothos to infer information about the types in your Prisma Client. In the next step you will create and add that instance to the builder.
-
-For now, register the Prisma plugin and the generated types in the builder instance to let Pothos know about them:
-
-```ts
-diff
-// src/builder.ts
-// ...
-
-export const builder = new SchemaBuilder<{
- Scalars: {
- Date: { Input: Date; Output: Date };
- };
-+ PrismaTypes: PrismaTypes;
-}>({
-+ plugins: [PrismaPlugin],
-});
-
-// ...
-```
-You will, again, see a TypeScript error at this point. This is because the `builder` now expects an instance of Prisma Client to be provided to the function.
-
-
-
-In the next step, you will instantiate Prisma Client and provide it here in the `builder`.
-
-
-## Create a reusable instance of Prisma Client
-
-You now need to create a re-usable instance of Prisma Client that will be used to query your database and provide the types required by the builder from the previous step.
-
-Create a new file in the `src` folder named `db.ts`:
-
-```shell
-touch src/db.ts
-```
-Within that file, import Prisma Client and create an instance of the client named `prisma`. Export that instantiated client:
-
-```ts
-// src/db.ts
-
-import { PrismaClient } from "@prisma/client";
-export const prisma = new PrismaClient();
-```
-Import the `prisma` variable into `src/builder.ts` and provide it to `builder` to get rid of the TypeScript error:
-
-```ts
-diff
-// src/builder.ts
-
-// ...
-
-+import { prisma } from "./db";
-
-export const builder = new SchemaBuilder<{
- Scalars: {
- Date: { Input: Date; Output: Date };
- };
- PrismaTypes: PrismaTypes;
-}>({
- plugins: [PrismaPlugin],
-+ prisma: {
-+ client: prisma,
-+ },
-});
-
-// ...
-```
-The Pothos Prisma plugin is now completely configured and ready to go. This takes the types generated by Prisma and allows you easy access to those within your GraphQL object types and queries.
-
-The cool thing about this is you now have a single source of truth (the Prisma schema) handling the types in your database, the API used to query the database, and the GraphQL schema.
-
-Next, you will see this in action!
-
-## Define your GraphQL types
-
-At this point, you will define the GraphQL object types using the builder you configured with the Prisma plugin.
-
-> **Note**: It may seem redundant to manually define GraphQL object types when you've already defined the shape of the data in the Prisma schema. The Prisma schema defines the shape of the data in the database, while the GraphQL schema defines the data available in the API.
-
-Create a new folder within `src` named `models`. Then create a `User.ts` file within that new folder:
-
-```shell
-mkdir src/models
-touch src/models/User.ts
-```
-This is where you will define the `User` object type and its related queries that you will expose through your GraphQL API. Import the `builder` instance:
-
-```ts
-// src/models/User.ts
-
-import { builder } from "../builder";
-```
-Because you are using Pothos's Prisma plugin, the `builder` instance now has a method named [`prismaObject`](https://pothos-graphql.dev/docs/plugins/prisma#creating-types-with-builderprismaobject) you will use to define your object types.
-
-That method takes in two parameters:
-
-1. `name`: The name of the Prisma model this new type represents
-2. `options`: The config for the type being defined
-
-Use that method to create a `"User"` type:
-
-```ts
-diff
-// src/models/User.ts
-
-import { builder } from "../builder";
-
-+builder.prismaObject("User", {})
-```
-> **Note**: If you press Ctrl + Space within an empty set of quotes before typing in the `name` field, you should get some nice auto-completion with a list of available models from your Prisma schema thanks to the Prisma plugin.
-> 
-
-Within the `options` object, add a `fields` key that defines the `id`, `name` and `messages` fields using Pothos's ["expose"](https://pothos-graphql.dev/docs/guide/fields#exposing-fields-from-the-underlying-data) functions:
-
-```ts
-// src/models/User.ts
-
-import { builder } from "../builder";
-
-builder.prismaObject("User", {
- fields: t => ({
- id: t.exposeID("id"),
- name: t.exposeString("name"),
- messages: t.relation("messages")
- })
-})
-```
-> **Note**: Hitting Ctrl + Space when you begin to type in a field name will give you a list of fields in the target model that match the data type of the "expose" function you are using.
-
-The function above defines a GraphQL type definition and registers it in the `builder` instance. Generating a schema from the `builder` does not actually store a GraphQL schema in your file system that you can check out, however the resulting type definition for your `User` will look like this:
-
-```graphql
-type User {
- id: ID!
- messages: [Message!]!
- name: String!
-}
-```
-Next, add another file in the same folder named `Message.ts`:
-
-```shell
-touch Message.ts
-```
-This file will be similar to the `User.ts` file, except it will define the `Message` model.
-
-Define the `id`, `body` and `createdAt` fields. Note the `createdAt` field has the `DateTime` type in your Prisma schema and will need a custom configuration to define the custom `date` scalar type you defined:
-
-```ts
-// src/models/Message.ts
-
-import { builder } from "../builder";
-
-builder.prismaObject("Message", {
- fields: (t) => ({
- id: t.exposeID("id"),
- body: t.exposeString("body"),
- createdAt: t.expose("createdAt", {
- type: "Date",
- }),
- }),
-});
-```
-This function will result in the following GraphQL object type:
-
-```graphql
-type Message {
- body: String!
- createdAt: Date!
- id: ID!
-}
-```
-## Implement your queries
-
-Currently, you have object types defined for your GraphQL schema, however you have not yet defined a way to actually access that data. To do this, you first need to initialize a [`Query` type](https://graphql.org/learn/schema/#the-query-and-mutation-types).
-
-At the bottom of your `src/builder.ts` file, intialize the `Query` type using `builder`'s `queryType` function:
-
-```ts
-// src/builder.ts
-
-// ...
-
-builder.queryType({});
-```
-This registers a special GraphQL type that holds the definitions for each of your queries and acts as the entry point to your GraphQL API. You define this type in the `builder.ts` file to ensure the query builder has a `Query` type defined, that way you can add query fields to it later on.
-
-Within this `queryType` function, you have the ability to add query definitions directly, however, you will define these separately within your codebase to better organize your code.
-
-Import the `prisma` instance into `src/models/User.ts`:
-
-```ts
-diff
-// src/models/User.ts
-
-import { builder } from "../builder";
-+import { prisma } from "../db";
-
-// ...
-```
-Then, using the `builder`'s [`queryField`](https://pothos-graphql.dev/docs/api/schema-builder#queryfieldname-field) function, define a `"users"` query that exposes the `User` object type you defined:
-
-```ts
-// src/models/User.ts
-// ...
-
-// 1
-builder.queryField("users", (t) =>
- // 2
- t.prismaField({
- // 3
- type: ["User"],
- // 4
- resolve: async (query, root, args, ctx, info) => {
- return prisma.user.findMany({ ...query });
- },
- })
-);
-```
-The snippet above:
-
-1. Adds a field to the GraphQL schema's `Query` type named `"users"`
-2. Defines a field that resolves to some type in your Prisma schema
-3. Lets Pothos know this field will resolve to an array of your Prisma Client's `User` type
-4. Sets up a resolver function for this field.
-
-> **Note**: The `resolve` function's `query` argument at the beginning of the argument list. This is a specific field Pothos populates when using `prismaField` function that is used to load data and relations in a performant way. This may be confusing if you come from a GraphQL background as it changes the expected order of arguments.
-
-In order to better visualize what took place, here is the `Query` type and the `users` query that will be generated by the code in this section:
-
-```graphql
-type Query {
- users: [User!]!
-}
-```
-## Apply the GraphQL schema
-
-You now have all of your GraphQL object types and queries defined and implemented. The last piece needed is a way to register all of these types and queries in a single place and generate the GraphQL schema based on your configurations.
-
-Create a new file in `src` named `schema.ts`:
-
-```shell
-touch schema.ts
-```
-This file will simply import the models, causing the code within the files to be run, and run the `builder` instance's `toSchema` function to generate the GraphQL schema:
-
-```ts
-// src/schema.ts
-
-import { builder } from "./builder";
-
-import "./models/Message";
-import "./models/User";
-
-export const schema = builder.toSchema({});
-```
-The `toSchema` function generates an abstract syntax tree (AST) representation of your GraphQL schema. Below, you can see what the AST and GraphQL representations would look like:
-
-
-
-```graphql
-scalar Date
-
-type Message {
- body: String!
- createdAt: Date!
- id: ID!
-}
-
-type Query {
- users: [User!]!
-}
-
-type User {
- id: ID!
- messages: [Message!]!
- name: String!
-}
-```
-```json
-{
- __validationErrors: undefined,
- description: undefined,
- extensions: [Object: null prototype] {},
- astNode: undefined,
- extensionASTNodes: [],
- _queryType: GraphQLObjectType {
- name: 'Query',
- description: undefined,
- isTypeOf: undefined,
- extensions: [Object: null prototype] {
- pothosOptions: {},
- pothosConfig: [Object]
- },
- astNode: undefined,
- extensionASTNodes: [],
- _fields: [Object: null prototype] { users: [Object] },
- _interfaces: []
- },
- _mutationType: undefined,
- _subscriptionType: undefined,
- _directives: [
- GraphQLDirective {
- name: 'deprecated',
- description: 'Marks an element of a GraphQL schema as no longer supported.',
- locations: [Array],
- isRepeatable: false,
- extensions: [Object: null prototype] {},
- astNode: undefined,
- args: [Array]
- },
- GraphQLDirective {
- name: 'include',
- description: 'Directs the executor to include this field or fragment only when the `if` argument is true.',
- locations: [Array],
- isRepeatable: false,
- extensions: [Object: null prototype] {},
- astNode: undefined,
- args: [Array]
- },
- GraphQLDirective {
- name: 'skip',
- description: 'Directs the executor to skip this field or fragment when the `if` argument is true.',
- locations: [Array],
- isRepeatable: false,
- extensions: [Object: null prototype] {},
- astNode: undefined,
- args: [Array]
- },
- GraphQLDirective {
- name: 'specifiedBy',
- description: 'Exposes a URL that specifies the behavior of this scalar.',
- locations: [Array],
- isRepeatable: false,
- extensions: [Object: null prototype] {},
- astNode: undefined,
- args: [Array]
- }
- ],
- _typeMap: [Object: null prototype] {
- Boolean: GraphQLScalarType {
- name: 'Boolean',
- description: 'The `Boolean` scalar type represents `true` or `false`.',
- specifiedByURL: undefined,
- serialize: [Function: serialize],
- parseValue: [Function: parseValue],
- parseLiteral: [Function: parseLiteral],
- extensions: [Object: null prototype] {},
- astNode: undefined,
- extensionASTNodes: []
- },
- Date: GraphQLScalarType {
- name: 'Date',
- description: 'A date string, such as 2007-12-03, compliant with the `full-date` format outlined in section 5.6 of the RFC 3339 profile of the ISO 8601 standard for representation of dates and times using the Gregorian calendar.',
- specifiedByURL: undefined,
- serialize: [Function: serialize],
- parseValue: [Function: parseValue],
- parseLiteral: [Function: parseLiteral],
- extensions: [Object: null prototype],
- astNode: undefined,
- extensionASTNodes: []
- },
- Float: GraphQLScalarType {
- name: 'Float',
- description: 'The `Float` scalar type represents signed double-precision fractional values as specified by [IEEE 754](https://en.wikipedia.org/wiki/IEEE_floating_point).',
- specifiedByURL: undefined,
- serialize: [Function: serialize],
- parseValue: [Function: parseValue],
- parseLiteral: [Function: parseLiteral],
- extensions: [Object: null prototype] {},
- astNode: undefined,
- extensionASTNodes: []
- },
- ID: GraphQLScalarType {
- name: 'ID',
- description: 'The `ID` scalar type represents a unique identifier, often used to refetch an object or as key for a cache. The ID type appears in a JSON response as a String; however, it is not intended to be human-readable. When expected as an input type, any string (such as `"4"`) or integer (such as `4`) input value will be accepted as an ID.',
- specifiedByURL: undefined,
- serialize: [Function: serialize],
- parseValue: [Function: parseValue],
- parseLiteral: [Function: parseLiteral],
- extensions: [Object: null prototype] {},
- astNode: undefined,
- extensionASTNodes: []
- },
- Int: GraphQLScalarType {
- name: 'Int',
- description: 'The `Int` scalar type represents non-fractional signed whole numeric values. Int can represent values between -(2^31) and 2^31 - 1.',
- specifiedByURL: undefined,
- serialize: [Function: serialize],
- parseValue: [Function: parseValue],
- parseLiteral: [Function: parseLiteral],
- extensions: [Object: null prototype] {},
- astNode: undefined,
- extensionASTNodes: []
- },
- Message: GraphQLObjectType {
- name: 'Message',
- description: undefined,
- isTypeOf: undefined,
- extensions: [Object: null prototype],
- astNode: undefined,
- extensionASTNodes: [],
- _fields: [Object: null prototype],
- _interfaces: []
- },
- Query: GraphQLObjectType {
- name: 'Query',
- description: undefined,
- isTypeOf: undefined,
- extensions: [Object: null prototype],
- astNode: undefined,
- extensionASTNodes: [],
- _fields: [Object: null prototype],
- _interfaces: []
- },
- String: GraphQLScalarType {
- name: 'String',
- description: 'The `String` scalar type represents textual data, represented as UTF-8 character sequences. The String type is most often used by GraphQL to represent free-form human-readable text.',
- specifiedByURL: undefined,
- serialize: [Function: serialize],
- parseValue: [Function: parseValue],
- parseLiteral: [Function: parseLiteral],
- extensions: [Object: null prototype] {},
- astNode: undefined,
- extensionASTNodes: []
- },
- User: GraphQLObjectType {
- name: 'User',
- description: undefined,
- isTypeOf: undefined,
- extensions: [Object: null prototype],
- astNode: undefined,
- extensionASTNodes: [],
- _fields: [Object: null prototype],
- _interfaces: []
- },
- __Directive: GraphQLObjectType {
- name: '__Directive',
- description: 'A Directive provides a way to describe alternate runtime execution and type validation behavior in a GraphQL document.\n' +
- '\n' +
- "In some cases, you need to provide options to alter GraphQL's execution behavior in ways field arguments will not suffice, such as conditionally including or skipping a field. Directives provide this by describing additional information to the executor.",
- isTypeOf: undefined,
- extensions: [Object: null prototype] {},
- astNode: undefined,
- extensionASTNodes: [],
- _fields: [Object: null prototype],
- _interfaces: []
- },
- __DirectiveLocation: GraphQLEnumType {
- name: '__DirectiveLocation',
- description: 'A Directive can be adjacent to many parts of the GraphQL language, a __DirectiveLocation describes one such possible adjacencies.',
- extensions: [Object: null prototype] {},
- astNode: undefined,
- extensionASTNodes: [],
- _values: [Array],
- _valueLookup: [Map],
- _nameLookup: [Object: null prototype]
- },
- __EnumValue: GraphQLObjectType {
- name: '__EnumValue',
- description: 'One possible value for a given Enum. Enum values are unique values, not a placeholder for a string or numeric value. However an Enum value is returned in a JSON response as a string.',
- isTypeOf: undefined,
- extensions: [Object: null prototype] {},
- astNode: undefined,
- extensionASTNodes: [],
- _fields: [Object: null prototype],
- _interfaces: []
- },
- __Field: GraphQLObjectType {
- name: '__Field',
- description: 'Object and Interface types are described by a list of Fields, each of which has a name, potentially a list of arguments, and a return type.',
- isTypeOf: undefined,
- extensions: [Object: null prototype] {},
- astNode: undefined,
- extensionASTNodes: [],
- _fields: [Object: null prototype],
- _interfaces: []
- },
- __InputValue: GraphQLObjectType {
- name: '__InputValue',
- description: 'Arguments provided to Fields or Directives and the input fields of an InputObject are represented as Input Values which describe their type and optionally a default value.',
- isTypeOf: undefined,
- extensions: [Object: null prototype] {},
- astNode: undefined,
- extensionASTNodes: [],
- _fields: [Object: null prototype],
- _interfaces: []
- },
- __Schema: GraphQLObjectType {
- name: '__Schema',
- description: 'A GraphQL Schema defines the capabilities of a GraphQL server. It exposes all available types and directives on the server, as well as the entry points for query, mutation, and subscription operations.',
- isTypeOf: undefined,
- extensions: [Object: null prototype] {},
- astNode: undefined,
- extensionASTNodes: [],
- _fields: [Object: null prototype],
- _interfaces: []
- },
- __Type: GraphQLObjectType {
- name: '__Type',
- description: 'The fundamental unit of any GraphQL Schema is the type. There are many kinds of types in GraphQL as represented by the `__TypeKind` enum.\n' +
- '\n' +
- 'Depending on the kind of a type, certain fields describe information about that type. Scalar types provide no information beyond a name, description and optional `specifiedByURL`, while Enum types provide their values. Object and Interface types provide the fields they describe. Abstract types, Union and Interface, provide the Object types possible at runtime. List and NonNull types compose other types.',
- isTypeOf: undefined,
- extensions: [Object: null prototype] {},
- astNode: undefined,
- extensionASTNodes: [],
- _fields: [Object: null prototype],
- _interfaces: []
- },
- __TypeKind: GraphQLEnumType {
- name: '__TypeKind',
- description: 'An enum describing what kind of type a given `__Type` is.',
- extensions: [Object: null prototype] {},
- astNode: undefined,
- extensionASTNodes: [],
- _values: [Array],
- _valueLookup: [Map],
- _nameLookup: [Object: null prototype]
- }
- },
- _subTypeMap: [Object: null prototype] {},
- _implementationsMap: [Object: null prototype] {}
-}
-```
-
-
-Over in your `src/index.ts` file, import the `schema` variable you just created. The `createServer` function's configuration object takes a key named `schema` that will accept the generated GraphQL schema:
-
-```ts
-diff
-// src/index.ts
-
-import { createServer } from "@graphql-yoga/node";
-+import { schema } from "./schema";
-
-const port = Number(process.env.API_PORT) || 4000
-
-const server = createServer({
- port,
-+ schema,
-});
-
-server.start().then(() => {
- console.log(`🚀 GraphQL Server ready at http://localhost:${port}/graphql`);
-});
-```
-Fantastic! Your GraphQL schema has been defined using a code-first methodology, your GraphQL object and query types are in sync with your Prisma schema models, and your GraphQL server is being provided the generated GraphQL schema.
-
-At this point, run the server so you can play with the API:
-
-```sh
-npm run dev
-```
-After running the above command, open up [http://localhost:4000/graphql](http://localhost:4000/graphql) in your browser to access the GraphQL playground. You should be presented with a page that looks like this:
-
-
-
-In the top-left corner of the screen, hit the **Explorer** button to see your API's available queries and mutations:
-
-
-
-If you click on the **users** query type, the right side of the screen will be automatically populated with a query for your user data.
-
-Run that query by hitting the "execute query" button to see the API in action:
-
-
-
-Feel free to play around with the different options to choose which fields you would like to query for and which data from the "messages" relation you would like to include.
-
-## Summary & What's next
-
-In this article, you built out your entire GraphQL API. The API was built in a type-safe way by taking advantage of Prisma's generated types. These, along with the Pothos Prisma plugin, allowed you to ensure the types across your ORM, GraphQL object types, GraphQL query types, and resolvers were all in sync with the database schema.
-
-Along the way, you:
-
-- Set up a GraphQL server with GraphQL Yoga
-- Set up the Pothos schema builder
-- Defined your GraphQL object and query types
-- Queried for data using Prisma Client
-
-In the next article, you will wrap things up by setting up code generation to keep the types on your frontend client and API in sync. Then you will deploy your finished application!
diff --git a/apps/blog/content/blog/e2e-type-safety-graphql-react-4-JaHA8GbkER/index.mdx b/apps/blog/content/blog/e2e-type-safety-graphql-react-4-JaHA8GbkER/index.mdx
deleted file mode 100644
index b8ccea27ec..0000000000
--- a/apps/blog/content/blog/e2e-type-safety-graphql-react-4-JaHA8GbkER/index.mdx
+++ /dev/null
@@ -1,633 +0,0 @@
----
-title: "End-To-End Type-Safety with GraphQL, Prisma & React: Codegen & Deployment"
-slug: "e2e-type-safety-graphql-react-4-JaHA8GbkER"
-date: "2022-09-01"
-authors:
- - "Sabin Adams"
-metaTitle: "End-To-End Type-Safety with GraphQL, Prisma & React: Codegen & Deployment"
-metaDescription: "Learn how to build a fully type-safe application with GraphQL, Prisma, and React. This article walks you through setting up code generation to allow you to keep your TypeScript types in sync across your frontend and API. You will also deploy your completed project."
-metaImagePath: "/e2e-type-safety-graphql-react-4-JaHA8GbkER/imgs/meta-42c1cab53d152b8e3e634d75bc70b9d624431cf7-1269x715.png"
-heroImagePath: "/e2e-type-safety-graphql-react-4-JaHA8GbkER/imgs/hero-b277fdcfbb2267b2f5a9b5d2bd7f06e053febf0f-844x474.svg"
-heroImageAlt: "hero image prisma"
-series: e2e-type-safety-graphql-react
-seriesIndex: 4
-tags:
- - "education"
----
-
-
- 16 min read
-
-
- In this series you are learning how to implement end-to-end type safety using React, GraphQL, Prisma, and some other helpful tools that tie those three together.
-
-## Table Of Contents
-
-- [Introduction](#introduction)
-- [Set up GraphQL Codegen](#set-up-graphql-codegen)
- - [Installation](#installation)
- - [Configuring the plugins](#configuring-the-plugins)
-- [Write a GraphQL Query](#write-a-graphql-query)
-- [Generate types using GraphQL Codegen](#generate-types-using-graphql-codegen)
-- [Replace the manually entered types](#replace-the-manually-entered-types)
-- [Install and set up urql](#install-and-set-up-urql)
-- [Query your data](#query-your-data)
-- [Push your projects to Github](#push-your-projects-to-github)
-- [Deploy the API](#deploy-the-api)
-- [Deploy the React application](#deploy-the-react-application)
-- [Summary & Final thoughts](#summary--final-thoughts)
-
-
-
-If you missed the [first part](/e2e-type-safety-graphql-react-1-I2GxIfxkSZ) of this series, here is a quick overview of the technologies you will be using in this application, as well as a few prerequisites.
-
-### Technologies you will use
-
-These are the main tools you will be using throughout this series:
-
-- [Prisma](https://www.prisma.io/) as the Object-Relational Mapper (ORM)
-- [PostgreSQL](https://www.postgresql.org/) as the database
-- [Railway](https://www.sqlite.org/index.html) to host your database
-- [TypeScript](https://www.typescriptlang.org/) as the programming language
-- [GraphQL Yoga](https://www.graphql-yoga.com/) as the GraphQL server
-- [Pothos](https://pothos-graphql.dev) as the code-first GraphQL schema builder
-- [Vite](https://vitejs.dev/) to manage and scaffold your frontend project
-- [React](https://reactjs.org/) as the frontend JavaScript library
-- [GraphQL Codegen](https://www.graphql-code-generator.com/) to generate types for the frontend based on the GraphQL schema
-- [TailwindCSS](https://tailwindcss.com/) for styling the application
-- [Render](https://render.com/) to deploy your API and React Application
-
-### Assumed knowledge
-
-While this series will attempt to cover everything in detail from a beginner's standpoint, the following would be helpful:
-
-- Basic knowledge of JavaScript or TypeScript
-- Basic knowledge of GraphQL
-- Basic knowledge of React
-
-### Development environment
-
-To follow along with the examples provided, you will be expected to have:
-
-- [Node.js](https://nodejs.org) installed.
-- The [Prisma VSCode Extension](https://marketplace.visualstudio.com/items?itemName=Prisma.prisma) installed. _(optional)_
-
-
-
-## Set up GraphQL Codegen
-
-Currently, Prisma generates a set of TypeScript types based off of your database schema. Pothos uses those types to help build GraphQL type definitions. The result of those two pieces is a GraphQL schema:
-
-
-
-Your frontend project currently has a set of manually defined types, which were built in the first section of this series. These are "compatible with" the types in your API, but not directly related:
-
-
-
-Until now, this worked fine. But what happens if a new field is introduced, updated, or removed form the API? Your frontend application would have no idea a change occurred in the API and the type definitions in the two projects would become out of sync.
-
-How can you be sure a `user` object you retrieve over the network, for example, will contain all of the fields your React application is expecting? This is where [GraphQL Codegen](https://www.graphql-code-generator.com/) comes in:
-
-
-
-GraphQL Codegen will generate TypeScript types and query helpers in your React project based off of your GraphQL schema and the queries you write in your frontend application.
-
-So the entire flow of types across your application will be as follows:
-
-1. Prisma will generate types based off of your database schema.
-2. Pothos will use those types to expose GraphQL types via an API.
-3. GraphQL Codegen will read your GraphQL schema and generate types for your frontend codebase representing what is available via the API and how to interact with it.
-
-### Installation
-
-
-To get started, navigate into your React application's codebase via the terminal:
-
-```sh
-cd react-client
-```
-You will need a few different packages to set up GraphQL Codegen. Run the following to install the packages needed:
-
-```sh
-npm i graphql
-npm i -D @graphql-codegen/cli @graphql-codegen/typed-document-node @graphql-codegen/typescript @graphql-codegen/typescript-operations
-```
-Here's a brief overview of why each of these packages are needed:
-
-- [`graphql`](https://www.npmjs.com/package/graphql): The library that allows you to use GraphQL.
-- [`@graphql-codegen/cli`](https://www.graphql-code-generator.com/docs/getting-started/installation): The CLI tool that allows you to use different plugins to generate assets from a GraphQL API.
-- [`@graphql-codegen/typescript`](https://www.graphql-code-generator.com/plugins/typescript/typescript): The base plugin for GraphQL Codegen TypeScript-based plugins. This plugin takes your GraphQL API's schema and generates TypeScript types for each GraphQL type.
-- [`@graphql-codegen/typescript-operations`](https://www.graphql-code-generator.com/plugins/typescript/typescript-operations): The GraphQL Codegen plugin that generates TypeScript types representing queries and responses based on queries you've written.
-- [`@graphql-codegen/typed-document-node`](https://www.graphql-code-generator.com/plugins/typescript/typed-document-node): The GraphQL Codegen plugin that generates an Abstract Syntax Tree (AST) representation of any queries you've written.
-
-> **Note**: Don't worry too much about the nitty-gritty of these plugins. Just know that they generate TypeScript types for each GraphQL object, query and mutation type in your GraphQL schema and help make your API request type-safe.
-
-### Configuring the plugins
-
-Now that those plugins are installed and you have a general idea of what they do, it's time to configure them.
-
-At the root of your project, create a new file named `codegen.yml`. This will hold the configurations for GraphQL Codegen:
-
-```sh
-touch codegen.yml
-```
-There will be three configurations to fill out in this file:
-
-1. `schema`: The URL of your GraphQL schema
-2. `documents`: A blob that finds any `.graphql` file in your codebase
-3. `generates`: The configuration that tells GraphQL Codegen what to generate and which plugins to use
-
-```yml
-# codegen.yml
-
-schema: http://localhost:4000/graphql
-documents: "./src/**/*.graphql"
-generates:
- ./src/graphql/generated.ts:
- plugins:
- - typescript
- - typescript-operations
- - typed-document-node
-```
-This configuration file lets GraphQL Codegen know a GraphQL schema is available at `localhost:4000/graphql`, where to find your queries, and where to output the generated types using all of the plugins you installed.
-
-In order to actually generate the types, however, you will need to set up a script to run the generation command. Add the following script to `package.json`:
-
-```json
-// package.json
-{
- // ...
- "scripts": {
- // ...
- "codegen": "graphql-codegen"
- }
- // ...
-}
-```
-This provides a way for you to actually generate your types! You aren't quite ready yet, however.
-
-GraphQL Codegen won't be able to generate any types for your GraphQL queries if you don't have any queries!
-
-## Write a GraphQL query
-
-To keep things organized, you will write your queries in individual files within a `graphql` folder. Go ahead and create that folder within the `src` directory:
-
-```sh
-mkdir src/graphql
-```
-You will only need one query for this application, which will retrieve the a list of users and their messages. Create a new file within the `graphql` directory named `users.query.graphql`:
-
-```sh
-touch src/graphql/users.query.graphql
-```
-Your applicaiton only needs a few pieces of information from the API: Each user's `name` and their messages `body` data.
-
-Write the following GraphQL query for that data:
-
-```graphql
-# src/graphql/users.query.graphql
-
-query GetUsers {
- users {
- name
- messages {
- body
- }
- }
-}
-```
-## Generate types using GraphQL Codegen
-
-Now that you have a query to work with, you can generate the types representing your query, the response, and the types available via your API!
-
-
-Run the `script` you set up previously:
-
-> **Note**: Make sure your GraphQL API is up and running before running the command below! You can use `npm run dev` within the API's directory to start the server.
-
-```sh
-npm run codegen
-```
-You should see output similar to this:
-
-
-
-As configured in your `codegen.yml` file, you will find a new file in `src/graphql` named `generated.ts`.
-
-This file contains the generated types. Below are the types and objects generated from each plugin:
-
-
-
-```ts
-export type Maybe = T | null;
-export type InputMaybe = Maybe;
-export type Exact = { [K in keyof T]: T[K] };
-export type MakeOptional = Omit & { [SubKey in K]?: Maybe };
-export type MakeMaybe = Omit & { [SubKey in K]: Maybe };
-/** All built-in and custom scalars, mapped to their actual values */
-export type Scalars = {
- ID: string;
- String: string;
- Boolean: boolean;
- Int: number;
- Float: number;
- Date: any;
-};
-
-export type Message = {
- __typename?: 'Message';
- body: Scalars['String'];
- createdAt: Scalars['Date'];
- id: Scalars['ID'];
-};
-
-export type Query = {
- __typename?: 'Query';
- users: Array;
-};
-
-export type User = {
- __typename?: 'User';
- id: Scalars['ID'];
- messages: Array;
- name: Scalars['String'];
-};
-```
-```ts
-export type GetUsersQueryVariables = Exact<{ [key: string]: never }>;
-
-export type GetUsersQuery = {
- __typename?: "Query";
- users: Array<{
- __typename?: "User";
- name: string;
- messages: Array<{ __typename?: "Message"; body: string }>;
- }>;
-};
-```
-```ts
-export const GetUsersDocument = {
- kind: "Document",
- definitions: [
- {
- kind: "OperationDefinition",
- operation: "query",
- name: { kind: "Name", value: "GetUsers" },
- selectionSet: {
- kind: "SelectionSet",
- selections: [
- {
- kind: "Field",
- name: { kind: "Name", value: "users" },
- selectionSet: {
- kind: "SelectionSet",
- selections: [
- { kind: "Field", name: { kind: "Name", value: "name" } },
- {
- kind: "Field",
- name: { kind: "Name", value: "messages" },
- selectionSet: {
- kind: "SelectionSet",
- selections: [
- { kind: "Field", name: { kind: "Name", value: "body" } },
- ],
- },
- },
- ],
- },
- },
- ],
- },
- },
- ],
-} as unknown as DocumentNode;
-```
-
-
-These types and objects are exact representations of your GraphQL API and the queries you've written and are what will bridge the gap between your API and your client.
-
-## Replace the manually entered types
-
-Now that you have types generated from the API itself, you will replace your manually written types with those types.
-
-Head over to `src/types.ts`. At the very top of that file import the `GetUsersQuery` type from `src/graphql/generated.ts`:
-
-```ts
-// src/types.ts
-
-import type { GetUsersQuery } from "./graphql/generated";
-
-// ...
-```
-The reason you import this type instead of the full `User` and `Note` types is that the `GetUsersQuery` type has access to a more specific set of types that contain only the fields your query retrieves.
-
-Replace the existing types in that file with the following to expose the types representing your query results:
-
-```ts
-// src/types.ts
-import type { GetUsersQuery } from "./graphql/generated";
-
-export type Message = GetUsersQuery["users"][0]["messages"][0];
-export type User = GetUsersQuery["users"][0];
-```
-If you head over to `src/components/UserDisplay.tsx` and inspect the type being used for the `user` prop, you will now see it uses the type generated from your GraphQL query and API:
-
-
-
-You now have almost every piece of the end-to-end type-safety puzzle put in place. Your types are in sync from your database all the way to your frontend application.
-
-The only thing missing is actually digesting your API rather than using static data. You will want to do this in a type-safe way to ensure you are querying only for data that exists in your API and retrieving all of the fields your frontend expects.
-
-GraphQL Codegen already generated the types and query objects required to do this. You just need to use them!
-
-## Install and set up urql
-
-To query your GraphQL API you will use [urql](https://formidable.com/open-source/urql/), a GraphQL client library that allows you to easily query a GraphQL API and integrates with React.
-
-You will first need to install the dependency:
-
-```sh
-npm i urql
-```
-This library provides you with two exports you will need: A `Provider` component and a `createClient` function.
-
-You will need to use the `Provider` and `createClient` functions to provide urql to your application. In `src/main.tsx`, import those from the urql library:
-
-```ts
-// src/main.tsx
-
-// ...
-import { createClient, Provider } from 'urql';
-
-// ...
-```
-Next, use the `createClient` function to create an instance of the urql client. The client takes in a configuration object with a `url` key, which points to your GraphQL API's url.
-
-While developing locally this should be `http://localhost:4000/graphql`, however once the API is deployed this will need to change. Use an environment variable allow you to provide an API url via the environment, while falling back to the localhost URL in development:
-
-```ts
-// src/main.tsx
-
-// ...
-
-const client = createClient({
- url: import.meta.env.VITE_API_URL || 'http://localhost:4000/graphql',
-});
-
-// ...
-```
-The last step to provide urql to your application is to wrap your `App` component in the urql `Provider` component and pass that component the instantiated client:
-
-```tsx
-diff
-// src/main.tsx
-
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
-import './index.css'
-import { createClient, Provider } from 'urql';
-
-const client = createClient({
- url: import.meta.env.VITE_API_URL || 'http://localhost:4000/graphql',
-});
-
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-
-+
-
-
-)
-```
-## Query your data
-
-You can now use urql to query your data! Head over to `src/App.tsx` and import the `useQuery` function from urql. Also import the `GetUsersDocument` object from `graphql/generated.ts`, as this will contain the AST representation of your query:
-
-```tsx
-// src/App.tsx
-
-// ...
-
-import { useQuery } from 'urql'
-import { GetUsersDocument } from './graphql/generated'
-
-// ...
-```
-Within the `App` function, you can now replace the static variable and data with the following query:
-
-```tsx
-// src/App.tsx
-
-// ...
-
-function App() {
- const [results] = useQuery({
- query: GetUsersDocument
- })
-
- // ...
-}
-
-// ...
-```
-This uses the `GetUserDocument` query object to request data from your API and return it in a properly typed variable.
-
-You no longer need the `User` type import because the typing is already being specified in the `GetUsersDocument` object. You will also need to adjust the code used to map over each user in the JSX, as the query results are now returned in a nested object. The resulting file should look as follows:
-
-```tsx
-// src/App.tsx
-
-import UserDisplay from './components/UserDisplay'
-import { useQuery } from 'urql'
-import { GetUsersDocument } from './graphql/generated'
-
-function App() {
- const [results] = useQuery({
- query: GetUsersDocument
- })
-
- return (
-
- {
- results.data?.users.map((user, i) => )
- }
-
- )
-}
-
-export default App
-```
-Notice your API request results are properly typed based off of the types within the API itself! If both your API and Client are running, head over to the browser. You should now see all of your data!
-
-
-
-Congrats! 🎉 At this point, you have implemented a completely end-to-end type safe application with two separate pieces: an API and the client.
-
-The only thing left to do is deploy the project so you can share it!
-
-## Push your projects to Github
-
-You will be using [Render](https://render.com/) to deploy both of your codebases. Before doing so, however, you need to host your code on Github.
-
-> **Note**: If you don't already have a Github account, you can create one for free [here](https://github.com/signup).
-
-In the top left corner of the home page, hit the **New** button to create a new repository:
-
-
-
-Give your repository a name and then hit **Create repository**:
-
-
-
-You will need to retrieve the SSH url for this repository to use later on. Grab that from the location shown below:
-
-
-
-Now within your React application, run the follwing command to initialize and push a local repository, replacing `` with the SSH url:
-
-
-
-```sh
-git init
-git add .
-git commit -m "first commit"
-git branch -M main
-git remote add origin
-git push -u origin main
-```
-```sh
-git init
-git add .
-git commit -m "first commit"
-git branch -M main
-git remote add origin git@github.com:sabinadams/e2e-type-safety-client.git
-git push -u origin main
-```
-
-
-Next, you will repeat these steps for your API's codebase.
-Create another new repository from your Github dashboard:
-
-
-
-Title the repository and hit **Create repository**:
-
-
-
-You should again see a page with some setup instructions. Grab the SSH url from the same location as before:
-
-
-
-Finally, navigate via the terminal into your GraphQL API's codebase and run the following set of commands. Again, replace `` with your SSH url:
-
-
-
-```sh
-git init
-git add .
-git commit -m "first commit"
-git branch -M main
-git remote add origin
-git push -u origin main
-```
-```sh
-git init
-git add .
-git commit -m "first commit"
-git branch -M main
-git remote add origin git@github.com:sabinadams/e2e-type-safety-api.git
-git push -u origin main
-```
-
-
-## Deploy the API
-
-Now that your code is available on Github, you can deploy your codebases!
-
-Head over to [Render](https://render.com) and create a free account if you do not already have one.
-
-The first thing you will deploy is your GraphQL API. On your dashboard, hit the **New Web Service** button, which will allow you to deploy a Node.js application:
-
-
-
-On this page, if you haven't already, click **+ Connect account** under the **Github** header to give Render access to list your Github repositories:
-
-
-
-After connecting your account, you should see your repositories available under the **Connect a repository** header. Choose your GraphQL API repository.
-
-You will be prompted for a few different options:
-
-1. **name**: Pick any name you'd like
-2. **Environment**: `Node`
-3. **Region**: Stick with the default
-4. **Branch**: `main`
-5. **Build Command**: `npm run build`
-6. **Start Command**: `npm run dev`
-
-Beneath those options, choose the **Free** plan:
-
-
-
-Expand the **Advanced** section near the bottom of the page. Here you will define an environment variable that will hold your database URL.
-
-Click the **Add Environment Variable** button and add a variable named `DATABASE_URL` whose value is the connection string to your Postgres database:
-
-
-
-Finally, at the bottom of the page, hit the **Create Web Service** button:
-
-
-
-This will trigger the deployment process! Once that finishes deploying, you will be able to access the URL Render provides to see your GraphQL API.
-
-
-Copy the URL from the location shown below and navigate to it in a new browser window at the `/graphql` route:
-
-
-
-## Deploy the React application
-
-Now that your API is deployed, you will deploy your React application.
-
-Head back over to the Render dashboard and hit the **New** button at the top of the page. Choose the **Static Site** option:
-
-
-
-Connect this static site to your React application's Github repostory.
-
-You will be prompted again to fill out some details for deploying this application:
-
-1. **name**: Pick any name you'd like
-4. **Branch**: `main`
-5. **Build Command**: `npm run build`
-6. **Publish directory**: `dist`
-
-Under the **Advanced** section, add an environment variable named `VITE_API_URL` whose value is the URL of your deployed GraphQL API at the `/graphql` route. For example:
-
-
-
-Finally, hit the **Create Static Site** button at the bottom of the page to deploy the application.
-
-When that finishes deploying, head over to the URL available at the top of the page. If all went well, you should see your application is live!
-
-
-
-## Summary & Final thoughts
-
-In this article, you finished up your application and deployed it! Along the way you:
-
-- Set up GraphQL Codegen to keep your TypeScript types in sync across your entire stack
-- Published both of your codebases to Github
-- Deployed both of your applications using Render
-
-In this series, you walked through every step of building a fully type-safe application using Prisma, GraphQL, and React as the main technologies. The power of all the tools you used combined is pretty amazing and allows you to build a scalable, safe application.
-
-If you have any questions about anything covered in this series, please feel free to reach out to me on [Twitter](https://twitter.com/sabinthedev).
diff --git a/apps/blog/content/blog/elsevier-customer-story-SsAASKagMHtN/index.mdx b/apps/blog/content/blog/elsevier-customer-story-SsAASKagMHtN/index.mdx
deleted file mode 100644
index f14fd23792..0000000000
--- a/apps/blog/content/blog/elsevier-customer-story-SsAASKagMHtN/index.mdx
+++ /dev/null
@@ -1,134 +0,0 @@
----
-title: "How Elsevier Piloted an Innovative Publication Process Quickly and Flexibly with Prisma"
-slug: "elsevier-customer-story-SsAASKagMHtN"
-date: "2021-11-15"
-authors:
- - "Alex Emerich"
-metaTitle: "How Elsevier piloted an innovative publication process with Prisma"
-metaDescription: "Elsevier is a global leader in information and analytics in scientific publishing. Learn how they modernized the publication process efficiently and flexibly with Prisma."
-metaImagePath: "/elsevier-customer-story-SsAASKagMHtN/imgs/hero-4eaa561121a703742d0016b7a60b69e0cc262dc8-1692x852.png"
-heroImagePath: "/elsevier-customer-story-SsAASKagMHtN/imgs/hero-4eaa561121a703742d0016b7a60b69e0cc262dc8-1692x852.png"
-heroImageAlt: "Elsevier"
-tags:
- - "case-study"
----
-
-Elsevier is a global leader in information and analytics in scientific publishing, and helps researchers and healthcare professionals advance science and improve health outcomes for the benefit of society.
-
-With the help of Prisma, Elsevier is in the process of modernizing the scientific publishing process efficiently and with flexibility.
-
-## Contributing to advances in science and healthcare
-
-[Elsevier's](https://www.elsevier.com/) mission of helping researchers and healthcare professionals is rooted in publishing and has also evolved into a global leader in information and analytics. With so much health-related information being shared in real time, Elsevier decided it was time to modernize and speed up their existing manual peer review process.
-
-
-
-Building an application to speed up the peer review process would help Elsevier remain a leader in healthcare research. They dedicated a small project team consisting of Serghei Ghidora (Tech Lead), Paul Foeckler (Product Owner), and a UX Designer to develop a minimum viable product (MVP) to make the peer review process faster and more efficient.
-
-## Setting a strong foundation with Prisma
-
-Streamlining a very manual, logically complex publication process is a tall task. Serghei knew that being flexible was going to be key to developing a successful MVP.
-
-
-
-"The flexibility of moving fast and changing the product based on user feedback fast was crucial"
-
-
-
-[GraphQL](https://graphql.org/) provided the nested data structure necessary for multi-user document editing. Being the only tech person working on the project, Serghei also knew he needed tools that were going to eliminate undifferentiated work. The handling of definitions, resolvers, schemas, and models all by himself is a daunting task for a single developer.
-
-
-
-"Writing all that by yourself, it's a lot of work. Especially because you don't just write it once. You write, you refactor, you change things. You throw stuff into the garbage, because it didn't work. You need to experiment again with the user. The flexibility of moving fast and changing fast, that was crucial."
-
-
-
-Looking for technologies that worked best with GraphQL, and to eliminate as much manual code as possible, Serghei discovered [Prisma with Nexus](https://github.com/graphql-nexus/nexus-prisma). Working with [Prisma Client](https://www.prisma.io/client) and [Prisma Migrate](https://www.prisma.io/migrate), Serghei set himself a strong foundation centered around speed, developer experience, and flexibility.
-
-
-
-### Acting on user feedback quickly with Prisma Migrate
-
-The team desired to focus on speaking to users every day to understand what their needs were and what features were the highest priorities for the MVP. Serghei used [Prisma Migrate](https://www.prisma.io/migrate) to automatically generate fully customizable database schema migrations gave Serghei the confidence to be able to implement changes quickly and hassle free.
-
-Based on user feedback, a change may be made to the database like the complete removal or addition of a database entity. Without Prisma, such a change would have forced Serghei to spend more time refactoring and error handling, and less time innovating.
-
-
-
-"When it comes to the data model experimentation, handling migrations and things like that is just amazing. That you are able to add something or remove something in Prisma, and you run the migrations and Prisma will do everything by itself."
-
-
-
-### Staying flexible confidently with Prisma Client
-
-Prisma Client's TypeScript experience also proved to be crucial to development by ensuring confidence in the code after making changes.
-
-
-
-"I think it's the nature of Prisma that gives you a good way to structure things. Also because it's TypeScript, right? So you can't miss things. Your frontend application types are always in sync with what's available on the database level. That's a big, big deal. I think a key factor for scalability for the future, because you always have both ends in sync."
-
-
-
-Serghei understood the importance of selecting technologies that were going to allow him to be fast, while also maintaining scalability for the future.
-
-
-
-"We're running real science through the MVP now. And despite being a large and complex product already, the MVP still holds up. There are now not many bugs where anything crucial doesn't work because the core is really well done. And Prisma is one of the bricks of that foundation."
-
-
-
-The flexibility proved to be a major contributor to a single tech lead producing a meaningful product in just ten months.
-
-
-
-## The application's architecture
-
-In addition to Prisma, Serghei utilized several other technologies to achieve their MVP. The project structure looks like the following, with Prisma serving types to multiple apps.
-
-
-
-The **Prisma & Nexus** package includes the Prisma schema, migrations and all the generated types that are used across all apps and services. The lambdas import the Prisma client and update resources directly. This arrangement keeps the database and frontend types in sync because of Prisma Client's type-safe database access.
-
-The **Business Logic** package backed by Prisma serves the GraphQL API schema and frontend. Prisma with GraphQL ensures that only the necessary data for each peer review is returned. Writing both the API and frontend in TypeScript powers confidence when writing database access and allows for shipping feature updates faster.
-
-If there is a breaking change in the schema, TypeScript will raise errors on all the instances of the data model types, resulting in easy identification across the entire project structure and a smoother, more flexible developer experience.
-
-The MVP is already showing improved efficiencies in the journal publication workflow. Elsevier is confident they have the right technologies in place to scale on their achievements so far.
-
-## Building on Elsevier's initial success
-
-Based on initial results, Elsevier is keen to continue investing into modernizing their publication flow. They're now moving forward the product from MVP to full-scale production capable.
-
-By taking advantage of tools like Prisma, the Elsevier team can build more helpful tools to advance a greater number of scientific publications through the online reviewing flow.
-
-To find out more about how Prisma can help boost flexibility and productivity, join the [Prisma Slack community](https://slack.prisma.io/).
diff --git a/apps/blog/content/blog/enabling-cors-for-express-graphql-apollo-server-1ef999bfb38d/index.mdx b/apps/blog/content/blog/enabling-cors-for-express-graphql-apollo-server-1ef999bfb38d/index.mdx
deleted file mode 100644
index a990c7da52..0000000000
--- a/apps/blog/content/blog/enabling-cors-for-express-graphql-apollo-server-1ef999bfb38d/index.mdx
+++ /dev/null
@@ -1,162 +0,0 @@
----
-title: "Enabling CORS for Express-GraphQL & Apollo Server | Prisma"
-slug: "enabling-cors-for-express-graphql-apollo-server-1ef999bfb38d"
-date: "2017-11-22"
-authors:
- - "Nikolas Burk"
-metaTitle: "Enabling CORS for Express-GraphQL & Apollo Server | Prisma"
-metaDescription: "Learn how to enable CORS in Express-GraphQL and Apollo Server so browser clients can safely call your GraphQL API across origins."
-metaImagePath: "/enabling-cors-for-express-graphql-apollo-server-1ef999bfb38d/imgs/hero-88be8d72c611e06bf0170f1e0416f589d50262dd-720x481.jpg"
-heroImagePath: "/enabling-cors-for-express-graphql-apollo-server-1ef999bfb38d/imgs/hero-88be8d72c611e06bf0170f1e0416f589d50262dd-720x481.jpg"
-heroImageAlt: "Enabling CORS for Express-GraphQL & Apollo Server"
----
-
-Learn how to configure cross-origin resource sharing on your express-based GraphQL servers.
-
-## What is CORS?
-
-_Cross-origin resource sharing_, short [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing), is a protection mechanism for web pages, allowing the browser to safely load resources from domains that are different from the one it originally loaded the page from.
-
-As an example, say you’re accessing `https://www.prisma.io/` in your browser. The browser downloads the HTML and JavaScript for the site in order to render it for you. Now, some data to be displayed on the site actually is stored somewhere else, on a different server — a _different origin_.
-
-> Two URLs are said to have the same origin if the following three properties are identical for them: domain, protocol and port:
-> `http://localhost:3000`, `ws://localhost:3000` and `http://localhost:4000` all have **different origins**.
-> `http://localhost:3000` and `http://localhost:3000/graphql` have the **same origin**.
-
-In order for your browser to load the data from that other server, the other server needs to set `Access-Control` headers properly in order to determine its policy regarding cross-origin resource access. For example, by simply specifying `Access-Control-Allow-Origin: *`, the server indicates to the browser that it will allow CORS anywhere.
-
-## How about an example
-
-Now, imagine the following scenario. You’re starting out with a new project and for now are only developing locally on your machine. You used [`create-react-app`](https://github.com/facebookincubator/create-react-app) to bootstrap your frontend and for the backend you setup a simple [express.js](https://github.com/expressjs) server (either based on [`express-graphql`](https://github.com/graphql/express-graphql), [`graphql-yoga`](https://github.com/prismagraphql/graphql-yoga) or [`apollo-server`](https://github.com/apollographql/apollo-server)).
-
-In fact, we prepared an [example](https://github.com/nikolasburk/graphql-cors-example) that mimics this exact scenario:
-
-### Server
-
-```js
-const express = require('express')
-const bodyParser = require('body-parser')
-const cors = require('cors')
-const { graphqlExpress, graphiqlExpress } = require('apollo-server-express')
-const { makeExecutableSchema } = require('graphql-tools')
-
-const typeDefs = `
-type Query {
- hello(name: String): String!
-}
-`
-
-const resolvers = {
- Query: {
- hello: (_, { name }) => `Hello ${name || 'World'}`,
- },
-}
-
-const myGraphQLSchema = makeExecutableSchema({ typeDefs, resolvers })
-const PORT = 4000
-const app = express()
-
-// app.use(cors()) // not having cors enabled will cause an access control error
-app.use('/graphql', bodyParser.json(), graphqlExpress({ schema: myGraphQLSchema }))
-app.get('/graphiql', graphiqlExpress({ endpointURL: '/graphql' }))
-
-console.log(`Server listening on http://localhost:${PORT} ...`)
-app.listen(PORT)
-```
-> Notice that line 23 is commented out — CORS is not enabled!
-
-### Frontend
-
-```js
-import React from 'react'
-import ReactDOM from 'react-dom'
-import './index.css'
-import App from './App'
-import registerServiceWorker from './registerServiceWorker'
-import { ApolloProvider } from 'react-apollo'
-import { ApolloClient, HttpLink, InMemoryCache } from 'apollo-client-preset'
-
-const httpLink = new HttpLink({ uri: 'http://localhost:4000/graphql' })
-
-const client = new ApolloClient({
- link: httpLink,
- cache: new InMemoryCache(),
-})
-
-ReactDOM.render(
-
- ,
- document.getElementById('root'),
-)
-registerServiceWorker()
-```
-> Standard setup for using Apollo Client 2.0
-
-```js
-import React, { Component } from 'react'
-import logo from './logo.svg'
-import './App.css'
-import gql from 'graphql-tag'
-import { graphql } from 'react-apollo'
-
-class App extends Component {
- render() {
- if (this.props.data.loading) {
- return Loading
- }
- return (
-
-
- {this.props.data.hello}
-
-
- )
- }
-}
-
-export default graphql(
- gql`
- {
- hello
- }
- `,
-)(App)
-```
-> The `App` component sends a simple `hello` query using Apollo Client
-
-In your local development setup, where the React app is loaded from [`http://localhost:3000`](http://localhost:3000) and the GraphQL server is serving at [`http://localhost:4000`](http://localhost:4000)/graphql, you’ll now get an access control error if you’re trying to run the app:
-
-
-
-What exactly is the issue when CORS is not enabled? Well, CORS is in fact a _specification_ for a communication flow between client (a browser) and server. In some situations, this flow requires the server to process HTTP [OPTIONS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS) requests as can be seen from this flowchart:
-
- method ([source](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing#/media/File:Flowchart_showing_Simple_and_Preflight_XHR.svg))](/enabling-cors-for-express-graphql-apollo-server-1ef999bfb38d/imgs/1*m6QGz5tXtLt7uVapNCpBEw.png)_The CORS flow might required additional HTTP requests with the [OPTIONS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS.png) method ([source](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing#/media/File:Flowchart_showing_Simple_and_Preflight_XHR.svg))_
-
-The problem is that neither `express-graphql` nor `apollo-server` accept HTTP requests other than GET and POST — which is why the request fails in our scenario. This is also indicated by the error message we saw in the console: `OPTIONS [http://localhost:4000](http://localhost:4000) 405 (Method not allowed)`.
-
-> [Here](https://github.com/graphql/express-graphql/issues/14) is the GitHub discussion on `express-graphql` where this issue first came up**.**
-
-Luckily, the solution is very simple. As `express-graphql` and `apollo-server` are both based on [express.js](https://github.com/expressjs), you can simply use its standard [cors](/enabling-cors-for-express-graphql-apollo-server-1ef999bfb38d/imgs/cors#configuration-options) middleware to fix the issue.
-
-Uncommenting [line 23](https://github.com/nikolasburk/graphql-cors-example/blob/master/server/index.js#L23) in `server.js` will enable the cors middleware for your express server: `app.use(cors())`. Having the middleware enabled ensures your express server sets the proper HTTP header, enabling your React app to load data from it:
-
- middleware, the server sets the correct HTTP header enabling cross-origin resource sharing](/enabling-cors-for-express-graphql-apollo-server-1ef999bfb38d/imgs/1*LnVsDQuQtSl-Wt-m6DfO5g.png)_Using the [cors](https://github.com/expressjs/cors) middleware, the server sets the correct HTTP header enabling cross-origin resource sharing_
-
-## Summary
-
-CORS is an important protection mechanism preventing websites from downloading malicious resources, but from a developer standpoint [it can be a pain to properly configure it](https://devrant.com/rants/133438/i-seriously-dont-understand-cors-fml-i-tried-to-access-the-web-api-i-found-onlin).
-
-When using `express-graphql` and `apollo-server`, all you need to do is include the standard [cors](https://github.com/expressjs/cors) middleware used in express.js apps and you’re good to go:
-
-```js
-// other imports ...
-const cors = require('cors')
-
-const app = express()
-
-app.use(cors()) // enable `cors` to set HTTP response header: Access-Control-Allow-Origin: *
-app.use('/graphql', bodyParser.json(), graphqlExpress({ schema }))
-
-app.listen(PORT)
-```
\ No newline at end of file
diff --git a/apps/blog/content/blog/full-stack-typesafety-with-angular-nest-nx-and-prisma-CcMK7fbQfTWc/index.mdx b/apps/blog/content/blog/full-stack-typesafety-with-angular-nest-nx-and-prisma-CcMK7fbQfTWc/index.mdx
deleted file mode 100644
index 5f43cb3172..0000000000
--- a/apps/blog/content/blog/full-stack-typesafety-with-angular-nest-nx-and-prisma-CcMK7fbQfTWc/index.mdx
+++ /dev/null
@@ -1,621 +0,0 @@
----
-title: "Full Stack Type Safety with Angular, Nest, Nx, and Prisma"
-slug: "full-stack-typesafety-with-angular-nest-nx-and-prisma-CcMK7fbQfTWc"
-date: "2021-01-19"
-authors:
- - "Ryan Chenkie"
-metaTitle: "Applying Full Stack Type Safety with Angular, Nest, Nx & Prisma"
-metaDescription: "Learn how Angular, NestJS, Nx, and Prisma can deliver full-stack type safety from the frontend to the database in a TypeScript app."
-metaImagePath: "/full-stack-typesafety-with-angular-nest-nx-and-prisma-CcMK7fbQfTWc/imgs/meta-6edf92a2f15ffb62ed50e0da3deed2b2908d0156-2398x1208.png"
-heroImagePath: "/full-stack-typesafety-with-angular-nest-nx-and-prisma-CcMK7fbQfTWc/imgs/hero-2e21e72be724fc37acc24f269c8b6a0628ad5a18-870x438.jpg"
-heroImageAlt: "Full Stack Type Safety with Angular, Nest, Nx, and Prisma"
-tags:
- - "education"
----
-
-TypeScript really shines when we can extend type safety to all parts of our stack. In this article, we'll look at how to apply type safety to every part of a full stack Angular and NestJS app, including database access. We'll see how to share types across the stack by using an Nx monorepo.
-
-2020 was a great year for TypeScript. Usage surged, developers came to love the benefits of type safety, and the language saw adoption in many different settings.
-
-While TypeScript might be fairly new to developers who mainly work with React, Vue, Svelte, and others, it has been around for quite some time for Angular developers. Angular (version 2+) was initially authored in 2015 and was done so using TypeScript. The Angular team made an early bet on type safety, encouraging developers to write their Angular apps in TypeScript as well, even though writing them in JavaScript was an option.
-
-Many Angular developers were initially resistant. TypeScript wasn't very mature in 2015 and there was a steep learning curve. It was common to be slowed down by environment incompatabilities and bugs. All around, there was often a great deal of frustration.
-
-Fast-forward to 2021 and Angular developers have been enormously successful using TypeScript. Teams have benefited greatly from type safety over the years.
-
-While type safety for Angular applications is nothing new, it's less common for Angular developers who work across the full stack. Frameworks like NestJS have made it easy to use TypeScript in a Node environment, but one spot that has continued to lack is at the database. Several tools now exist for acheiving type-safe database access, [Prisma](https://www.prisma.io) being one of them.
-
-In this article, we'll look at how we can use the types generated by Prisma to apply type safety to all parts of an Angular and Nest ecommerce application. We'll work in an Nx monorepo so that we can easily import type across the whole stack. Let's get started!
-
-Check out the [code for the project on GitHub](https://github.com/chenkie/shirt-shop).
-
-
-
-## Create an Nx Workspace
-
-One of the easiest ways to share types between a front end and backend project is to house everything under a monorepo. [Nx Dev Tools](https://nx.dev) (created by [Nrwl](https://twitter.com/nrwl_io)) makes working with monorepos simple. Nx stipulates a set of conventions that, when followed, allow for simplicity when maintaining multiple applications under a single repository.
-
-Let's start by creating an Nx workspace for our project. We'll use the `create-nx-workspace` command to do so.
-
-In a terminal window, create a workspace with a preset of `angular`.
-
-
-
-```shell
-npx create-nx-workspace --preset=angular
-```
-
-
-An interactive prompt takes us through the setup process. Select a name for the workspace and application and then continue through the prompts.
-
-
-
-Once Nx finishes wiring up the workspace, open it up and try running the Angular application.
-
-
-
-```shell
-npm start
-```
-
-
-This command will tell Nx to serve the Angular application that was created as the workspace initialized. After it compiles, open up `localhost:4200` to make sure everything is working.
-
-
-
-## Add a NestJS Application
-
-Our front end is ready to go but we haven't yet included a project for the backend. Let's add a NestJS project to the workspace.
-
-To add our NestJS project, we first need to install the official NestJS plugin for Nx. In a new terminal window, grab the `@nrwl/nx` package from npm.
-
-
-
-```shell
-npm install -D @nrwl/nest
-```
-
-
-After installation, use the plugin to generate a NestJS project within the workspace. Since we'll only have one backend project for this example, let's just name it "api".
-
-
-
-```shell
-nx generate @nrwl/nest:application api
-```
-
-
-Once the generator finishes, we can see a new folder called `api` under the `apps` directory. This is where our NestJS app lives.
-
-The default NestJS installation comes with a single endpoint which returns a "hello world" message. Let's start the API and make sure we can access the endpoint. To start the API, target the `nx serve` command directly at the NestJS app.
-
-
-
-```shell
-nx serve api
-```
-
-
-Once the API is up and running, go to `http://localhost:3333/api` in the browser and make sure you can see the "hello world" message.
-
- and is the place where we define the shape of our database. We use it to describe the tables for our databases and their columns, the relationships between tables, and more.
-
-When we create a Prisma model, we need to select a `provider` for our datasource. The default `schema.prisma` file comes with a datasource called `db` which uses PostgreSQL as the provider.
-
-Instead of using Postgres, let's use SQLite so we can keep things simple. Switch up the `db` datasource so that uses SQLite. Point the `url` parameter to a file called `dev.db` within the filesystem.
-
-
-
-```prisma
-datasource db {
- provider = "sqlite"
- url = "file:./dev.db"
-}
-```
-
-
-**Note:** We don't need to create the `dev.db` file ourselves. Its creation will be taken care of for us in a later step.
-
-Let's now set up a simple model for our shop. To get ourselves started, let's work with a single table called `Product`. To do so, create a new `model` in the schema file and give it some fields.
-
-
-
-```prisma
-model Product {
- id String @id @default(cuid())
- name String
- description String
- image String
- price Int
- sku String
-}
-```
-
-
-The `id` field is marked as the primary key via the `@id` directive. We're also setting its default value to be a collision-resistant unique ID. The other fields and fairly straight-forward in their purpose.
-
-With the model in place, let's run our first migration so that the filesystem database file gets created and populated with our `Product` table.
-
-
-
-```shell
-npx prisma migrate dev --preview-feature
-```
-
-
-An interactive prompt will ask for the name of the migration. Call it whatever you like, something like `init` works fine.
-
-After the migration completes, a `dev.db` file is created in the `prisma` directory, along with a `migrations` directory. It's within the `migrations` directory that all of the SQL that's used to perform our database migrations is stored. Since these files are raw SQL, we have the opportunity to adjust them before they operate on our databases. Read the [migrate docs](https://www.prisma.io/docs/concepts/components/prisma-migrate) to find out more about how you can customize the migration behavior.
-
-## View the Database with Prisma Studio and Seed Some Data
-
-With the database in place and populated with a table, we can now take a look at it and add some data using [Prisma Studio](https://www.prisma.io/docs/concepts/components/prisma-studio). Prisma Studio is a GUI for viewing and managing our databases and is available in-browser or via a [desktop app](https://github.com/prisma/studio/releases).
-
-In a new terminal window, use the Prisma CLI to fire up Prisma Studio.
-
-
-
-```shell
-npx prisma studio
-```
-
-
-Running this command will open Prisma Studio. In the browser, it opens at `localhost:5555`.
-
-
-
-We can use Prisma Studio to add data to the database manually. This isn't a great approach if we have a lot of data to seed, but it's useful if we want to add a few records to test with.
-
-Add as many rows as you like and input data for them. If you would like to work with the data seen in this article, you can grab it in [this gist](https://gist.github.com/chenkie/9bd80bc2767e72f71582a02e05c7f853).
-
-
-
-Next, save the changes. IDs for each row will automatically be generated.
-
-
-
-We now have all the pieces of our stack in place! We're ready to start writing some code to surface the data from the API and call for it from the Angular app.
-
-## Create a Products Controller for the API
-
-The data in our database is ready to go. What we need now is an endpoint we can call to retreive it. To make this happen, we'll create a library for our NestJS controller and a service that we can reach into to expose an endpoint that responds to `GET` requests.
-
-Use the NestJS Nx plugin to generate a new library called `products`. Include a controller and a service within.
-
-
-
-```shell
-nx generate @nrwl/nest:library products --controller --service
-```
-
-
-We'll create a method in the service to reach into our database to get the data. Then, in the controller, we'll expose a `GET` endpoint which uses the service to get that data and return it to the client.
-
-Let's start by building out the database query within the service. This is the first spot we'll see Prisma's types really shine!
-
-Within `products.service.ts`, import `PrismaClient`, create an instance of it, and expose a `public` method to query for the data.
-
-
-
-```ts
-// libs/products/src/lib/products.service.ts
-
-import { Injectable } from '@nestjs/common'
-import { PrismaClient, Product } from '@prisma/client'
-
-const prisma = new PrismaClient()
-
-@Injectable()
-export class ProductService {
- public getProducts(): Promise {
- return prisma.product.findMany()
- }
-}
-```
-
-
-We're importing two things from `@prisma/client` here: `PrismaClient` and `Product`.
-
-`PrismaClient` is what we use to create an instance of our database client and it exposes methods and properties that are useful for querying the database.
-
-The `Product` import is the TypeScript type that was generated for us by Prisma when we ran our database migrations. This type has the shape of our `Product` table and is useful for informing consumers of the `getProducts` method about what it can expect the returned data to look like.
-
-**Note:** We're instantiating `PrismaClient` directly within our `ProductsService` file here. In a real world application, we should instead create a dedicated file for this instance. That way, we wouldn't need to instantiate it multiple times.
-
-Let's now work within the controller to make a call to `getProducts` to fetch the data. Open up `products.controller.ts` and add a method which responds to `GET` requests.
-
-
-
-```ts
-// libs/products/src/lib/products.controller.ts
-
-import { Controller, Get } from '@nestjs/common'
-import { ProductsService } from './products.service'
-
-@Controller('products')
-export class ProductController {
- constructor(private productService: ProductsService) {}
-
- @Get()
- public getProducts() {
- return this.productService.getProducts()
- }
-}
-```
-
-
-We've applied the `getProducts` method with the `@Get` decorator which means when we make a `GET` request to `/products`, the method will be run. The method itself reaches into the service to get the data.
-
-Before we can test out this endpoint, we need to add `ProductsController` and `ProductsService` in the main module for the `api`.
-
-Open up `app.module.ts` found within `apps/api/src/app` and import `ProductsController` and `ProductsService`. Then include them in the `controllers` and `providers` arrays respectively.
-
-
-
-```ts
-// apps/api/src/app/app.module.ts
-
-import { Module } from '@nestjs/common'
-
-import { AppController } from './app.controller'
-import { AppService } from './app.service'
-import { ProductsController, ProductsService } from '@shirt-shop/products'
-
-@Module({
- imports: [],
- controllers: [AppController, ProductsController],
- providers: [AppService, ProductsService],
-})
-export class AppModule {}
-```
-
-
-Now head over to the browser and test it out by going to `http://localhost:3333/api/products`.
-
-
-
-It may not be very apparent at this point, but our endpoint has a layer of type safety applied to it that can help us out if we need to manipulate and/or modify data before it is returned to the client. For example, if we need to map over our data and get access to its properties, we now have full autocompletion enabled when we do so. This occurs because we told the `getProducts` method in the `ProductsService` that the return type is a `Promise` that resolves with an array of type `Product`.
-
-
-
-Now that we have the API working, let's wire up the Angular application to make a call for this data and display it!
-
-### Enable CORS
-
-When we create our NestJS API, we have the option of setting up a proxy for our frontend applications such that both the front end and backend get served over the same port. This is useful for situations where we don't want to have separate domains for the two sides of the app.
-
-Instead of setting up a proxy for this demo, we can instead enable CORS on the backend so that our front end can make calls to it. We won't need this until later, but let's get it set up and out of the way now.
-
-Open up `apps/api/src/main.ts` and add a call to `app.enableCors();
-
-
-
-```ts
-// apps/api/src/main.ts
-
-import { Logger } from '@nestjs/common'
-import { NestFactory } from '@nestjs/core'
-
-import { AppModule } from './app/app.module'
-
-async function bootstrap() {
- const app = await NestFactory.create(AppModule)
- const globalPrefix = 'api'
- app.setGlobalPrefix(globalPrefix)
- app.enableCors()
- const port = process.env.PORT || 3333
- await app.listen(port, () => {
- Logger.log('Listening at http://localhost:' + port + '/' + globalPrefix)
- })
-}
-
-bootstrap()
-```
-
-
-## Create a UI Module for the Angular App
-
-We could just start building components directly within the `shirt-shop` app in our Nx workspace, but that would be against the advice that Nx gives about how to manage code in our monorepos. Instead, let's create a new module that will be dedicated to components that make up our UI.
-
-Head over to the command line and create a new module. Follow the prompts to select the desired CSS variety.
-
-
-
-```shell
-nx generate @nrwl/angular:lib ui
-```
-
-
-Once the module is in place, we can create a component to list our products as well as a service to make the API call to get the data.
-
-Let's start by generating a component.
-
-
-
-```shell
-nx g component products --project=ui --export
-```
-
-
-Using the `--project=ui` flag tells Nx that we want to put this component in our newly-created `ui` module. We can see the result under `/libs/ui/src/lib/products`.
-
-Let's now create a service.
-
-
-
-```shell
-nx g service product --project=ui --export
-```
-
-
-With the new `UiModule` in place, we now need to add it to the `imports` array in our `app.module.ts` file for the frontend.
-
-
-
-```ts
-// apps/shirt-shop/src/app/app.module.ts
-
-import { BrowserModule } from '@angular/platform-browser'
-import { NgModule } from '@angular/core'
-
-import { AppComponent } from './app.component'
-import { UiModule } from '@shirt-shop/ui'
-
-@NgModule({
- declarations: [AppComponent],
- imports: [BrowserModule, UiModule],
- providers: [],
- bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
-
-
-**Note:** If you get any errors saying that `@shirt-shop/ui` cannot be found, try restarting the front end by stopping that process and running `nx serve` again.
-
-## Add an API Call to the Service
-
-We'll use Angular's built-in `HttpClientModule` to get access to an HTTP client for making requests to the API. To get started, let's import the appropriate module. The place to do this is within the `ui.module.ts` file in our new `UiModule`.
-
-
-
-```ts
-// libs/ui/src/lib/ui.module.ts
-
-import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
-import { ProductsComponent } from './products/products.component'
-import { HttpClientModule } from '@angular/common/http'
-
-@NgModule({
- imports: [CommonModule, HttpClientModule],
- declarations: [ProductsComponent],
- exports: [ProductsComponent],
-})
-export class UiModule {}
-```
-
-
-We can now import Angular's `HttpClient` within our `ProductService` and make calls with it.
-
-
-
-```ts
-// libs/ui/src/lib/product.service.ts
-
-import { HttpClient } from '@angular/common/http'
-import { Injectable } from '@angular/core'
-import { Product } from '@prisma/client'
-import { Observable } from 'rxjs'
-
-@Injectable({
- providedIn: 'root',
-})
-export class ProductService {
- private API_URL: string = 'http://localhost:3333/api'
-
- constructor(private readonly http: HttpClient) {}
-
- public getProducts(): Observable {
- {
- return this.http.get(`${this.API_URL}/products`)
- }
- }
-}
-```
-
-
-Notice that we're using the same `Product` type that gets exported from `@prisma/client` here within our `ProductService` that was used on the backend in the `ProductsController`. This is a great illustration of how we can benefit from using the same types across our whole stack. When we use the `getProducts` method from this service, we'll now have type safety applied.
-
-## Build Out the Products Component
-
-We're now ready to add some structure and style to our `ProductsComponent` so we can display the products to our users.
-
-Let's start by adding some CSS that will style our component.
-
-Open up `libs/ui/src/lib/products/product.component.css` and add the following styles:
-
-
-```
-/* libs/ui/src/lib/products/product.component.css */
-
-:host {
- display: grid;
- gap: 40px;
- grid-template-columns: repeat(3, 33% [col-start]);
-}
-
-.product-card {
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
- background-color: #fff;
- border-radius: 15px;
- padding: 15px;
-}
-
-.product-card img {
- border-radius: 15px;
- max-width: 100%;
- height: 200px;
- display: block;
- margin: 0 auto;
-}
-
-.product-name {
- font-weight: bold;
- font-size: 22px;
-}
-
-.product-description {
- color: rgb(122, 122, 122);
-}
-
-.product-price {
- font-weight: bold;
- font-size: 24px;
-}
-
-.add-to-cart-button {
- background: rgb(49, 175, 255);
- background: linear-gradient(90deg, rgba(49, 175, 255, 1) 0%, rgba(0, 123, 252, 1) 100%);
- padding: 10px 20px;
- border-radius: 30px;
- border: none;
- color: rgb(219, 233, 248);
- cursor: pointer;
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-}
-```
-
-
-Next, open up `libs/ui/src/lib/products/product.component.html` and add the structure for products to be displayed..
-
-
-
-```html
-
-
- ![]()
- {{ product.name }}
- {{ product.description }}
- {{ product.price | currency }}
-
-
-
-```
-
-
-Finally, we need to add a method to the component class which uses the `ProductService` to get the data. We'll then put the result on the `$products` observable that we've already stubbed out in our template above.
-
-
-
-```ts
-// libs/ui/src/lib/products/products.component.ts
-
-import { Component, OnInit } from '@angular/core'
-import { ProductService } from '../product.service'
-import { Observable } from 'rxjs'
-import { Product } from '@prisma/client'
-
-@Component({
- selector: 'shirt-shop-products',
- templateUrl: './products.component.html',
- styleUrls: ['./products.component.css'],
-})
-export class ProductsComponent implements OnInit {
- public $products: Observable
-
- constructor(public productService: ProductService) {}
-
- ngOnInit(): void {
- this.$products = this.productService.getProducts()
- }
-}
-```
-
-
-This is another spot where we're using our `Product` type from `@prisma/client` to give ourselves type safety. Applying this type directly to the `$products` observable means that we can get autocompletion in our Angular templates.
-
-
-
-With our component in place, we're now ready to call it from the `shirt-shop` app and display the results!
-
-Open up `apps/shirt-shop/src/app/app.component.html` and include the `Products` component.
-
-
-
-```html
-Welcome to Shirt Shop!
- {
- return prisma.product.create({
- data,
- })
- }
-}
-```
-
-
-The `createProduct` method takes in some data which is type-hinted to abide by the `Product` model from our Prisma schema. The returned result is a single `Product` that gets resolved from a `Promise`.
-
-It should be noted that just type-hinting our `data` parameter here doesn't do anything to add real validation to this endpoint. For data validation at the endpoint, we need to use [Validation Pipes](https://docs.nestjs.com/techniques/validation) from NestJS.
-
-## Wrapping Up
-
-TypeScript has come a long way since its early days and early adoption in the Angular community. Using TypeScript on both the frontend and backend bodes well for developer experience and confidence. Applying type safety to database access goes one step further in providing teams large and small with a slew of benefits. Wrapping the whole application up in a monorepo like those provided by Nx gives us an easy way of reusing code (including type definitions) across the whole stack.
-
-If you'd like to go even further with Prisma, [check out the docs](https://www.prisma.io/docs), follow us on [X/Twitter](https://pris.ly/x), and join our [Slack community](https://slack.prisma.io/)!
-
diff --git a/apps/blog/content/blog/fullstack-nextjs-graphql-prisma-2-fwpc6ds155/index.mdx b/apps/blog/content/blog/fullstack-nextjs-graphql-prisma-2-fwpc6ds155/index.mdx
deleted file mode 100644
index 7ffd894f53..0000000000
--- a/apps/blog/content/blog/fullstack-nextjs-graphql-prisma-2-fwpc6ds155/index.mdx
+++ /dev/null
@@ -1,1225 +0,0 @@
----
-title: "Fullstack App With TypeScript, PostgreSQL, Next.js, Prisma & GraphQL: GraphQL API"
-slug: "fullstack-nextjs-graphql-prisma-2-fwpc6ds155"
-date: "2021-09-27"
-authors:
- - "Mahmoud Abdelwahab"
- - "Alex Ruheni"
-metaTitle: "Fullstack app with TypeScript, Next.js, Prisma & GraphQL - GraphQL API"
-metaDescription: "Learn how to build a fullstack app using TypeScript, PostgreSQL, Next.js, GraphQL and Prisma. In this article you are going to create a GraphQL API'"
-metaImagePath: "/fullstack-nextjs-graphql-prisma-2-fwpc6ds155/imgs/hero-3c25e8ccea9b86c6d7a625f95cd6b42f76c8c5e7-1269x714.png"
-heroImagePath: "/fullstack-nextjs-graphql-prisma-2-fwpc6ds155/imgs/hero-3c25e8ccea9b86c6d7a625f95cd6b42f76c8c5e7-1269x714.png"
-heroImageAlt: "Fullstack App With TypeScript, PostgreSQL, Next.js, Prisma & GraphQL: GraphQL API"
-series: fullstack-nextjs-graphql-prisma
-seriesIndex: 2
-
-tags:
- - "education"
----
-
-This article is the second part of a course where you build a fullstack app with Next.js, GraphQL, TypeScript, Prisma, and PostgreSQL. In this article, you will create the GraphQL API and interact with it on the frontend.
-
-## Table of contents
-
-- [Introduction](#introduction)
- - [Development environment](#development-environment)
-- [Clone the repository](#clone-the-repository)
-- [Seeding the database](#seeding-the-database)
- - [A look at the project structure and dependencies](#a-look-at-the-project-structure-and-dependencies)
-- [Building APIs the traditional way: REST](#building-apis-the-traditional-way-rest)
-- [REST APIs and their drawbacks](#rest-apis-and-their-drawbacks)
- - [Each REST API is different](#each-rest-api-is-different)
- - [Overfetching and underfetching](#overfetching-and-underfetching)
- - [REST APIs are not typed](#rest-apis-are-not-typed)
-- [GraphQL, an alternative to REST](#graphql-an-alternative-to-rest)
- - [Defining a schema](#defining-a-schema)
- - [Defining object types and fields](#defining-object-types-and-fields)
- - [Defining Queries](#defining-queries)
- - [Defining mutations](#defining-mutations)
- - [Defining the implementation of queries and mutations](#defining-the-implementation-of-queries-and-mutations)
-- [Building the GraphQL API](#building-the-graphql-api)
- - [Defining the schema of the app](#defining-the-schema-of-the-app)
- - [Defining resolvers](#defining-resolvers)
- - [Creating the GraphQL endpoint](#creating-the-graphql-endpoint)
- - [Sending queries using GraphiQL](#sending-queries-using-graphiql)
- - [Initialize Prisma Client](#initialize-prisma-client)
- - [Query the database using Prisma](#query-the-database-using-prisma)
-- [The flaws with our current GraphQL setup](#the-flaws-with-our-current-graphql-setup)
-- [Code-first GraphQL APIs using Pothos](#code-first-graphql-apis-using-pothos)
- - [Defining the schema using Pothos](#defining-the-schema-using-pothos)
- - [Defining queries using Pothos](#defining-queries-using-pothos)
-- [Client-side GraphQL queries](#client-side-graphql-queries)
- - [Setting up Apollo Client in Next.js](#setting-up-apollo-client-in-nextjs)
- - [Sending requests using `useQuery`](#sending-requests-using-usequery)
-- [Pagination](#pagination)
- - [Pagination at the database level](#pagination-at-the-database-level)
- - [Pagination in GraphQL](#pagination-in-graphql)
- - [Modifying the GraphQL schema](#modifying-the-graphql-schema)
- - [Updating the resolver to return paginated data from the database](#updating-the-resolver-to-return-paginated-data-from-the-database)
- - [Pagination on the client using `fetchMore()`](#pagination-on-the-client-using-fetchmore)
-- [Summary and Next-steps](#summary-and-next-steps)
-
-## Introduction
-
-In this course you will learn how to build "awesome-links", a fullstack app where users can browse through a list of curated links and bookmark their favorite ones.
-
-In [the last part](/fullstack-nextjs-graphql-prisma-oklidw1rhw), you used Prisma to set up the database layer. By the end of this part, you will learn about GraphQL: what it is and how you can use it to build an API in a Next.js app.
-
-### Development environment
-
-To follow along with this tutorial, you need to have Node.js and the [GraphQL extension](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql) installed. You will also need to have a running PostgreSQL instance.
-
-> **Note**: you can set up PostgreSQL [locally](https://www.prisma.io/dataguide/postgresql/setting-up-a-local-postgresql-database) or a hosted instance on [Heroku](https://dev.to/prisma/how-to-setup-a-free-postgresql-database-on-heroku-1dc1). Note that you will need a remote database for the deployment step at the end of the course.
-
-## Clone the repository
-
-You can find the [complete source code](https://github.com/m-abdelwahab/awesome-links) for the course on GitHub.
-
-> **Note**: Each article has a corresponding branch. This way, you can follow along as you go through it. By checking out the part-2 branch, you have the same starting point as this article.
-
-To get started, navigate into the directory of your choice and run the following command to clone the repository.
-
-```shell
-git clone -b part-2 https://github.com/m-abdelwahab/awesome-links.git
-```
-You can now navigate into the cloned directory, install the dependencies and start the development server:
-
-```shell
-cd awesome-links
-npm install
-npm run dev
-```
-The app will be running at [`http://localhost:3000/`](http://localhost:3000/) and you will see four items. The data is hardcoded and comes from the `/data/links.ts` file.
-
-
-
-## Seeding the database
-
-After setting up a PostgreSQL database, rename the `env.example` file to `.env` and set the connection string for your database. After that, run the following command to create a migration and the tables in your database:
-
-```shell
-npx prisma migrate dev --name init
-```
-If `prisma migrate dev` did not trigger the seed step, run the following command to seed the database:
-
-```shell
-npx prisma db seed
-```
-This command will run the `seed.ts` script, located in the `/prisma` directory. This script adds four links and one user to your database using Prisma Client.
-
-### A look at the project structure and dependencies
-
-You will see the following folder structure
-```
-awesome-links/
-┣ components/
-┃ ┣ Layout/
-┃ ┗ AwesomeLink.tsx
-┣ data/
-┃ ┗ links.ts
-┣ pages/
-┃ ┣ _app.tsx
-┃ ┣ about.tsx
-┃ ┗ index.tsx
-┣ prisma/
-┃ ┣ migrations/
-┃ ┣ schema.prisma
-┃ ┗ seed.ts
-┣ public/
-┣ styles/
-┃ ┗ tailwind.css
-┣ .env.example
-┣ .gitignore
-┣ next-env.d.ts
-┣ package-lock.json
-┣ package.json
-┣ postcss.config.js
-┣ README.md
-┣ tailwind.config.js
-┗ tsconfig.json
-```
-This is a Next.js application with TailwindCSS set up along with Prisma.
-
-In the `pages` directory, you will find three files:
-
-- `_app.tsx`: the global `App` component, which is used to add a navigation bar that persists between page changes and to add global CSS.
-- `about.tsx`: this file exports a React component which renders a page located at http://localhost:3000/about.
-- `index.tsx`: the home page, which contains a list of links. These links are hardcoded in the `/data/links.ts` file.
-
-Next, you will find a `prisma` directory which contains the following files:
-
-- `schema.prisma`: the schema of our database, written in PSL (Prisma Schema Language). If you want to learn how the database was modeled for this app, check out the [last part](https://www.prisma.io/blog/fullstack-nextjs-graphql-prisma-oklidw1rhw) of the course.
-- `seed.ts`: script that will [seed the database](https://www.prisma.io/docs/guides/migrate/seed-database) with dummy data.
-
-## Building APIs the traditional way: REST
-
-
-
-```ts
-// /pages/api/graphql.ts
-import { createYoga } from 'graphql-yoga'
-import type { NextApiRequest, NextApiResponse } from 'next'
-import { schema } from '../../graphql/schema'
-
-export default createYoga<{
- req: NextApiRequest
- res: NextApiResponse
-}>({
- schema,
- graphqlEndpoint: '/api/graphql'
-})
-
-export const config = {
- api: {
- bodyParser: false
- }
-}
-```
-
-
-
-Make sure the server is running and navigate to `http://localhost:3000/api/graphql`. You will be able to send a query with an `ok` field, which will return `true`
-
-
-
-### Defining the schema using Pothos
-
-The first step is defining a `Link` object type using Pothos. Go ahead and create a `/graphql/types/Link.ts` file, add the following code:
-
-```ts
-// /graphql/types/Link.ts
-import { builder } from "../builder";
-
-builder.prismaObject('Link', {
- fields: (t) => ({
- id: t.exposeID('id'),
- title: t.exposeString('title'),
- url: t.exposeString('url'),
- description: t.exposeString('description'),
- imageUrl: t.exposeString('imageUrl'),
- category: t.exposeString('category'),
- users: t.relation('users')
- })
-})
-```
-Since you're using the Pothos' Prisma plugin, the `builder` instance provides utility methods for defining your GraphQL schema such as [`prismaObject`](https://pothos-graphql.dev/docs/plugins/prisma#creating-types-with-builderprismaobject).
-
-`prismaObject` accepts two arguments:
-
-- `name`: The name of the model in the Prisma schema you would like to _expose_.
-- `options`: The options for defining the type you're exposing such as the description, fields, etc.
-
-> **Note**: You can use CTRL + Space to invoke your editor's intellisense and view the available arguments.
-
-The `fields` property is used to define the fields you would like to make available from your Prisma schema using the ["expose"](https://pothos-graphql.dev/docs/guide/fields#exposing-fields-from-the-underlying-data) functions. For this tutorial, we'll expose the `id`, `title`, `url`, `imageUrl`, and `category` fields.
-
-The `t.relation` method is used to define the relation fields you would wish to expose from your Prisma schema.
-
-Now create a new `/graphql/types/User.ts` file and add the following to code to create the `User` type:
-
-```ts
-// /graphql/types/User.ts
-import { builder } from "../builder";
-
-builder.prismaObject('User', {
- fields: (t) => ({
- id: t.exposeID('id'),
- email: t.exposeString('email', { nullable: true, }),
- image: t.exposeString('image', { nullable: true, }),
- role: t.expose('role', { type: Role, }),
- bookmarks: t.relation('bookmarks'),
- })
-})
-
-const Role = builder.enumType('Role', {
- values: ['USER', 'ADMIN'] as const,
-})
-```
-Since the `email` and `image` fields in the Prisma schema are nullable, pass the `nullable: true` as a second argument to the expose method.
-
-The default type for the `role` field when "exposing" it's type from the generated schema. In the above example, you've defined an explicit enum type called `Role` which is then used to resolve the `role`'s field type.
-
-To make the defined object types for the schema available in the GraphQL schema, add the imports to the types you just created in the `graphql/schema.ts` file:
-
-```ts
-diff
-// graphql/schema.ts
-+import "./types/Link"
-+import "./types/User"
-import { builder } from "./builder";
-
-export const schema = builder.toSchema()
-```
-### Defining queries using Pothos
-
-In the `graphql/types/Link.ts` file, add the following code below the `Link` object type definition:
-
-```ts
-// graphql/types/Link.ts
-// code above unchanged
-
-// 1.
-builder.queryField("links", (t) =>
-// 2.
- t.prismaField({
- // 3.
- type: ['Link'],
- // 4.
- resolve: (query, _parent, _args, _ctx, _info) =>
- prisma.link.findMany({ ...query })
- })
-)
-```
-In the above snippet:
-1. Defines a query type called `links`.
-1. Defines the field that will resolve to the generated Prisma Client types.
-1. Specifies the field that Pothos will use to resolve the field. In this case, it resolves to an array of the `Link` type
-1. Defines the logic for the query.
-
-The `query` argument in the resolver function adds a `select` or `include` to your query to resolve as many relation fields as possible in a single request.
-
-Now if you go back to the GraphiQL, you will be able to send a query that returns all links from the database.
-
-
-
-## Client-side GraphQL queries
-
-For this project, you will be using Apollo Client. You can send a regular HTTP POST request to interact with the GraphQL API you just built. However, you get a lot of benefits when using a GraphQL Client instead.
-
-Apollo Client takes care of requesting and caching your data, as well as updating your UI. It also includes features for query batching, query deduplication, and pagination.
-
-### Setting up Apollo Client in Next.js
-
-
-
-
-+
- )
-}
-
-export default MyApp
-```
-You are wrapping the global `App` component with the Apollo Provider so all of the project's components can send GraphQL queries.
-
-> **Note**: Next.js supports different data fetching strategies. You can fetch data server-side, client-side, or at build-time. To support pagination, you need to fetch data client-side.
-
-### Sending requests using `useQuery`
-
-To load data on your frontend using Apollo client, update the `/pages/index.tsx` file to use the following code:
-
-```tsx
-// /pages/index.tsx
-import Head from 'next/head'
-import { gql, useQuery } from '@apollo/client'
-import type { Link } from '@prisma/client'
-
-const AllLinksQuery = gql`
- query {
- links {
- id
- title
- url
- description
- imageUrl
- category
- }
- }
-`
-
-export default function Home() {
- const { data, loading, error } = useQuery(AllLinksQuery)
-
- if (loading) return Loading...
- if (error) return Oh no... {error.message}
-
- return (
-
-
- Awesome Links
-
-
-
-
-
- {data.links.map((link: Link) => (
- -
-
-
- {link.category}
- {link.title}
- {link.description}
-
- {link.url.replace(/(^\w+:|^)\/\//, '')}
-
-
-
-
- ))}
-
-
-
- )
-}
-```
-You are using the `useQuery` hook to send queries to the GraphQL endpoint. This hook has a required parameter of a GraphQL query string. When the component renders, `useQuery` returns an object which contains three values:
-
-- `loading`: a boolean that determines whether or not the data has been returned.
-- `error`: an object that contains the error message in case an error occurs after sending the query.
-- `data`: contains the data returned from the API endpoints.
-
-After you save the file and you navigate to `http://loclahost:3000`, you will see a list of links which are fetched from the database.
-
-## Pagination
-
-`AllLinksQuery` returns all the links you have in the database. As the app grows and you add more links, you will have a large API response that will take a long time to load. Also the database query sent by the resolver will become slower, since you are returning the links in the database using the `prisma.link.findMany()` function.
-
-A common approach to improve performance is to add support for **pagination**. This is when you split a large data set into smaller chunks that can be requested as needed.
-
-There are different ways to implement pagination. You can do numbered pages, for example like Google search results,
-or you can do infinite scrolling like Twitter's feed.
-
-.
-
-
-
-- Cursor-based pagination: you use a cursor to bookmark a location in a result set. On subsequent requests you can then jump straight to that saved location. Similar to how you can access an array by its index.
-
-The cursor must be a unique, sequential column - such as an ID or a timestamp. This approach is more efficient than offset-based pagination and will be the one you use in this tutorial.
-
-
-
-### Pagination in GraphQL
-
-To make the GraphQL API support pagination, you need to introduce [Relay Cursor Connections Specification](https://relay.dev/graphql/connections.htm) to the GraphQL schema. This is a specification for how a GraphQL server should expose paginated data.
-
-Here is what the paginated query of `allLinksQuery` will look like:
-
-```graphql
-query allLinksQuery($first: Int, $after: ID) {
- links(first: $first, after: $after) {
- pageInfo {
- endCursor
- hasNextPage
- }
- edges {
- cursor
- node {
- id
- imageUrl
- title
- description
- url
- category
- }
- }
- }
-}
-```
-The query takes two arguments, `first` and `after`:
-
-- `first`: an `Int` that specifies how many items you want the API to return.
-- `after`: a `ID` argument that bookmarks the last item in a result set, this is the cursor.
-
-This query returns an object containing two fields, `pageInfo` and `edges`:
-
-- `pageInfo`:an object that helps the client determine if there is more data to be fetched. This object contains two fields, `endCursor` and `hasNextPage`:
- - `endCursor`: the cursor of the last item in a result set. This cursor is of type `String`
- - `hasNextPage`: a boolean returned by the API that lets the client know if there are more pages that can be fetched.
-- `edges` is a an array of objects, where each object has a `cursor` and a `node` fields. The `node` field here returns the `Link` object type.
-
-You will implement one-way pagination, where some links are requested when the page first loads, then the user can fetch more by clicking a button.
-
-{/* */}
-
-Alternatively, you can make this request as the user reaches the end of the page when scrolling.
-
-The way this works is that you fetch some data as the page first loads. Then after clicking a button, you send a second request to the API which includes how many items you want returned and a cursor. The data is then returned and displayed on the client.
-
-
-
-> **Note**: an example of two-way pagination is a chat app like Slack, where you can load messages by going forwards or backwards.
-
-### Modifying the GraphQL schema
-
-Pothos provides a plugin for handling relay-style cursor-pagination with nodes, connections, and other helpful utilities
-
-Install the plugin with the following command:
-
-```sh
-npm install @pothos/plugin-relay
-```
-Update the `graphql/builder.ts` to include the relay plugin.
-
-```ts
-diff
-// graphql/builder.ts
-import SchemaBuilder from "@pothos/core";
-import PrismaPlugin from '@pothos/plugin-prisma';
-import prisma from "../lib/prisma";
-import type PrismaTypes from '@pothos/plugin-prisma/generated';
-+import RelayPlugin from '@pothos/plugin-relay';
-
-
-export const builder = new SchemaBuilder<{
- PrismaTypes: PrismaTypes
-}>({
-- plugins: [PrismaPlugin],
-+ plugins: [PrismaPlugin, RelayPlugin],
-+ relayOptions: {},
- prisma: {
- client: prisma,
- }
-})
-
-builder.queryType({
- fields: (t) => ({
- ok: t.boolean({
- resolve: () => true,
- }),
- }),
-});
-```
-### Updating the resolver to return paginated data from the database
-
-To use cursor-based pagination make the following update to the `links` query:
-
-```ts
-diff
-// ./graphql/types/Link.ts
-// code remains unchanged
-
-builder.queryField('links', (t) =>
-- t.prismaField({
-+ t.prismaConnection({
-- type: ['Link'],
-+ type: 'Link',
-+ cursor: 'id',
- resolve: (query, _parent, _args, _ctx, _info) =>
- prisma.link.findMany({ ...query })
- })
-)
-```
-The `prismaConnection` method is used to create a `connection` field that also pre-loads the data inside that connection.
-
-
-
-```ts
-// /graphql/types/Link.ts
-import { builder } from "../builder";
-
-builder.prismaObject('Link', {
- fields: (t) => ({
- id: t.exposeID('id'),
- title: t.exposeString('title'),
- url: t.exposeString('url'),
- description: t.exposeString('description'),
- imageUrl: t.exposeString('imageUrl'),
- category: t.exposeString('category'),
- users: t.relation('users')
- }),
-})
-
-
-builder.queryField('links', (t) =>
- t.prismaConnection({
- type: 'Link',
- cursor: 'id',
- resolve: (query, _parent, _args, _ctx, _info) =>
- prisma.link.findMany({ ...query })
- })
-)
-```
-
-
-
-Here is a diagram that summarizes how pagination works on the server:
-
-
-
-### Pagination on the client using `fetchMore()`
-
-Now that the API supports pagination, you can fetch paginated data on the client using Apollo Client.
-
-The `useQuery` hook returns an object containing `data`, `loading` and `errors`. However, `useQuery` also returns a `fetchMore()` function, which is used to handle pagination and updating the UI when a result is returned.
-Navigate to the `/pages/index.tsx` file and update it to use the following code to add support for pagination:
-
-```tsx
-// /pages/index.tsx
-import Head from "next/head";
-import { gql, useQuery, useMutation } from "@apollo/client";
-import { AwesomeLink } from "../components/AwesomeLink";
-import type { Link } from "@prisma/client";
-
-const AllLinksQuery = gql`
- query allLinksQuery($first: Int, $after: ID) {
- links(first: $first, after: $after) {
- pageInfo {
- endCursor
- hasNextPage
- }
- edges {
- cursor
- node {
- imageUrl
- url
- title
- category
- description
- id
- }
- }
- }
- }
-`;
-
-function Home() {
- const { data, loading, error, fetchMore } = useQuery(AllLinksQuery, {
- variables: { first: 2 },
- });
-
-
- if (loading) return Loading...
;
- if (error) return Oh no... {error.message}
;
-
- const { endCursor, hasNextPage } = data.links.pageInfo;
-
- return (
-
-
- Awesome Links
-
-
-
-
- {data?.links.edges.map(({ node }: { node: Link }) => (
-
- You've reached the end!{" "}
-
- )}
-
-
- );
-}
-
-export default Home;
-```
-You are first passing a `variables` object to the `useQuery` hook, which contains a key called `first` with a value of `2`. This means you will be fetching two links. You can set this value to any number you want.
-
-The `data` variable will contain the data returned from the initial request to the API.
-
-You are then destructuring the `endCursor` and `hasNextPage` values from the `pageInfo` object.
-
-If `hasNextPage` is `true`, we will show a button that has an `onClick` handler. This handler returns a function that calls the `fetchMore()` function, which receives an object with the following fields:
-
-- A`variables` object that takes the `endCursor` returned from the initial data.
-- `updateQuery` function, which is responsible for updating the UI by combining the previous results with the results returned from the second query.
-
-If `hasNextPage` is `false`, it means there are no more links that can be fetched.
-
-If you save and your app is running, you should be able to fetch paginated data from your database.
-
-## Summary and Next-steps
-
-Congratulations! You successfully completed the second part of the course! If you run into any issues or have any questions, feel free to reach out in [our Slack community](https://slack.prisma.io).
-
-In this part, you learned about:
-
-- The advantages of using GraphQL over REST
-- How to build a GraphQL API using SDL
-- How to build a GraphQL API using Pothos and the benefits it offers
-- How to add support for pagination in your API and how to send paginated query from the client
-
-In [the next part](/fullstack-nextjs-graphql-prisma-3-clxbrcqppv) of the course, you will:
-
-- Add authentication using Auth0 to secure the API endpoint, this way, only logged in users can view the links
-- Create a mutation so that a logged-in user can bookmark a link
-- Create an admin-only route for creating links
-- Set up AWS S3 to handle file uploads
-- Add a mutation to create links as an admin
-
diff --git a/apps/blog/content/blog/fullstack-nextjs-graphql-prisma-3-clxbrcqppv/index.mdx b/apps/blog/content/blog/fullstack-nextjs-graphql-prisma-3-clxbrcqppv/index.mdx
deleted file mode 100644
index 99ed0327e6..0000000000
--- a/apps/blog/content/blog/fullstack-nextjs-graphql-prisma-3-clxbrcqppv/index.mdx
+++ /dev/null
@@ -1,907 +0,0 @@
----
-title: "Fullstack App With TypeScript, PostgreSQL, Next.js, Prisma & GraphQL: Authentication"
-slug: "fullstack-nextjs-graphql-prisma-3-clxbrcqppv"
-date: "2022-01-28"
-authors:
- - "Mahmoud Abdelwahab"
- - "Alex Ruheni"
-metaTitle: "Fullstack app with TypeScript, Next.js, Prisma & GraphQL - Authentication"
-metaDescription: "Learn how to build a fullstack app using TypeScript, PostgreSQL, Next.js, GraphQL, and Prisma. In this article, you will learn how to add authentication and authorization to your application using Auth0"
-metaImagePath: "/fullstack-nextjs-graphql-prisma-3-clxbrcqppv/imgs/meta-91075c8f117cdbd825ecc504f44bf57d5916e0af-1269x714.png"
-heroImagePath: "/fullstack-nextjs-graphql-prisma-3-clxbrcqppv/imgs/hero-6e7a91ceafb378a17154ba9cb238ed0953434c64-844x474.svg"
-heroImageAlt: "Fullstack App With TypeScript, PostgreSQL, Next.js, Prisma & GraphQL: Authentication"
-series: fullstack-nextjs-graphql-prisma
-seriesIndex: 3
-tags:
- - "education"
----
-
-This article is the third part of the course where you build a fullstack app with Next.js, GraphQL, TypeScript, Prisma
- and PostgreSQL. In this article, you will learn how to add authentication to your app.
-
-## Table of Contents
-
-- [Introduction](#introduction)
-- [Development environment](#development-environment)
-- [Clone the repository](#clone-the-repository)
-- [Seed the database](#seed-the-database)
- - [Project structure and dependencies](#project-structure-and-dependencies)
-- [Authentication and securing the GraphQL API using Auth0](#authentication-and-securing-the-graphql-api-using-auth0)
- - [Configure Auth0](#configure-auth0)
- - [Add the Auth0 SDK](#add-the-auth0-sdk)
- - [Secure the GraphQL API](#secure-the-graphql-api)
- - [Sync Auth0 users with the app's database](#sync-auth0-users-with-the-apps-database)
- - [Expose `localhost:3000` using Ngrok](#expose-localhost3000-using-ngrok)
- - [Define an API route for creating new users](#define-an-api-route-for-creating-new-users)
- - [Create links – auth protected page](#create-links--auth-protected-page)
- - [Bonus: protecting pages based on the user role](#bonus-protecting-pages-based-on-the-user-role)
-- [Summary and next steps](#summary-and-next-steps)
-
-## Introduction
-
-In this course, you will learn how to build "awesome-links", a fullstack app where users can browse through a list of curated links and bookmark their favorite ones.
-
-In [part 2](/fullstack-nextjs-graphql-prisma-2-fwpc6ds155), you built the GraphQL API using GraphQL Yoga and Pothos. You then used Apollo Client to consume the GraphQL API on the frontend.
-
-## Development environment
-
-To follow along with this tutorial, ensure you have [Node.js](https://nodejs.org/en/download/package-manager) and the [GraphQL extension](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql) installed. You will also need a PostgreSQL database running.
-
-If you're following along from part 2, you can skip project setup and jump into the [authentication and securing the GraphQL API using Auth0](#authentication-and-securing-the-graphql-api-using-auth0) section.
-
-> Note: You can set up PostgreSQL [locally](https://www.prisma.io/dataguide/postgresql/setting-up-a-local-postgresql-database) or a hosted instance on [Heroku](https://dev.to/prisma/how-to-setup-a-free-postgresql-database-on-heroku-1dc1). You will need a remote database for the deployment step at the end of the course.
-
-## Clone the repository
-
-You can find the [complete source code](https://github.com/prisma/awesome-links) for the course on GitHub.
-
-> Note: Each article has a corresponding branch. This way, you can follow along as you go through it. You'll have the same starting point as this article by checking out at [part-3 branch](https://github.com/prisma/awesome-links/tree/part-3). There might be a few differences between each branch, so to not run into any issues, it is recommended that you clone the branch for this article.
-
-To get started, navigate into the directory of your choice and run the following command to clone the repository:
-
-```shell
-git clone -b part-3 https://github.com/prisma/awesome-links.git
-```
-Navigate into the cloned application and install the dependencies:
-
-```shell
-cd awesome-links
-npm install
-```
-## Seed the database
-
-After setting up a PostgreSQL database, rename the `env.example` file to `.env` and set the connection string for your database. After that, run the following command to create the tables in your database:
-
-> Refer to [Part 1 – Add Prisma to your Project](/fullstack-nextjs-graphql-prisma-oklidw1rhw#add-prisma-to-your-project) for more details on the format of the connection string.
-
-```shell
-npx prisma migrate dev --name init
-```
-If `prisma migrate dev` did not trigger the seed step, run the following command to seed the database:
-
-```shell
-npx prisma db seed
-```
-This command will run the `seed.ts` file in the `/prisma` directory. `seed.ts` creates four links and one user in your database using Prisma Client.
-
-You can now start the application server by running the following command:
-
-```shell
-npm run dev
-```
-### Project structure and dependencies
-
-The project has the following folder structure:
-
-```txt
-awesome-links/
-┣ components/
-┃ ┣ Layout
-┃ ┗ AwesomeLink.tsx
-┣ data/
-┃ ┗ links.ts
-┣ graphql/
-┃ ┣ types/
-┃ ┣ builder.tsx
-┃ ┗ schema.ts
-┣ lib/
-┃ ┣ apollo.ts
-┃ ┗ prisma.ts
-┣ pages/
-┃ ┣ api/
-┃ ┃ ┗ graphql.ts
-┃ ┣ _app.tsx
-┃ ┣ about.tsx
-┃ ┗ index.tsx
-┣ prisma/
-┃ ┣ migrations/
-┃ ┣ schema.prisma
-┃ ┗ seed.ts
-┣ public/
-┣ styles/
-┃ ┗ tailwind.css
-┣ .env.example
-┣ .gitignore
-┣ next-env.d.ts
-┣ package-lock.json
-┣ package.json
-┣ postcss.config.js
-┣ README.md
-┣ tailwind.config.js
-┗ tsconfig.json
-```
-This is a Next.js application that uses the following libraries and tools:
-
-- [Prisma](https://www.prisma.io) for database access/CRUD operations
-- [Next.js](https://nextjs.org) as the fullstack React framework
-- [TailwindCSS](https://tailwindcss.com) for styling
-- [Pothos](https://pothos-graphql.dev) as the GraphQL schema construction library
-- [GraphQL Yoga](https://the-guild.dev/graphql/yoga-server) as the GraphQL server
-- [Apollo Client](https://www.apollographql.com/docs/react) as the GraphQL client
-
-The `pages` directory contains the following files:
-
-- `index.tsx`: fetches links from the API and displays them on the page. The results are paginated and you can fetch more links.
-- `_app.tsx`: root component that allows you to persist layouts and state when navigating between pages.
-- `/api/graphql.ts`: GraphQL endpoint using Next.js's [API routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes).
-
-## Authentication and securing the GraphQL API using Auth0
-
-### Configure Auth0
-
-To secure the app, you will use [Auth0](https://auth0.com) – an authentication and authorization drop-in solution.
-
-After [creating an account](https://auth0.com/signup), navigate to the **Applications** dropdown located on the left sidebar and select **Applications** from the sub-menu.
-
-
-
-Next, create a new application by clicking the **+ Create application** button. Give your app a name, select **Regular Web Application** and finalize creating the app by selecting the **Create** button on the bottom right of the dialog.
-
-
-
-Once the application is successfully created, navigate to the **Settings** tab and copy the following information to the `.env` file of your project:
-
-- Domain
-- Client ID
-- Client Secret
-
-
-
-```shell
-# .env
-AUTH0_SECRET='...' # run `openssl rand -hex 32` to generate a 32 bytes value
-AUTH0_BASE_URL='http://localhost:3000'
-AUTH0_ISSUER_BASE_URL='https://YOUR_APP_DOMAIN'
-AUTH0_CLIENT_ID='YOUR_CLIENT_ID'
-AUTH0_CLIENT_SECRET='YOUR_CLIENT_SECRET'
-```
-- `AUTH0_SECRET`: A long secret value used to encrypt the session cookie. You can generate a suitable string by running `openssl rand -hex 32` in your terminal.
-- `AUTH0_BASE_URL`: The base URL of your application.
-- `AUTH0_ISSUER_BASE_URL`: The URL of your Auth0 tenant domain.
-- `AUTH0_CLIENT_ID`: Your Auth0 application's Client ID.
-- `AUTH0_CLIENT_SECRET`: Your Auth0 application's Client Secret.
-
-Finally, you need to configure some of the application's URIs in the Auth0 dashboard. Add `http://localhost:3000/api/auth/callback` to the **Allowed Callback URLs**, and `http://localhost:3000` to the **Allowed Logout URLs** list.
-
-Save these configuration changes by clicking the **Save Changes** button at the bottom of the page.
-
-When you're deploying your app to production, you can replace `localhost` with your deployed app's domain. Auth0 allows multiple URLs, so you can include both `localhost` and production URLs – separated by a comma.
-
-
-
-### Add the Auth0 SDK
-
-You can add Auth0 to your project by installing the [Auth0 Next.js SDK](https://github.com/auth0/nextjs-auth0):
-
-```shell
-npm install @auth0/nextjs-auth0
-```
-Next, create an `auth/[...auth0].ts` file inside the `pages/api` directory and add the following code to it:
-
-```ts
-// pages/api/auth/[...auth0].ts
-import { handleAuth } from '@auth0/nextjs-auth0'
-
-export default handleAuth()
-```
-This [Next.js dynamic API route](https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes) will automatically create the following endpoints:
-
-- `/api/auth/login`: Auth0's login route.
-- `/api/auth/logout`: The route used to logout the user.
-- `/api/auth/callback`: The route Auth0 redirects the user to after a successful login.
-- `/api/auth/me`: The route to fetch the user profile from Auth0.
-
-Finally, navigate to the `pages/_app.tsx` file and update it with the following code that wraps your app with the `UserProvider` component from Auth0:
-
-```tsx
-// pages/_app.tsx
-import '../styles/tailwind.css'
-import { UserProvider } from '@auth0/nextjs-auth0/client'
-import Layout from '../components/Layout'
-import { ApolloProvider } from '@apollo/client'
-import type { AppProps } from 'next/app'
-import apolloClient from '../lib/apollo'
-
-function MyApp({ Component, pageProps }: AppProps) {
- return (
-
-
-
-
-
-
- )
-}
-
-export default MyApp
-```
-Wrapping the `MyApp` component with the `UserProvider` component will allow all pages to access your user's authentication state.
-
-### Secure the GraphQL API
-
-When sending queries or mutations to the API, you can authenticate the requests by including the user information. You can do that by attaching a `user` object – from Auth0 – to the GraphQL context.
-
-Create a `graphql/context.ts` file and add the following snippet:
-
-```ts
-// graphql/context.ts
-import { getSession } from '@auth0/nextjs-auth0'
-import type { NextApiRequest, NextApiResponse } from 'next'
-
-export async function createContext({ req, res }: { req: NextApiRequest, res: NextApiResponse }) {
- const session = await getSession(req, res)
-
- // if the user is not logged in, return an empty object
- if (!session || typeof session === 'undefined') return {}
-
- const { user, accessToken } = session
-
- return {
- user,
- accessToken,
- }
-}
-```
-The `getSession()` function from Auth0 returns information about the logged-in user and the access token. This data is then included in the GraphQL context. Your queries and mutations can now access the authentication state.
-
-
-Update the server instance with the `context` property with the `createContext` function as it's value:
-
-```ts
-diff // pages/api/graphql.ts
-import { createYoga } from 'graphql-yoga'
-
-import type { NextApiRequest, NextApiResponse } from 'next'
-
-import { schema } from '../../graphql/schema'
-+import { createContext } from '../../graphql/context'
-
-
-export default createYoga<{
- req: NextApiRequest
- res: NextApiResponse
-}>({
- schema,
-+ context: createContext,
- graphqlEndpoint: '/api/graphql'
-})
-
-export const config = {
- api: {
- bodyParser: false
- }
-}
-```
-Next, update the `SchemaBuilder` function in `graphql/builder.ts` by specifying the type for the `Context` object:
-
-```ts
-diff // graphql/builder.ts
-import SchemaBuilder from "@pothos/core";
-import PrismaPlugin from '@pothos/plugin-prisma';
-import type PrismaTypes from '@pothos/plugin-prisma/generated';
-import prisma from "../lib/prisma";
-import RelayPlugin from "@pothos/plugin-relay";
-+import { createContext } from './context'
-
-
-export const builder = new SchemaBuilder<{
- PrismaTypes: PrismaTypes,
-+ Context: ReturnType,
-}>({
- plugins: [PrismaPlugin, RelayPlugin],
- relayOptions: {},
- prisma: {
- client: prisma,
- }
-})
-
-builder.queryType({
- fields: (t) => ({
- ok: t.boolean({
- resolve: () => true,
- }),
- }),
-});
-```
-Finally, the app's navbar should display a **Login**/**Logout** button depending on the user's authentication state. Update the `Header` component in `components/Layout/Header.tsx` with the following code:
-
-```tsx
-// components/Layout/Header.tsx
-import React from 'react'
-import Link from 'next/link'
-import { useUser } from '@auth0/nextjs-auth0/client'
-
-const Header = () => {
- const { user } = useUser()
- return (
-
-
-
-
-
-
-
-
- )
-}
-
-export default Header
-```
-The `useUser` hook from Auth0 checks whether a user is authenticated or not. This hook runs client-side.
-
-If you have done all the previous steps correctly, you should be able to sign up and login to the app!
-
-
-
-> Note: If you want to only allow authenticated requests to your GraphQL API, you can use the [`withApiAuthRequired`](https://github.com/auth0/nextjs-auth0/blob/main/EXAMPLES.md#protect-an-api-route) function from Auth0 to secure it.
-
-### Sync Auth0 users with the app's database
-
-Auth0 only manages users on your behalf and doesn't allow storing any data except the user's auth information. Therefore, whenever a user logs into your application the first time, you need to create a new record with the user information in your database.
-
-To achieve that, you will leverage [Auth0 Actions](https://auth0.com/docs/actions). Auth0 Actions are serverless functions that can execute at certain points during the Auth0 runtime.
-
-You will define an API route that will receive the information sent from the Auth0 Action during the login process and save the information to your database. This pattern of creating an API endpoint to listen to events from a third party service is called a [webhook](https://sendgrid.com/blog/whats-webhook/).
-
-To get started with Auth0 Actions, navigate to the **Actions** dropdown located in the left sidebar, select **Flows** and choose **Login**.
-
-
-
-
-Next, to create a new Action, click the **+** icon and choose **Build custom**.
-
-
-
-Pick a name for your custom Action, for example, "Create DB User" and complete the process by selecting **Create**.
-
-
-
-After completing the previous step, you will be able to manage your newly created Action.
-
-
-
-Here is a breakdown of the Auth0 Actions UI:
-
-- **1** - Test your Action
-- **2** - Define environment variables/secrets that will be used in the code
-- **3** - Include modules that will be used in the Action's code
-
-The first step is to include the `node-fetch` module version `2.6.1`. You will use it in your Action to send a request to an API endpoint – you will create this later. This endpoint will handle the logic of creating a user record in the database.
-
-
-
-
-Next, define a secret that will be included in every request sent by the Action to your endpoint. This secret will ensure that the requests are coming from the Auth0 Action instead of another untrusted third party.
-
-You can generate a random secret using the following command in your terminal:
-
-```shell
-openssl rand -hex 32
-```
-First, store this secret in the Auth0 dashboard with the key `AUTH0_HOOK_SECRET`.
-
-
-
-Now, also store the secret in your `.env` file.
-
-```shell
-AUTH0_HOOK_SECRET='' # same secret goes here
-```
-
-
-Finally, update the Action with the following code:
-
-```js
-const fetch = require('node-fetch')
-
-exports.onExecutePostLogin = async (event, api) => {
- // 1.
- const SECRET = event.secrets.AUTH0_HOOK_SECRET
-
- // 2.
- if (event.user.app_metadata.localUserCreated) {
- return
- }
-
- // 3.
- const email = event.user.email
-
- // 4.
- const request = await fetch('http://localhost:3000/api/auth/hook', { // "localhost:3000" will be replaced before deploying this Action
- method: 'post',
- body: JSON.stringify({ email, secret: SECRET }),
- headers: { 'Content-Type': 'application/json' },
- })
- const response = await request.json()
-
- // 5.
- api.user.setAppMetadata('localUserCreated', true)
-}
-```
-1. Retrieves the `AUTH0_HOOK_SECRET` environment variable
-1. Checks if the `localUserCreated` property on the user's `app_metadata`
-1. Retrieves user's email from the login event – provided by Auth0
-1. Sends a `POST` request to an API route – `http://localhost:3000/api/auth/hook`
-1. Adds the `localUserCreated` property to the user's `app_metadata`
-
-The `api.user.setAppMetadata` function allows you to add additional properties to a user's profile.
-
-Before you deploy this action, there's one more thing left to do.
-
-### Expose `localhost:3000` using Ngrok
-
-The Action you created runs on Auth0's servers. It cannot connect to `localhost:3000` running on your computer. However, you can expose `localhost:3000` to the internet and enable it to receive requests from Auth0's servers using a tool called [Ngrok](https://ngrok.com/).
-
-Ngrok will generate a URL to your localhost server that can be used in the Auth0 Action.
-
-TODO: sign up for an account, get token from the dashboard
-
-While your app is running, run the following command to expose `localhost:3000`:
-
-```shell
-npx ngrok http 3000 --authtoken "TOKEN"
-```
-> **Note**: Make sure to replace the `TOKEN` value with the token from Ngrok's dashboard.
-
-The output on your terminal will resemble the following – but with different **Forwarding** URLs:
-
-
-
-Copy the **Forwarding** URL, replace `localhost:3000` with your **Forwarding** URL in your Action and click **Deploy**.
-
-Now that the action is deployed, go back to the **Login** flow by pressing the **Back to flow** button.
-
-The final thing you need to do is add your newly created action to the **Login** flow. You will find the action underneath the **Custom** tab. To add the action to your flow, you can drag-and-drop it between **Start** and **Complete**. Then click **Apply** to save the changes.
-
-
-
-### Define an API route for creating new users
-
-Create a `hook.ts` file in the `pages/api/auth/` folder and add the following code to it:
-
-```ts
-// pages/api/auth/hook.ts
-import prisma from '../../../lib/prisma';
-import type { NextApiRequest, NextApiResponse } from 'next';
-
-const handler = async (req: NextApiRequest, res: NextApiResponse) => {
- const { email, secret } = req.body;
- // 1
- if (req.method !== 'POST') {
- return res.status(403).json({ message: 'Method not allowed' });
- }
- // 2
- if (secret !== process.env.AUTH0_HOOK_SECRET) {
- return res.status(403).json({ message: `You must provide the secret 🤫` });
- }
- // 3
- if (email) {
- // 4
- await prisma.user.create({
- data: { email },
- });
- return res.status(200).json({
- message: `User with email: ${email} has been created successfully!`,
- });
- }
-};
-
-export default handler;
-```
-This endpoint does the following:
-
-1. Validates the request is a `POST` request
-1. Validates the `AUTH0_HOOK_SECRET` from the request body is correct
-1. Validates that an email was provided in the request body
-1. Creates a new user record
-
-Once a user signs up to your application, the user's information will be synced to your database. You can view the newly created user in your database through Prisma Studio.
-
-
-
-### Create links – auth protected page
-
-Navigate to `graphql/builder.ts` file and update with the following snippet:
-
-```ts
-diff
-// graphql/builder.ts
-// ...code above remains unchanged
-
-builder.queryType({
- fields: (t) => ({
- ok: t.boolean({
- resolve: () => true,
- }),
- }),
-});
-
-+builder.mutationType({})
-```
-The above snippet registeres the `Mutation` type in the schema which allows you to define mutations in your GraphQL server.
-
-Next, update `graphql/types/Link.ts` with the following mutation that adds the ability to create links:
-
-```ts
-// graphql/types/Link.ts
-// ... code above remains unchanged
-
-builder.mutationField("createLink", (t) =>
- t.prismaField({
- type: 'Link',
- args: {
- title: t.arg.string({ required: true }),
- description: t.arg.string({ required: true }),
- url: t.arg.string({ required: true }),
- imageUrl: t.arg.string({ required: true }),
- category: t.arg.string({ required: true }),
- },
- resolve: async (query, _parent, args, ctx) => {
- const { title, description, url, imageUrl, category } = args
-
- if (!(await ctx).user) {
- throw new Error("You have to be logged in to perform this action")
- }
-
- return prisma.link.create({
- ...query,
- data: {
- title,
- description,
- url,
- imageUrl,
- category,
- }
- })
- }
- })
-)
-```
-The `args` property defines the input required to create a new link. The mutation also checks if a user is logged in so only authenticated users can create links. Finally, the `create()` function from Prisma creates a new database record.
-
-Install the following dependencies you'll use for form management and notifications:
-
-```sh
-npm install react-hook-form react-hot-toast
-```
-Next, create `pages/admin.tsx` page and add the following code. The code allows creation of a new link:
-
-```tsx
-// pages/admin.tsx
-import React from 'react'
-import { type SubmitHandler, useForm } from 'react-hook-form'
-import { gql, useMutation } from '@apollo/client'
-import toast, { Toaster } from 'react-hot-toast'
-import { getSession } from '@auth0/nextjs-auth0'
-import prisma from '../lib/prisma'
-import type { GetServerSideProps } from 'next'
-
-type FormValues = {
- title: string;
- url: string;
- category: string;
- description: string;
- image: FileList;
-}
-
-const CreateLinkMutation = gql`
- mutation createLink($title: String!, $url: String!, $imageUrl: String!, $category: String!, $description: String!) {
- createLink(title: $title, url: $url, imageUrl: $imageUrl, category: $category, description: $description) {
- title
- url
- imageUrl
- category
- description
- }
- }
-`
-
-const Admin = () => {
- const {
- register,
- handleSubmit,
- formState: { errors },
- reset,
- } = useForm()
-
- const [createLink, { loading, error }] = useMutation(CreateLinkMutation, {
- onCompleted: () => reset()
- })
-
- const onSubmit: SubmitHandler = async (data) => {
- const { title, url, category, description } = data
- const imageUrl = `https://via.placeholder.com/300`
- const variables = { title, url, category, description, imageUrl }
- try {
- toast.promise(createLink({ variables }), {
- loading: 'Creating new link..',
- success: 'Link successfully created!🎉',
- error: `Something went wrong 😥 Please try again - ${error}`,
- })
-
- } catch (error) {
- console.error(error)
- }
- }
-
- return (
-
- Create a new link
-
-
- )
-}
-
-export default Admin
-
-export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
- const session = await getSession(req, res);
-
- if (!session) {
- return {
- redirect: {
- permanent: false,
- destination: '/api/auth/login',
- },
- props: {},
- }
- }
-
- return {
- props: {},
- };
-}
-```
-The `onSubmit` function passes the form values to the `createLink` mutation. A toast will be shown as the mutation is being executed – success, loading, or error.
-
-In `getServerSideProps`, if there is no session, you are redirecting the user to the login page. If a user record that matches the email of the logged-in user is found, the `/admin` page is rendered.
-
-Update `Header.tsx` file by adding a **+ Create** button authenticated users can use to create links.
-
-```tsx
-diff // components/Layout/Header.tsx
-/** imports */
-
-const Header = () => {
- const { user } = useUser()
- return (
-
- {/* the rest of the header... */}
-
-
-
- )
-}
-
-export default Header
-```
-You should now be able to create links! 🚀
-
-### Bonus: protecting pages based on the user role
-
-You can tighten the authentication by ensuring only admin users can create links.
-
-Firstly, update the `createLink` mutation to check a user's role:
-
-```ts
-// graphql/types/Link.ts
-builder.mutationField("createLink", (t) =>
- t.prismaField({
- type: 'Link',
- args: {
- title: t.arg.string({ required: true }),
- description: t.arg.string({ required: true }),
- url: t.arg.string({ required: true }),
- imageUrl: t.arg.string({ required: true }),
- category: t.arg.string({ required: true }),
- },
- resolve: async (query, _parent, args, ctx) => {
- const { title, description, url, imageUrl, category } = args
-
- if (!(await ctx).user) {
- throw new Error("You have to be logged in to perform this action")
- }
-
- const user = await prisma.user.findUnique({
- where: {
- email: (await ctx).user?.email,
- }
- })
-
- if (!user || user.role !== "ADMIN") {
- throw new Error("You don have permission ot perform this action")
- }
-
- return prisma.link.create({
- ...query,
- data: {
- title,
- description,
- url,
- imageUrl,
- category,
- }
- })
- }
- })
-)
-```
-Update `admin.tsx` page by adding the role check in your `getServerSideProps` to redirect users that are not admins. Users without the `ADMIN` role will be redirected to the `/404` page.
-
-```tsx
-// pages/admin.tsx
-export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
- const session = await getSession(req, res);
-
- if (!session) {
- return {
- redirect: {
- permanent: false,
- destination: '/api/auth/login',
- },
- props: {},
- };
- }
-
- const user = await prisma.user.findUnique({
- select: {
- email: true,
- role: true,
- },
- where: {
- email: session.user.email,
- },
- });
-
- if (!user || user.role !== 'ADMIN') {
- return {
- redirect: {
- permanent: false,
- destination: '/404',
- },
- props: {},
- };
- }
-
- return {
- props: {},
- };
-};
-```
-The default role assigned to a user when signing up is `USER`. So if you try to go to the `/admin` page, it will no longer work.
-
-You can change this by modifying the `role` field of the user in the database. This is very easy to do in Prisma Studio.
-
-First start Prisma Studio by running `npx prisma studio` in the terminal. Then click the **User** model and find the record matching the current user. Now, go ahead and update your user role from `USER` to `ADMIN`. Save your changes by pressing the **Save 1 change** button.
-
-
-
-Navigate to the `/admin` page of your application and voila! You can now create links again.
-
-## Summary and next steps
-
-In this part, you learned how to add authentication and authorization to a Next.js app using Auth0 and how you can use Auth0 Actions to add users to your database.
-
-Stay tuned for [the next part](/fullstack-nextjs-graphql-prisma-4-1k1kc83x3v) where you'll learn how to add image upload using AWS S3.
-
diff --git a/apps/blog/content/blog/fullstack-nextjs-graphql-prisma-4-1k1kc83x3v/index.mdx b/apps/blog/content/blog/fullstack-nextjs-graphql-prisma-4-1k1kc83x3v/index.mdx
deleted file mode 100644
index c8a6e12a66..0000000000
--- a/apps/blog/content/blog/fullstack-nextjs-graphql-prisma-4-1k1kc83x3v/index.mdx
+++ /dev/null
@@ -1,506 +0,0 @@
----
-title: "Fullstack App With TypeScript, PostgreSQL, Next.js, Prisma & GraphQL: Image upload"
-slug: "fullstack-nextjs-graphql-prisma-4-1k1kc83x3v"
-date: "2022-03-30"
-authors:
- - "Mahmoud Abdelwahab"
- - "Alex Ruheni"
-metaTitle: "Fullstack app with TypeScript, Next.js, Prisma & GraphQL - Image upload "
-metaDescription: "Learn how to build a fullstack app using TypeScript, PostgreSQL, Next.js, GraphQL and Prisma. In this article you are going to learn how to add image upload using AWS S3"
-metaImagePath: "/fullstack-nextjs-graphql-prisma-4-1k1kc83x3v/imgs/meta-020d4caf40065aad2ab5d59cff56d2bec9470bd9-1269x714.png"
-heroImagePath: "/fullstack-nextjs-graphql-prisma-4-1k1kc83x3v/imgs/hero-0672449d4925722e1d058122cf3ef071ca3235e4-844x474.svg"
-heroImageAlt: "Fullstack App With TypeScript, PostgreSQL, Next.js, Prisma & GraphQL: Image upload"
-series: fullstack-nextjs-graphql-prisma
-seriesIndex: 4
-tags:
- - "education"
----
-
-This article is the fourth part of the course where you build a fullstack app with Next.js, GraphQL, TypeScript,
- Prisma and PostgreSQL. In this article, you will learn how to add image upload using AWS S3.
-
-## Table of Contents
-- [Introduction](#introduction)
-- [Development environment](#development-environment)
-- [Clone the repository](#clone-the-repository)
-- [Seed the database](#seeding-the-database)
-- [Project structure and dependencies](#project-structure-and-dependencies)
-- [Using AWS S3 to add support for image upload](#using-aws-s3-to-add-support-for-image-upload)
- - [Create an Identity Access Management user
-](#create-an-identity-access-management-user)
- - [Create and configure a new S3 bucket
-](#create-and-configure-a-new-s3-bucket)
- - [Add image upload functionality to your application](#add-image-upload-functionality-to-your-application)
-- [Summary and next steps](#summary-and-next-steps)
-
-## Introduction
-
-In this course you will learn how to build "awesome-links", a fullstack app where users can browse through a list of curated links and bookmark their favorite ones.
-
-In [part 3](/fullstack-nextjs-graphql-prisma-3-clxbrcqppv), you added authentication to the app and created a page for adding new links using placeholder images.
-
-This guide will teach you how to add support for image upload using AWS S3. If you're following along from part 3, you can skip project setup and jump into the [using AWS S3 to add support for image upload](#using-aws-s3-to-add-suport-for-image-upload) section.
-
-> Note: The example code used for part 4 differs slightly by including functionality such as bookmarking favorite links. Feel free to refer to the [part 4 branch](https://github.com/prisma/awesome-links/tree/part-4) to update your current application to match what is used in this tutorial.
-
-## Development environment
-
-To follow along with this tutorial, ensure you have [Node.js](https://nodejs.org/en/download/) and the [GraphQL extension](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql) installed. You will also need a PostgreSQL database running.
-
-> Note: you can set up PostgreSQL [locally](https://www.prisma.io/dataguide/postgresql/setting-up-a-local-postgresql-database) or a hosted instance on [Heroku](https://dev.to/prisma/how-to-setup-a-free-postgresql-database-on-heroku-1dc1). Note that you will need a remote database for the deployment step at the end of the course.
-
-## Clone the repository
-
-You can find the [complete source code](https://github.com/prisma/awesome-links) for the course on GitHub.
-
-> Note: Each article has a corresponding branch. This way, you can follow along as you go through it. By checking out the part-4 branch, you have the same starting point as this article. There might be a few differences between each branch, so to not run into any issues, it is recommended that you clone the branch for this part
-
-To get started, navigate into the directory of your choice and run the following command to clone the repository:
-
-```shell
-git clone -b part-4 https://github.com/prisma/awesome-links.git
-```
-Navigate into the cloned application and install the dependencies:
-
-```shell
-cd awesome-links
-npm install
-```
-## Seeding the database
-
-After setting up a PostgreSQL database, rename the `env.example` file to `.env` and set the connection string for your database. After that, run the following command to create the tables in your database:
-
-```shell
-npx prisma migrate dev --name init
-```
-If `prisma migrate dev` did not trigger the seed step, run the following command to seed the database:
-
-```shell
-npx prisma db seed
-```
-> Refer to [Part 1 – Add Prisma to your Project](/fullstack-nextjs-graphql-prisma-oklidw1rhw#add-prisma-to-your-project) for more details on the format of the connection string.
-
-This command will run the `seed.ts` file in the `/prisma` directory. `seed.ts` creates four links and one user in your database using Prisma Client.
-
-> Note: Refer to [part 3](/fullstack-nextjs-graphql-prisma-3-clxbrcqppv) for how to set up Auth0.
-
-### Project structure and dependencies
-
-You will see the following folder structure:
-
-```txt
-awesome-links/
-┣ components/
-┃ ┣ Layout
-┃ ┗ AwesomeLink.tsx
-┣ data/
-┃ ┗ links.ts
-┣ graphql/
-┃ ┣ types/
-┃ ┣ context.ts
-┃ ┣ schema.graphql
-┃ ┗ schema.ts
-┣ lib/
-┃ ┣ apollo.ts
-┃ ┗ prisma.ts
-┣ pages/
-┃ ┣ api/
-┃ ┃ ┣ auth
-┃ ┃ ┃ ┣ [...auth0].ts
-┃ ┃ ┃ ┗ hook.ts
-┃ ┃ ┗ graphql.ts
-┃ ┣ link/
-┃ ┣ _app.tsx
-┃ ┣ admin.tsx
-┃ ┣ favorites.tsx
-┃ ┗ index.tsx
-┣ prisma/
-┃ ┣ migrations/
-┃ ┣ schema.prisma
-┃ ┗ seed.ts
-┣ public/
-┣ styles/
-┃ ┗ tailwind.css
-┣ .env.example
-┣ .gitignore
-┣ next-env.d.ts
-┣ package-lock.json
-┣ package.json
-┣ postcss.config.js
-┣ README.md
-┣ tailwind.config.js
-┗ tsconfig.json
-```
-This is a Next.js application that uses the following libraries and tools:
-
-- [Prisma](https://www.prisma.io) for database access/CRUD operations
-- [Next.js](https://nextjs.org) as the fullstack React framework
-- [TailwindCSS](https://tailwindcss.com) for styling
-- [Pothos](https://pothos-graphql.dev) as the GraphQL schema construction library
-- [GraphQL Yoga](https://the-guild.dev/graphql/yoga-server) as the GraphQL server
-- [Apollo Client](https://www.apollographql.com/docs/react) as the GraphQL client
-- [Auth0](https://auth0.com) for authentication and authorization.
-
-The `pages` directory contains the following files:
-
-- `index.tsx`: page that displays all links in the app. Supports pagination
-- `link/[id].tsx`: page that displays an individual link and allows users to bookmark it.
-- `admin.tsx`: admin page that requires the logged in user to have the `ADMIN` role. This page allows admins to create new links.
-- `favorites.tsx`: page that shows a user's bookmarked links.
-- `_app.tsx`: global app component. Allows you to persist layout between page changes and keeping state when navigating pages.
-- `api/graphql.ts`: GraphQL endpoint using Next.js's [API routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes).
-- `api/auth/[...auth0].ts`: [dynamic API route](https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes) Auth0 creates to handle authentication.
-- `api/auth/hook.ts`: API route that handles creating a user record in the database.
-
-## Using AWS S3 to add support for image upload
-
-In the application's current state, an admin can create a link. However, the admin cannot attach an image to the created link. This guide will teach you how you can leverage [AWS S3](https://aws.amazon.com/s3) – an object storage service – to upload images.
-
-> Note: To continue with the tutorial, you need an AWS account. You can create an account [here](https://portal.aws.amazon.com/billing/signup). AWS will require you to provide a credit card to complete the signup. AWS provides a [free tier](https://aws.amazon.com/free) that will allow you to explore different AWS services – including S3 – for free.
-
-### Create an Identity Access Management user
-
-To interact with AWS resources, you have to create an [Identity Access Management (IAM) user](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_users.html) with the proper permissions. The IAM user will allow you to interact with resources on AWS programmatically.
-
-To do that, select **Security Credentials** from the dropdown menu located in the top right corner of the page – where your username is.
-
-
-
-Next, select the **Users** option from the **Access Management** dropdown located in the left sidebar.
-
-
-
-Next, click the **Add users** button to create a new user.
-
-
-
-Provide a recognizable username for the newly created user and check the **Access key - programmatic access** checkbox.
-
-
-
-Next, you need to specify what the user can do with different AWS resources by setting permissions. Select the **Attach existing policies directly** option and type "S3" in the search filter. Select **AmazonS3FullAccess**.
-
-
-
-You can optionally define tags for newly created IAM users, but you do not need to do that for this project, so click **Next: Review**.
-
-
-
-After reviewing that the user has the correct permissions and username, click **Create user**.
-
-
-
-Finally, copy the "Access Key ID" and the "Secret Access Key" and store them in your `.env` file
-
-
-
-> Note: These credentials can only be viewed once, so in case you lose these credentials or want to change them, you will need to generate new ones.
-
-```shell
-#.env
-APP_AWS_ACCESS_KEY = ''
-APP_AWS_SECRET_KEY = ''
-```
-### Create and configure a new S3 bucket
-
-The next step is to create an AWS S3 bucket which will store the uploaded objects. You can find the S3 service by looking it up in the search bar or by going to [https://s3.console.aws.amazon.com/](https://s3.console.aws.amazon.com/).
-
-
-
-> Note: there are different ways you can provison resources in AWS, you are using the AWS console for simplicity
-
-Next, click on **Create bucket** to create a new bucket.
-
-
-Pick a name and a region for your bucket. Save these values in your `.env` file.
-
-```shell
-# .env
-APP_AWS_REGION = ''
-AWS_S3_BUCKET_NAME = '' # Will be used in an API route.
-NEXT_PUBLIC_AWS_S3_BUCKET_NAME = '' # Will be used on the client-side
-```
-> Note: The bucket name has to be unique and must not contain any spaces or uppercase letters.
-
-Go ahead and create the bucket by navigating to the bottom of the page and clicking the **Create bucket** button. You can stick with the defaults settings for now, but you'll update them in the following steps.
-
-
-
-Once S3 has provisioned the Bucket, navigate to it by selecting it in the table.
-
-Navigate to the **Permissions** tab and click on the **Edit** button in the **Block public access (bucket settings)** section.
-
-
-Uncheck **Block _all_ public access** and click on **Save changes**. You need to allow public access because your application needs to access the images uploaded on AWS S3.
-
-
-
-
-Next, update the resource policy to grant the application access to the Bucket and its contents. In the **Permissions** of your S3 Bucket, navigate to the **Bucket policy** section. Select **Edit** and add the following while changing "name-of-your-bucket" placeholder to the name of your Bucket:
-
-```json
-{
- "Version": "2008-10-17",
- "Statement": [
- {
- "Sid": "AllowPublicRead",
- "Effect": "Allow",
- "Principal": {
- "AWS": "*"
- },
- "Action": "s3:GetObject",
- "Resource": "arn:aws:s3:::name-of-your-bucket/*"
- }
- ]
-}
-```
-
-
-Next, you need to allow your application, which will be on a different domain, to access the stored images. In the **Permissions** tab of your bucket, scroll to the **Cross-origin Resource Sharing (CORS)** section at the bottom and add the following to it:
-
-```json
-[
- {
- "AllowedHeaders": ["*"],
- "AllowedMethods": ["PUT", "POST", "DELETE"],
- "AllowedOrigins": ["http://localhost:3000"],
- "ExposeHeaders": []
- }
-]
-```
-
-
-> Note: Before deploying your application, ensure you update the "AllowedOrigins" array with the URL pointing to your application.
-
-### Add image upload functionality to your application
-
-Now that you've set up S3, the next step is adding image upload functionality to your application. You'll create an API endpoint and update the frontend to handle image upload.
-
-First, install the `aws-sdk` package by running the following command:
-
-```shell
-npm install aws-sdk
-```
-Next, create a new file called `upload-image.ts` located in the `pages/api/` directory and add the following code to it:
-
-```ts
-// pages/api/upload-image.ts
-import aws from 'aws-sdk'
-import type { NextApiRequest, NextApiResponse } from 'next'
-
-export default async function handler(req: NextApiRequest, res: NextApiResponse) {
- try {
- // 1.
- const s3 = new aws.S3({
- accessKeyId: process.env.APP_AWS_ACCESS_KEY,
- secretAccessKey: process.env.APP_AWS_SECRET_KEY,
- region: process.env.APP_AWS_REGION,
- })
-
- // 2.
- aws.config.update({
- accessKeyId: process.env.APP_AWS_ACCESS_KEY,
- secretAccessKey: process.env.APP_AWS_SECRET_KEY,
- region: process.env.APP_AWS_REGION,
- signatureVersion: 'v4',
- })
-
- // 3.
- const post = await s3.createPresignedPost({
- Bucket: process.env.AWS_S3_BUCKET_NAME,
- Fields: {
- key: req.query.file,
- },
- Expires: 60, // seconds
- Conditions: [
- ['content-length-range', 0, 5048576], // up to 1 MB
- ],
- })
-
- // 4.
- return res.status(200).json(post)
- } catch (error) {
- console.log(error)
- }
-}
-```
-1. Creates a new instance of the S3 Bucket
-1. Updates the main configuration class with the region, credentials, and additional request options
-1. Generates a presigned URL allowing you to write to the S3 Bucket
-1. Return the presigned URL that will be used for file upload
-
-Finally, update the `pages/admin.tsx` file with the following code:
-
-```tsx
-// pages/admin.tsx
-import React from 'react'
-import { type SubmitHandler, useForm } from 'react-hook-form'
-import { gql, useMutation } from '@apollo/client'
-import toast, { Toaster } from 'react-hot-toast'
-import type { GetServerSideProps } from 'next'
-import { getSession } from '@auth0/nextjs-auth0'
-
-type FormValues = {
- title: string;
- url: string;
- category: string;
- description: string;
- image: FileList;
-}
-
-const CreateLinkMutation = gql`
- mutation($title: String!, $url: String!, $imageUrl: String!, $category: String!, $description: String!) {
- createLink(title: $title, url: $url, imageUrl: $imageUrl, category: $category, description: $description) {
- title
- url
- imageUrl
- category
- description
- }
- }
-`
-
-const Admin = () => {
- const [createLink, { data, loading, error }] = useMutation(CreateLinkMutation)
- const {
- register,
- handleSubmit,
- formState: { errors },
- } = useForm()
-
- // Upload photo function
- const uploadPhoto = async (e: React.ChangeEvent) => {
- if (!e.target.files || e.target.files.length <= 0) return
- const file = e.target.files[0]
- const filename = encodeURIComponent(file.name)
- const res = await fetch(`/api/upload-image?file=${filename}`)
- const data = await res.json()
- const formData = new FormData()
-
- Object.entries({ ...data.fields, file }).forEach(([key, value]) => {
- // @ts-ignore
- formData.append(key, value)
- })
-
- toast.promise(
- fetch(data.url, {
- method: 'POST',
- body: formData,
- }),
- {
- loading: 'Uploading...',
- success: 'Image successfully uploaded!🎉',
- error: `Upload failed 😥 Please try again ${error}`,
- },
- )
- }
-
- const onSubmit: SubmitHandler = async (data) => {
- const { title, url, category, description, image } = data
- const imageUrl = `https://${process.env.NEXT_PUBLIC_AWS_S3_BUCKET_NAME}.s3.amazonaws.com/${image[0]?.name}`
- const variables = { title, url, category, description, imageUrl }
- try {
- toast.promise(createLink({ variables }), {
- loading: 'Creating new link..',
- success: 'Link successfully created!🎉',
- error: `Something went wrong 😥 Please try again - ${error}`,
- })
- } catch (error) {
- console.error(error)
- }
- }
-
- return (
-
- Create a new link
-
-
- )
-}
-
-export default Admin
-
-// getServerSideProps code remains unchanged
-```
-The form includes a new input field to handle file upload. The input field accepts images of either `.png` or `.jpeg` formats. Whenever an image is uploaded, the `uploadPhoto` function sends a request to the `/api/upload-image` API endpoint. A toast will be shown as the request is being resolved by the API – success, loading, or error states.
-
-When the form is submitted, the URL of the image is included as a variable in the `createLink` mutation. A toast will appear as the mutation is being executed.
-
-## Summary and next steps
-
-You learned how to add support for image upload using AWS S3. In the [next part](/fullstack-nextjs-graphql-prisma-5-m2fna60h7c), you will deploy your app to Vercel and learn how you can use the Prisma Data Proxy to manage your database connection pool to ensure your application doesn't run out of connections.
-
diff --git a/apps/blog/content/blog/fullstack-nextjs-graphql-prisma-5-m2fna60h7c/index.mdx b/apps/blog/content/blog/fullstack-nextjs-graphql-prisma-5-m2fna60h7c/index.mdx
deleted file mode 100644
index 6f0d9ab140..0000000000
--- a/apps/blog/content/blog/fullstack-nextjs-graphql-prisma-5-m2fna60h7c/index.mdx
+++ /dev/null
@@ -1,165 +0,0 @@
----
-title: "Fullstack App With TypeScript, PostgreSQL, Next.js, Prisma & GraphQL: Deployment"
-slug: "fullstack-nextjs-graphql-prisma-5-m2fna60h7c"
-date: "2022-04-06"
-authors:
- - "Alex Ruheni"
- - "Mahmoud Abdelwahab"
-metaTitle: "Fullstack app with TypeScript, Next.js, Prisma & GraphQL - Deployment"
-metaDescription: "Learn how to build a fullstack app using TypeScript, PostgreSQL, Next.js, GraphQL and Prisma. In this article you are going to deploy your app to Vercel"
-metaImagePath: "/fullstack-nextjs-graphql-prisma-5-m2fna60h7c/imgs/meta-6b91985fb8bb4d0d06e95090aab1d8b0ede0696b-1269x714.png"
-heroImagePath: "/fullstack-nextjs-graphql-prisma-5-m2fna60h7c/imgs/hero-487ed996090048a8225eec985d2ea001c5e1486b-844x474.svg"
-heroImageAlt: "Fullstack App With TypeScript, PostgreSQL, Next.js, Prisma & GraphQL: Deployment"
-series: fullstack-nextjs-graphql-prisma
-seriesIndex: 5
-tags:
- - "education"
----
-
-This article is the final part of the course where you build a fullstack app with Next.js, GraphQL, TypeScript, Prisma, and PostgreSQL. In this article, you will learn how to deploy your app to Vercel.
-
-> **Update (May 2026):** This deployment chapter still works as a conceptual guide, but the Prisma Data Proxy steps are now historical. For new projects, prefer [Prisma Accelerate](https://www.prisma.io/accelerate) for connection pooling and caching, use the current [serverless deployment docs](https://www.prisma.io/docs/orm/prisma-client/deployment/serverless/deploy-to-vercel), and consider [Prisma Postgres](https://www.prisma.io/postgres) if you want a managed Postgres database with Prisma ORM.
-
-## Table of Contents
-
-- [Introduction](#introduction)
-- [Prerequisites](#prerequisites)
-- [Fork the repository](#fork-the-repository)
-- [Database access in serverless environments with the Prisma Data Proxy](#database-access-in-serverless-environments-with-the-prisma-data-proxy)
-- [Getting started with the Prisma Data Proxy](#getting-started-with-the-prisma-data-proxy)
-- [Update the application](#update-the-application)
- - [Enable the Prisma Data Proxy](#enable-the-prisma-data-proxy)
- - [Create new scripts in `package.json`](#create-new-scripts-in-packagejson)
-- [Deploy the app to Vercel](#deploy-the-app-to-vercel)
-- [Summary](#summary)
-
-## Introduction
-
-In this course you will learn how to build "awesome-links", a fullstack app where users can browse through a list of curated links and bookmark their favorite ones.
-
-In [part 4](/fullstack-nextjs-graphql-prisma-4-1k1kc83x3v), you added support for image uploads using AWS S3. In this part, you will walk through the original deployment flow for the series and see why connection pooling matters in serverless environments.
-
-## Prerequisites
-
-To follow along with this tutorial, you will need an account on [GitHub](https://github.com) and a [Vercel](https://vercel.com). You will also need a hosted PostgreSQL database.
-
-## Fork the repository
-
-You can find the [complete source code](https://github.com/prisma/awesome-links) for the course on GitHub. To follow along, fork the repository to your own GitHub account.
-
-If you're following along from the previous parts, ensure you have added your code to source control and pushed it to GitHub.
-
-## Database access in serverless environments with the Prisma Data Proxy
-
-Serverless functions are ephemeral and short-lived – _stateless_. When traffic to your application spikes, the number of instances of a serverless function also goes up. On the other hand, database connections are stateful and require a TCP connection between the application and the database.
-
-When a serverless function needs to access a database, it establishes a connection to it, submits a query, and receives the response from the database. The response data is then delivered to the client that invoked the serverless function, the database connection is closed and the function is torn down again.
-
-When there's a traffic spike, each serverless function will spawn a new database connection.
-
-
-
-Traditional databases such as PostgreSQL and MySQL typically have a _database connection limit_ that can be easily exhausted when there's a traffic spike to your application. When the connection limit is exhausted, the requests to your application would start failing.
-
-A solution to this problem is using a database connection pooler, such as [pgBouncer](https://www.pgbouncer.org/) for PostgreSQL or the [Prisma Data Proxy](https://www.prisma.io/docs/data-platform/data-proxy).
-
-The Prisma Data Proxy is a proxy server for your database that manages a connection pool and ensures existing database connections are reused. This prevents incoming user requests from failing and improves your app's performance.
-
-
-
- )
-}
-export default MyApp
-```
-The data we see when navigating to `http://localhost:3000` is hardcoded in the [`/data/links.ts`](https://github.com/m-abdelwahab/awesome-links/blob/part-1/data/links.ts) file. In the upcoming parts, the data will be fetched dynamically from the database using a GraphQL API.
-
-## Creating the data model for the app
-
-The database will have the following entities, where each entity will map to a table in the database.
-
-- `User`: a person with an account. They can bookmark their favorite links and can either be an admin or a regular user.
-- `Link`: to represent the different attributes for a link such as a title, a description, and a URL.
-
-There's a [many-to-many](https://www.prisma.io/docs/orm/prisma-schema/data-model/relations#many-to-many-relations) (also known as `m-n`) relation between the `User` and `Link` entities. This way a user can have many links and a link can have many users.
-
-### Add Prisma to your project
-
-We're going to use Prisma to create the database tables. It is an ORM that can be used to interact with a database.
-
-"
-```
-The database URL you just added has the following structure:
-
-
-
-| Name | Placeholder | Description |
-| :------- | :---------- | :-------------------------------------------------------------------------------------------------------------- |
-| Host | `HOST` | IP address/domain of your database server, e.g. `localhost` |
-| Port | `PORT` | Port on which your database server is running, e.g. `5432` |
-| User | `USER` | Name of your database user, e.g. `janedoe` |
-| Password | `PASSWORD` | Password for your database user |
-| Database | `DATABASE` | Name of the [database](https://www.postgresql.org/docs/12/manage-ag-overview.html) you want to use, e.g. `mydb` |
-
-### Create your database schema with Prisma
-
-When you open the `/prisma/schema.prisma` file you will find the following schema:
-
-```prisma
-// prisma/schema.prisma
-
-datasource db {
- provider = "postgresql"
- url = env("DATABASE_URL")
-}
-
-generator client {
- provider = "prisma-client-js"
-}
-```
-> **Note**: This file uses PSL (Prisma Schema Language). To get the best possible development experience, make sure you install our [VSCode extension](https://marketplace.visualstudio.com/items?itemName=Prisma.prisma), which adds syntax highlighting, formatting, auto-completion, jump-to-definition, and linting for `.prisma` files.
-
-In the `datasource` field, we specified that we're using PostgreSQL and that we're loading the database URL from the `.env` file.
-
-Next, in the `generator` block, we're specifying that we want to generate Prisma Client based on our data models.
-
-Prisma Client is an auto-generated and type-safe query builder; we're going to see how it simplifies working with databases.
-
-### Defining the models
-
-Let's create the `User` model:
-
-```prisma
-// prisma/schema.prisma
-// code above unchanged
-model User {
- id Int @id @default(autoincrement())
- createdAt DateTime @default(now())
- updatedAt DateTime @updatedAt
- email String? @unique
- image String?
- role Role @default(USER)
-}
-
-enum Role {
- USER
- ADMIN
-}
-```
-> **Note**: models are typically spelled in [PascalCase](https://wiki.c2.com/?pascalcase) and should use the singular form. (for example, `User` instead of `user`, `users` or `Users`)
-
-Here we defined a `User` model with several fields. Each field has a name followed by a type and [optional field attributes](https://www.prisma.io/docs/orm/prisma-schema/data-model/models#defining-fields).
-
-For example, the `id` field is of type `String` and has the `@id` field attribute, specifying that this is the primary key of the table. The `@default(uuid())` attribute sets a default [UUID](https://www.prisma.io/docs/orm/reference/prisma-schema-reference#uuid) value.
-
-All fields are required by default. To make a field optional, you can add a `?` after the field type.
-
-The `Role` enum is used to denote whether a user is an admin or not and is then referenced in the `User` model.
-
-Next, we're going to create the `Link` model:
-
-```prisma
-model Link {
- id Int @id @default(autoincrement())
- createdAt DateTime @default(now())
- updatedAt DateTime @updatedAt
- title String
- description String
- url String
- imageUrl String
- category String
-}
-```
-
-
-```prisma
-// prisma/schema.prisma
-// code above unchanged
-
-model User {
- id Int @id @default(autoincrement())
- createdAt DateTime @default(now())
- updatedAt DateTime @updatedAt
- email String? @unique
- image String?
- role Role @default(USER)
-}
-
-enum Role {
- USER
- ADMIN
-}
-
-model Link {
- id Int @id @default(autoincrement())
- createdAt DateTime @default(now())
- updatedAt DateTime @updatedAt
- title String
- description String
- url String
- imageUrl String
- category String
-}
-```
-
-
-
-### Defining relations
-
-Finally, we need to create a many-to-many relation between the `User` and the `Link` models, so that a user can have many links and a link can have many users. We do so by definining relation fields as lists on both sides of the relations.
-
-We will add a `bookmarks` field to the `User` model, where the type is `Link[]`. We then add a `users` field to the `Link` model, where the type is `User[]`.
-
-```prisma
-diff // prisma/schema.prisma
-// code above unchanged
-
-model User {
- id Int @id @default(autoincrement())
- createdAt DateTime @default(now())
- updatedAt DateTime @updatedAt
- email String? @unique
- image String?
- role Role @default(USER)
-+ bookmarks Link[]
-}
-
-enum Role {
- USER
- ADMIN
-}
-
-model Link {
- id Int @id @default(autoincrement())
- createdAt DateTime @default(now())
- updatedAt DateTime @updatedAt
- title String
- description String
- url String
- imageUrl String
- category String
-+ users User[]
-}
-```
-This is an [_implicit_ many-to-many](https://www.prisma.io/docs/orm/prisma-schema/data-model/relations#implicit-many-to-many-relations) relation, where we have a relation table in the underlying database. This [relation table](https://www.prisma.io/docs/orm/prisma-schema/data-model/relations#relation-tables) is managed by Prisma.
-
-Here's what the final schema looks like:
-
-```prisma
-copy
-// prisma/schema.prisma
-
-datasource db {
- provider = "postgresql"
- url = env("DATABASE_URL")
-}
-
-generator client {
- provider = "prisma-client-js"
-}
-
-model User {
- id Int @id @default(autoincrement())
- createdAt DateTime @default(now())
- updatedAt DateTime @updatedAt
- email String? @unique
- image String?
- role Role @default(USER)
- bookmarks Link[]
-}
-
-enum Role {
- USER
- ADMIN
-}
-
-model Link {
- id Int @id @default(autoincrement())
- createdAt DateTime @default(now())
- updatedAt DateTime @updatedAt
- title String
- description String
- url String
- imageUrl String
- category String
- users User[]
-}
-```
-## Migrating and pushing changes to the database
-
-To create these tables in the database, you will use the `prisma migrate dev` command:
-
-```shell
-npx prisma migrate dev --name init
-```
-The command does the following things:
-- Generate a new SQL migration called `init`
-- Apply the migration to the database
-- Install Prisma Client if it's not yet installed
-- Generate Prisma Client based off the current schema
-
-If Prisma Client is not automatically installed, you can install it with the following command:
-
-```shell
-npm install @prisma/client
-```
-Inside the `prisma` directory, you will notice a new folder called `migrations`. It should also contain another folder that ends with `init` and contains a file called `migration.sql`. The `migration.sql` file contains the generated SQL.
-
-
-
-```sql
--- CreateEnum
-CREATE TYPE "Role" AS ENUM ('USER', 'ADMIN');
-
--- CreateTable
-CREATE TABLE "User" (
- "id" SERIAL NOT NULL,
- "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
- "updatedAt" TIMESTAMP(3) NOT NULL,
- "email" TEXT,
- "image" TEXT,
- "role" "Role" NOT NULL DEFAULT 'USER',
-
- CONSTRAINT "User_pkey" PRIMARY KEY ("id")
-);
-
--- CreateTable
-CREATE TABLE "Link" (
- "id" SERIAL NOT NULL,
- "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
- "updatedAt" TIMESTAMP(3) NOT NULL,
- "title" TEXT NOT NULL,
- "description" TEXT NOT NULL,
- "url" TEXT NOT NULL,
- "imageUrl" TEXT NOT NULL,
- "category" TEXT NOT NULL,
-
- CONSTRAINT "Link_pkey" PRIMARY KEY ("id")
-);
-
--- CreateTable
-CREATE TABLE "_LinkToUser" (
- "A" INTEGER NOT NULL,
- "B" INTEGER NOT NULL
-);
-
--- CreateIndex
-CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
-
--- CreateIndex
-CREATE UNIQUE INDEX "_LinkToUser_AB_unique" ON "_LinkToUser"("A", "B");
-
--- CreateIndex
-CREATE INDEX "_LinkToUser_B_index" ON "_LinkToUser"("B");
-
--- AddForeignKey
-ALTER TABLE "_LinkToUser" ADD CONSTRAINT "_LinkToUser_A_fkey" FOREIGN KEY ("A") REFERENCES "Link"("id") ON DELETE CASCADE ON UPDATE CASCADE;
-
--- AddForeignKey
-ALTER TABLE "_LinkToUser" ADD CONSTRAINT "_LinkToUser_B_fkey" FOREIGN KEY ("B") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
-```
-
-
-
-## Seeding the database
-
-Since the database is currently empty, we want to populate it with data. You'll use Prisma Client, a type-safe query builder to interact with your database and populate it with sample data.
-
-Create a new file called `/prisma/seed.ts`. Inside this file, import Prisma Client, instantiate it, and create some records:
-
-```ts
-// prisma/seed.ts
-
-import { PrismaClient } from '@prisma/client'
-import { links } from '../data/links'
-const prisma = new PrismaClient()
-
-async function main() {
- await prisma.user.create({
- data: {
- email: `testemail@gmail.com`,
- role: 'ADMIN',
- },
- })
-
- await prisma.link.createMany({
- data: links,
- })
-}
-
-main()
- .catch(e => {
- console.error(e)
- process.exit(1)
- })
- .finally(async () => {
- await prisma.$disconnect()
- })
-```
-We are first creating a user using the [`create()`](https://www.prisma.io/docs/orm/reference/prisma-client-reference#create) function, which creates a new database record.
-
-Next, we are using the [`createMany()`](https://www.prisma.io/docs/orm/reference/prisma-client-reference#createmany) function to create multiple records. We are passing the hard-coded data we have as a parameter.
-
-By default, Next.js [forces the use of `ESNext` modules](https://github.com/vercel/next.js/issues/7361), we need to override this behavior or else we will not be able to execute the seeding script. To do so, first install `ts-node` as a development dependency:
-
-```shell
-npm install --save-dev ts-node
-```
-Then in the `tsconfig.json` file, specify that `ts-node` will use `CommonJS` modules:
-
-```json
-diff
-{
- //...
-
- "include": [
- "next-env.d.ts",
- "**/*.ts",
- "**/*.tsx"
- ],
- "exclude": [
- "node_modules"
- ],
-+ "ts-node": {
-+ "compilerOptions": {
-+ "module": "CommonJS"
-+ }
-+ }
-}
-```
-Update your `package.json` file by adding a `prisma` key with a `seed` property defining the script for seeding the database:
-
-```json
-diff {
- // ...
- "devDependencies": {
- "@tailwindcss/forms": "^0.4.0",
- "@tailwindcss/typography": "^0.5.0",
- "@types/node": "^16.3.2",
- "@types/react": "^17.0.14",
- "autoprefixer": "^10.4.1",
- "postcss": "^8.4.5",
- "prisma": "4.8.0",
- "tailwindcss": "^3.0.8",
- "ts-node": "10.9.1",
- "typescript": "^4.9.4"
-+ },
-+ "prisma": {
-+ "seed": "ts-node --transpile-only ./prisma/seed.ts"
-+ }
-}
-
-You can now seed your database by running the following command:
-
-```shell
-npx prisma db seed
-```
-If everything worked correctly you should see the following output:
-
-```shell
-Environment variables loaded from .env
-Prisma schema loaded from prisma/schema.prisma
-Running seed: ts-node --compiler-options '{"module":"CommonJS"}' "prisma/seed.ts" ...
-
-🌱 Your database has been seeded.
-```
-## Use Prisma Studio to explore your database
-
-TailwindCSS Is Working!
-
- )
-}
-```
-You should see a screen that looks something like this:
-
-
-
-> **Note**: If you do not see Tailwind's styles being applied to your page, you may need to restart your development server.
-
-If that looks good, you have successfully configured TailwindCSS and can move on to the next step, setting up the database!
-
-## Create a MongoDB instance
-
-In this project, you will be using Prisma to interact with a MongoDB database. Before you configure Prisma, however, you will need a MongoDB instance to connect to!
-
-You will set up a MongoDB cluster using Mongo's [Atlas](https://www.mongodb.com/atlas) cloud data platform.
-
-> **Note**: You could, of course, set up a MongoDB instance any way you are comfortable. Atlas, however, provides the easiest and quickest experience. The only requirement by Prisma is that your MongoDB is deployed with a [replica set](https://www.mongodb.com/docs/manual/tutorial/deploy-replica-set/).
-
-Head over to the Atlas home page linked above. If you don't already have an account, you'll want to create one.
-
-
-
-If you will be using an existing account, head to the dashboard. From there you will see a dropdown in the top left corner of the screen. If you pop that open you will see the option New Project.
-
- 
-
- Once you click on that, hit the **Build a Database** button.
-
- 
-
- From there you should be able to follow along with the rest of the steps below.
-
-
-
-You should land on a screen with a few options. Choose the **Free** option for the purposes of this series. Then hit the **Create** button:
-
-
-
-When you select that option, you will be brought to a page that allows you to configure the cluster that will be generated. For your application, you can use the default settings. Just click **Create Cluster** near the bottom right of the page.
-
-
-
-This will kick off the provisioning and deployment of your MongoDB cluster! All you need now is a database user and a way to connect to the database. Fortunately, MongoDB will walk you through this setup during their quickstart process.
-
-You will see a few prompts that help you make these configurations. Follow the prompts to create a new user.
-
-
-
-Then, in the **Where would you like to connect from?** section, hit **Add My Current IP Address** to whitelist your development machine's IP address, allowing it to connect to the database.
-
-
-
-With those steps completed, your database should finish its provisioning process within a few minutes *(at most)* and be ready for you to play with!
-
-## Set up Prisma
-
-Now that you have a MongoDB database to connect to, it's time to set up Prisma!
-
-### Initialize and configure Prisma
-
-The first thing you will want to do is install the [Prisma CLI](https://www.prisma.io/docs/orm/tools/prisma-cli) as a development dependency. This is what will allow you to run various Prisma commands.
-
-```shell
-npm i -D prisma
-```
-To initialize Prisma within the project, simply run:
-
-```shell
-npx prisma init --datasource-provider mongodb
-```
-This will create a few different files in your project. You will see a `prisma` folder with a `schema.prisma` file inside of it. This is where you will define your schema and model out your data.
-
-It will also generate a `.env` file automatically if one did not previously exist with a sample environment variable that will hold your database's connection string.
-
-If you open up `./prisma/schema.prisma` you should see a default starter template of a Prisma schema.
-
-```prisma
-// ./prisma/schema.prisma
-// This is your Prisma schema file,
-// learn more about it in the docs: https://pris.ly/d/prisma-schema
-
-generator client {
- provider = "prisma-client-js"
-}
-
-datasource db {
- provider = "mongodb"
- url = env("DATABASE_URL")
-}
-```
-> **Note**: This file is written in PSL (Prisma Schema Language), which allows you to map out your schema. For more information on Prisma schemas and PSL, check out the [Prisma docs](https://www.prisma.io/docs/orm/prisma-schema).
-
-In the `url` of the [`datasource`](https://www.prisma.io/docs/orm/prisma-schema/overview/data-sources) block, you can see it references the `DATABASE_URL` environment variable from the `.env` file using the `env()` function PSL provides. Prisma uses [dotenv](https://www.npmjs.com/package/dotenv) under the hood to expose those variables to Prisma.
-
-### Set your environment variable
-
-You will now give Prisma the correct connection string in your [environment variable](https://www.prisma.io/docs/orm/more/development-environment/environment-variables) so it will be able to connect to the database.
-
-To find your connection string on the Atlas dashboard hit the **Connect** button.
-
-
-
-This will pop open a modal. Hit the **Connect your application** option.
-
-
-
-This should reveal a few bits of information. The piece you care about is the connection string.
-
-
-
-In your `.env` file, replace the default connection string with your MongoDB connection string. This connection string should follow this format:
-
-```shell
-mongodb+srv://USERNAME:PASSWORD@HOST:PORT/DATABASE
-```
-After pasting in your connection string and modifying it to match the above format, you should be left with a string that looks like this:
-
-```shell
-mongodb+srv://sadams:@cluster0.vv1we.mongodb.net/kudos?retryWrites=true&w=majority
-```
-> **Note**: Notice the `kudos` database name. You can put any name you want for your `DATABASE` here. MongoDB will automatically create the new database if it does not already exist.
->
-> For more details on connecting to your MongoDB database, check out the [docs](https://www.prisma.io/docs/getting-started/setup-prisma/add-to-existing-project/mongodb/connect-your-database-typescript-mongodb).
-
-### Model the data
-
-Now you can begin to think about your data model and start to map out the [collections](https://www.mongodb.com/docs/compass/current/collections/) for your database. Note that you are _not_ going to model out your entire dataset in this article. Instead, you will iteratively build the Prisma schema throughout the entire series.
-
-For this section, however, create a `User` model you will use in the next section of this series which handles setting up authentication.
-
-Over in `prisma/prisma.schema`, add a new [`model`](https://www.prisma.io/docs/orm/prisma-schema/data-model/models#defining-models) to your schema named `User`. This will be where you define what a user should look like in the database.
-
-```prisma
-// ./prisma/schema.prisma
-model User {
-
-}
-```
-> **Note**: MongoDB is a schemaless database built for flexible data so it may seem counterintuitive to define a "schema" for the data you are storing in it. As schemaless databases grow and evolve, however, the problem occurs where it becomes difficult to keep track of what data lives where while accounting for legacy data shapes. Because of this, defining a schema may save some headaches in the long run.
-
-Every Prisma model needs to have a unique `id` field.
-
-```prisma
-// ./prisma/schema.prisma
-model User {
- id String @id @default(auto()) @map("_id") @db.ObjectId
-}
-```
-The code above will create an `id` field and let Prisma know this is a unique identifier with the [`@id`](https://www.prisma.io/docs/reference/api-reference/prisma-schema-reference#id) attribute. Because MongoDB automatically creates an `_id` field for every collection, you will let Prisma know using the [`@map`](https://www.prisma.io/docs/reference/api-reference/prisma-schema-reference#map) attribute that while you are calling this field `id` in the schema, it should map to the `_id` field in the database.
-
-The code will also define the data type for your `id` field and set a default value of `auto()`, which will allow you to make use of MongoDB's automatically generated unique IDs.
-
-> **Note**: When using Prisma with MongoDB, _every_ model **must** have a unique identifier field defined exactly like this to properly map to the `_id` field MongoDB generates. The only part of this field definition that may vary in your schema is what you decide to name the field you map to the underlying `_id` field.
-
-Now that you have an `id` field, go ahead and add some other useful data to the `User` model.
-
-```prisma
-// ./prisma/schema.prisma
-model User {
- id String @id @default(auto()) @map("_id") @db.ObjectId
- createdAt DateTime @default(now())
- updatedAt DateTime @updatedAt
- email String @unique
- password String
-}
-```
-As you can see above, you will be adding two `DateTime` type fields that will keep track of when a user gets created and when it is updated. The [`@updatedAt`](https://www.prisma.io/docs/reference/api-reference/prisma-schema-reference#updatedat) attribute will automatically update that field with a current timestamp any time that user is updated.
-
-It will also add an `email` field of type `String` that must be unique, indicated by the [`@unique`](https://www.prisma.io/docs/reference/api-reference/prisma-schema-reference#unique) attribute. This means no other user can have the same email.
-
-Finally, you will have a password field which is just a plain string.
-
-That's all you will need in the `User` model for now! You can now push this schema to MongoDB so you can see the collection it creates.
-
-### Push schema changes
-
-After making changes to our schema you can run the command:
-
-```shell
-npx prisma db push
-```
-This will push your schema changes to MongoDB, creating any new collections or indexes you have defined. For example, when you push your schema as it is now, you should see the following in the output:
-```
-Applying the following changes:
-
-[+] Collection `User`
-[+] Unique index `User_email_key` on ({"email":1})
-```
-Because MongoDB is _schemaless_, there is no real concept of _migrations_. A schemaless database's data can fluidly change and evolve as the application's scope grows and changes. This command simply creates the defined collections and indexes.
-
-
-
-## Summary & What's next
-
-In this article, you got your Remix application up and running, along with your MongoDB instance. You also set up Prisma and TailwindCSS in your project and began to model out the data you will use in the next section of this series.
-
-In the next article you will learn about:
-
-- Setting up session-based authentication in Remix
-- Storing and modifying user data with Prisma and MongoDB
-- Building a Login form
-- Building a Signup form
-
diff --git a/apps/blog/content/blog/fullstack-remix-prisma-mongodb-2-ZTmOy58p4re8/index.mdx b/apps/blog/content/blog/fullstack-remix-prisma-mongodb-2-ZTmOy58p4re8/index.mdx
deleted file mode 100644
index 86973fba36..0000000000
--- a/apps/blog/content/blog/fullstack-remix-prisma-mongodb-2-ZTmOy58p4re8/index.mdx
+++ /dev/null
@@ -1,1239 +0,0 @@
----
-title: "Build A Fullstack App with Remix, Prisma & MongoDB: Authentication"
-slug: "fullstack-remix-prisma-mongodb-2-ZTmOy58p4re8"
-date: "2022-04-26"
-authors:
- - "Sabin Adams"
-metaTitle: "Build A Fullstack App with Remix, Prisma & MongoDB - Authentication"
-metaDescription: "Learn how to build and deploy a fullstack application using Remix, Prisma, and MongoDB. In this article, we will be setting up authentication for our Remix application using session-based authentication."
-metaImagePath: "/fullstack-remix-prisma-mongodb-2-ZTmOy58p4re8/imgs/meta-4b70ee51aee99eaddac2a48baa614189c5fa74c2-1920x1080.png"
-heroImagePath: "/fullstack-remix-prisma-mongodb-2-ZTmOy58p4re8/imgs/hero-29016ded5a59403f81349c8247116f8f084a0ae2-844x474.svg"
-heroImageAlt: "Build A Fullstack App with Remix, Prisma & MongoDB: Authentication"
-series: fullstack-remix-prisma-mongodb
-seriesIndex: 2
-
-tags:
- - "education"
----
-
-Welcome to the second article of this series where you are learning how to build a full-stack application from the ground up using MongoDB, Prisma, and Remix! In this part, you will set up session-based authentication for your Remix application.
-
-## Table Of Contents
-
-- [Introduction](#introduction)
- - [Development environment](#development-environment)
-- [Set up a login route](#set-up-a-login-route)
-- [Create a re-usable layout component](#create-a-re-usable-layout-component)
-- [Create the sign in form](#create-the-sign-in-form)
- - [Build the form](#build-the-form)
- - [Create a form field component](#create-a-form-field-component)
-- [Add a sign up form](#add-a-sign-up-form)
- - [Store the form action in state](#store-the-form-action-in-state)
- - [Add toggleable fields](#add-toggleable-fields)
-- [The authentication flow](#the-authentication-flow)
-- [Build the register function](#build-the-register-function)
- - [Create an instance of `PrismaClient`](#create-an-instance-of-prismaclient)
- - [Update your data model](#update-your-data-model)
- - [Add a user service](#add-a-user-service)
-- [Build the login function](#build-the-login-function)
-- [Add session management](#add-session-management)
-- [Handle the login and register form submissions](#handle-the-login-and-register-form-submissions)
-- [Authorize users on private routes](#authorize-users-on-private-routes)
-- [Add form validation](#add-form-validation)
-- [Summary & What's next](#summary--whats-next)
-
-Login Route
-
- )
-}
-```
-The default export of a route file is the component Remix renders into the browser.
-
-Start the development server using `npm run dev` and navigate to [`http://localhost:3000/login`](http://localhost:3000/login), and you should see the route rendered.
-
-
-
-This works, but doesn't look very nice yet... Next you will spruce it up a bit by adding an actual sign in form.
-
-## Create a re-usable layout component
-
-First, create a component you will wrap your routes in to provide some shared formatting and styling. You will use the [composition](https://reactjs.org/docs/composition-vs-inheritance.html) pattern to create this `Layout` component.
-
-
-
-### Composition
-
- **Composition** is a pattern where you provide a component a set of child elements via its `props`. The `children` prop represents the elements defined between the opening and closing tag of the parent component. For example, consider this usage of a component named `Parent`:
-
- ```tsx
- The child
-
- ```
-
- In this case, the `` tag is a child of the `Parent` component and will be rendered into the `Parent` component wherever you decide to render the `children` prop value.
-
-
-
-
-To see this in action, create a new folder inside the `app` folder named `components`. Inside of that folder create a new file named `layout.tsx`.
-
-In that file, export the following [function component](https://reactjs.org/docs/components-and-props.html):
-
-```tsx
-// app/components/layout.tsx
-export function Layout({ children }: { children: React.ReactNode }) {
- return {children}
-}
-```
-This component uses Tailwind classes to specify you want anything wrapped in the component to take up the full width and height of the screen, use the mono font, and show a moderately dark blue as the background.
-
-Notice the `children` prop is rendered inside the ``. To see how this will get rendered when put to use, check out the snippets below:
-
-
-
-```tsx
-
- Child Element
-
-```
-```tsx
-
- Child Element
-
-```
-
-
-## Create the sign in form
-
-Now you can import that component into the `app/routes/login.tsx` file and wrap your `` tag inside of the new `Layout` component instead of the `` where it currently lives:
-
-```tsx
-// app/routes/login.tsx
-import { Layout } from '~/components/layout'
-
-export default function Login() {
- return (
-
- Login Route
-
- )
-}
-```
-### Build the form
-
-Next add a sign in form that takes in `email` and `password` inputs and displays a submit button. Add a nice welcome message at the top to greet users when they enter your site and center the entire form on the screen using [Tailwind's flex classes](https://tailwindcss.com/docs/flex).
-
-```tsx
-// app/routes/login.tsx
-import { Layout } from '~/components/layout'
-
-export default function Login() {
- return (
-
-
- Welcome to Kudos!
- Log In To Give Some Praise!
-
-
-
-
- )
-}
-```
-
-
-At this point, you don't need to worry about where the `
- {message.body} -
-
-
-+ - {user.name} -
-
-+ {user.messages.map((message, i) =>
- - {message.body} -
-
- {
- results.data?.users.map((user, i) => )
- }
-
- )
-}
-
-export default App
-```
-Notice your API request results are properly typed based off of the types within the API itself! If both your API and Client are running, head over to the browser. You should now see all of your data!
-
-
-
-Congrats! 🎉 At this point, you have implemented a completely end-to-end type safe application with two separate pieces: an API and the client.
-
-The only thing left to do is deploy the project so you can share it!
-
-## Push your projects to Github
-
-You will be using [Render](https://render.com/) to deploy both of your codebases. Before doing so, however, you need to host your code on Github.
-
-> **Note**: If you don't already have a Github account, you can create one for free [here](https://github.com/signup).
-
-In the top left corner of the home page, hit the **New** button to create a new repository:
-
-
-
-Give your repository a name and then hit **Create repository**:
-
-
-
-You will need to retrieve the SSH url for this repository to use later on. Grab that from the location shown below:
-
-
-
-Now within your React application, run the follwing command to initialize and push a local repository, replacing `Loading
- }
- return (
-
-
-
-
- )
- }
-}
-
-export default graphql(
- gql`
- {
- hello
- }
- `,
-)(App)
-```
-> The `App` component sends a simple `hello` query using Apollo Client
-
-In your local development setup, where the React app is loaded from [`http://localhost:3000`](http://localhost:3000) and the GraphQL server is serving at [`http://localhost:4000`](http://localhost:4000)/graphql, you’ll now get an access control error if you’re trying to run the app:
-
-
-
-What exactly is the issue when CORS is not enabled? Well, CORS is in fact a _specification_ for a communication flow between client (a browser) and server. In some situations, this flow requires the server to process HTTP [OPTIONS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS) requests as can be seen from this flowchart:
-
- method ([source](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing#/media/File:Flowchart_showing_Simple_and_Preflight_XHR.svg))](/enabling-cors-for-express-graphql-apollo-server-1ef999bfb38d/imgs/1*m6QGz5tXtLt7uVapNCpBEw.png)_The CORS flow might required additional HTTP requests with the [OPTIONS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS.png) method ([source](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing#/media/File:Flowchart_showing_Simple_and_Preflight_XHR.svg))_
-
-The problem is that neither `express-graphql` nor `apollo-server` accept HTTP requests other than GET and POST — which is why the request fails in our scenario. This is also indicated by the error message we saw in the console: `OPTIONS [http://localhost:4000](http://localhost:4000) 405 (Method not allowed)`.
-
-> [Here](https://github.com/graphql/express-graphql/issues/14) is the GitHub discussion on `express-graphql` where this issue first came up**.**
-
-Luckily, the solution is very simple. As `express-graphql` and `apollo-server` are both based on [express.js](https://github.com/expressjs), you can simply use its standard [cors](/enabling-cors-for-express-graphql-apollo-server-1ef999bfb38d/imgs/cors#configuration-options) middleware to fix the issue.
-
-Uncommenting [line 23](https://github.com/nikolasburk/graphql-cors-example/blob/master/server/index.js#L23) in `server.js` will enable the cors middleware for your express server: `app.use(cors())`. Having the middleware enabled ensures your express server sets the proper HTTP header, enabling your React app to load data from it:
-
- middleware, the server sets the correct HTTP header enabling cross-origin resource sharing](/enabling-cors-for-express-graphql-apollo-server-1ef999bfb38d/imgs/1*LnVsDQuQtSl-Wt-m6DfO5g.png)_Using the [cors](https://github.com/expressjs/cors) middleware, the server sets the correct HTTP header enabling cross-origin resource sharing_
-
-## Summary
-
-CORS is an important protection mechanism preventing websites from downloading malicious resources, but from a developer standpoint [it can be a pain to properly configure it](https://devrant.com/rants/133438/i-seriously-dont-understand-cors-fml-i-tried-to-access-the-web-api-i-found-onlin).
-
-When using `express-graphql` and `apollo-server`, all you need to do is include the standard [cors](https://github.com/expressjs/cors) middleware used in express.js apps and you’re good to go:
-
-```js
-// other imports ...
-const cors = require('cors')
-
-const app = express()
-
-app.use(cors()) // enable `cors` to set HTTP response header: Access-Control-Allow-Origin: *
-app.use('/graphql', bodyParser.json(), graphqlExpress({ schema }))
-
-app.listen(PORT)
-```
\ No newline at end of file
diff --git a/apps/blog/content/blog/full-stack-typesafety-with-angular-nest-nx-and-prisma-CcMK7fbQfTWc/index.mdx b/apps/blog/content/blog/full-stack-typesafety-with-angular-nest-nx-and-prisma-CcMK7fbQfTWc/index.mdx
deleted file mode 100644
index 5f43cb3172..0000000000
--- a/apps/blog/content/blog/full-stack-typesafety-with-angular-nest-nx-and-prisma-CcMK7fbQfTWc/index.mdx
+++ /dev/null
@@ -1,621 +0,0 @@
----
-title: "Full Stack Type Safety with Angular, Nest, Nx, and Prisma"
-slug: "full-stack-typesafety-with-angular-nest-nx-and-prisma-CcMK7fbQfTWc"
-date: "2021-01-19"
-authors:
- - "Ryan Chenkie"
-metaTitle: "Applying Full Stack Type Safety with Angular, Nest, Nx & Prisma"
-metaDescription: "Learn how Angular, NestJS, Nx, and Prisma can deliver full-stack type safety from the frontend to the database in a TypeScript app."
-metaImagePath: "/full-stack-typesafety-with-angular-nest-nx-and-prisma-CcMK7fbQfTWc/imgs/meta-6edf92a2f15ffb62ed50e0da3deed2b2908d0156-2398x1208.png"
-heroImagePath: "/full-stack-typesafety-with-angular-nest-nx-and-prisma-CcMK7fbQfTWc/imgs/hero-2e21e72be724fc37acc24f269c8b6a0628ad5a18-870x438.jpg"
-heroImageAlt: "Full Stack Type Safety with Angular, Nest, Nx, and Prisma"
-tags:
- - "education"
----
-
-TypeScript really shines when we can extend type safety to all parts of our stack. In this article, we'll look at how to apply type safety to every part of a full stack Angular and NestJS app, including database access. We'll see how to share types across the stack by using an Nx monorepo.
-
-2020 was a great year for TypeScript. Usage surged, developers came to love the benefits of type safety, and the language saw adoption in many different settings.
-
-While TypeScript might be fairly new to developers who mainly work with React, Vue, Svelte, and others, it has been around for quite some time for Angular developers. Angular (version 2+) was initially authored in 2015 and was done so using TypeScript. The Angular team made an early bet on type safety, encouraging developers to write their Angular apps in TypeScript as well, even though writing them in JavaScript was an option.
-
-Many Angular developers were initially resistant. TypeScript wasn't very mature in 2015 and there was a steep learning curve. It was common to be slowed down by environment incompatabilities and bugs. All around, there was often a great deal of frustration.
-
-Fast-forward to 2021 and Angular developers have been enormously successful using TypeScript. Teams have benefited greatly from type safety over the years.
-
-While type safety for Angular applications is nothing new, it's less common for Angular developers who work across the full stack. Frameworks like NestJS have made it easy to use TypeScript in a Node environment, but one spot that has continued to lack is at the database. Several tools now exist for acheiving type-safe database access, [Prisma](https://www.prisma.io) being one of them.
-
-In this article, we'll look at how we can use the types generated by Prisma to apply type safety to all parts of an Angular and Nest ecommerce application. We'll work in an Nx monorepo so that we can easily import type across the whole stack. Let's get started!
-
-Check out the [code for the project on GitHub](https://github.com/chenkie/shirt-shop).
-
-
-
-## Create an Nx Workspace
-
-One of the easiest ways to share types between a front end and backend project is to house everything under a monorepo. [Nx Dev Tools](https://nx.dev) (created by [Nrwl](https://twitter.com/nrwl_io)) makes working with monorepos simple. Nx stipulates a set of conventions that, when followed, allow for simplicity when maintaining multiple applications under a single repository.
-
-Let's start by creating an Nx workspace for our project. We'll use the `create-nx-workspace` command to do so.
-
-In a terminal window, create a workspace with a preset of `angular`.
-
-
-
-```shell
-npx create-nx-workspace --preset=angular
-```
-
-
-An interactive prompt takes us through the setup process. Select a name for the workspace and application and then continue through the prompts.
-
-
-
-Once Nx finishes wiring up the workspace, open it up and try running the Angular application.
-
-
-
-```shell
-npm start
-```
-
-
-This command will tell Nx to serve the Angular application that was created as the workspace initialized. After it compiles, open up `localhost:4200` to make sure everything is working.
-
-
-
-## Add a NestJS Application
-
-Our front end is ready to go but we haven't yet included a project for the backend. Let's add a NestJS project to the workspace.
-
-To add our NestJS project, we first need to install the official NestJS plugin for Nx. In a new terminal window, grab the `@nrwl/nx` package from npm.
-
-
-
-```shell
-npm install -D @nrwl/nest
-```
-
-
-After installation, use the plugin to generate a NestJS project within the workspace. Since we'll only have one backend project for this example, let's just name it "api".
-
-
-
-```shell
-nx generate @nrwl/nest:application api
-```
-
-
-Once the generator finishes, we can see a new folder called `api` under the `apps` directory. This is where our NestJS app lives.
-
-The default NestJS installation comes with a single endpoint which returns a "hello world" message. Let's start the API and make sure we can access the endpoint. To start the API, target the `nx serve` command directly at the NestJS app.
-
-
-
-```shell
-nx serve api
-```
-
-
-Once the API is up and running, go to `http://localhost:3333/api` in the browser and make sure you can see the "hello world" message.
-
- and is the place where we define the shape of our database. We use it to describe the tables for our databases and their columns, the relationships between tables, and more.
-
-When we create a Prisma model, we need to select a `provider` for our datasource. The default `schema.prisma` file comes with a datasource called `db` which uses PostgreSQL as the provider.
-
-Instead of using Postgres, let's use SQLite so we can keep things simple. Switch up the `db` datasource so that uses SQLite. Point the `url` parameter to a file called `dev.db` within the filesystem.
-
-
-
-```prisma
-datasource db {
- provider = "sqlite"
- url = "file:./dev.db"
-}
-```
-
-
-**Note:** We don't need to create the `dev.db` file ourselves. Its creation will be taken care of for us in a later step.
-
-Let's now set up a simple model for our shop. To get ourselves started, let's work with a single table called `Product`. To do so, create a new `model` in the schema file and give it some fields.
-
-
-
-```prisma
-model Product {
- id String @id @default(cuid())
- name String
- description String
- image String
- price Int
- sku String
-}
-```
-
-
-The `id` field is marked as the primary key via the `@id` directive. We're also setting its default value to be a collision-resistant unique ID. The other fields and fairly straight-forward in their purpose.
-
-With the model in place, let's run our first migration so that the filesystem database file gets created and populated with our `Product` table.
-
-
-
-```shell
-npx prisma migrate dev --preview-feature
-```
-
-
-An interactive prompt will ask for the name of the migration. Call it whatever you like, something like `init` works fine.
-
-After the migration completes, a `dev.db` file is created in the `prisma` directory, along with a `migrations` directory. It's within the `migrations` directory that all of the SQL that's used to perform our database migrations is stored. Since these files are raw SQL, we have the opportunity to adjust them before they operate on our databases. Read the [migrate docs](https://www.prisma.io/docs/concepts/components/prisma-migrate) to find out more about how you can customize the migration behavior.
-
-## View the Database with Prisma Studio and Seed Some Data
-
-With the database in place and populated with a table, we can now take a look at it and add some data using [Prisma Studio](https://www.prisma.io/docs/concepts/components/prisma-studio). Prisma Studio is a GUI for viewing and managing our databases and is available in-browser or via a [desktop app](https://github.com/prisma/studio/releases).
-
-In a new terminal window, use the Prisma CLI to fire up Prisma Studio.
-
-
-
-```shell
-npx prisma studio
-```
-
-
-Running this command will open Prisma Studio. In the browser, it opens at `localhost:5555`.
-
-
-
-We can use Prisma Studio to add data to the database manually. This isn't a great approach if we have a lot of data to seed, but it's useful if we want to add a few records to test with.
-
-Add as many rows as you like and input data for them. If you would like to work with the data seen in this article, you can grab it in [this gist](https://gist.github.com/chenkie/9bd80bc2767e72f71582a02e05c7f853).
-
-
-
-Next, save the changes. IDs for each row will automatically be generated.
-
-
-
-We now have all the pieces of our stack in place! We're ready to start writing some code to surface the data from the API and call for it from the Angular app.
-
-## Create a Products Controller for the API
-
-The data in our database is ready to go. What we need now is an endpoint we can call to retreive it. To make this happen, we'll create a library for our NestJS controller and a service that we can reach into to expose an endpoint that responds to `GET` requests.
-
-Use the NestJS Nx plugin to generate a new library called `products`. Include a controller and a service within.
-
-
-
-```shell
-nx generate @nrwl/nest:library products --controller --service
-```
-
-
-We'll create a method in the service to reach into our database to get the data. Then, in the controller, we'll expose a `GET` endpoint which uses the service to get that data and return it to the client.
-
-Let's start by building out the database query within the service. This is the first spot we'll see Prisma's types really shine!
-
-Within `products.service.ts`, import `PrismaClient`, create an instance of it, and expose a `public` method to query for the data.
-
-
-
-```ts
-// libs/products/src/lib/products.service.ts
-
-import { Injectable } from '@nestjs/common'
-import { PrismaClient, Product } from '@prisma/client'
-
-const prisma = new PrismaClient()
-
-@Injectable()
-export class ProductService {
- public getProducts(): Promise{this.props.data.hello}
-
- ![]()
-
-{{ product.name }}
-{{ product.description }}
-{{ product.price | currency }}
- -Welcome to Shirt Shop!
-Loading...
- if (error) returnOh no... {error.message}
- - return ( -
-
- Awesome Links
-
-
-
-
- )
-}
-```
-You are using the `useQuery` hook to send queries to the GraphQL endpoint. This hook has a required parameter of a GraphQL query string. When the component renders, `useQuery` returns an object which contains three values:
-
-- `loading`: a boolean that determines whether or not the data has been returned.
-- `error`: an object that contains the error message in case an error occurs after sending the query.
-- `data`: contains the data returned from the API endpoints.
-
-After you save the file and you navigate to `http://loclahost:3000`, you will see a list of links which are fetched from the database.
-
-## Pagination
-
-`AllLinksQuery` returns all the links you have in the database. As the app grows and you add more links, you will have a large API response that will take a long time to load. Also the database query sent by the resolver will become slower, since you are returning the links in the database using the `prisma.link.findMany()` function.
-
-A common approach to improve performance is to add support for **pagination**. This is when you split a large data set into smaller chunks that can be requested as needed.
-
-There are different ways to implement pagination. You can do numbered pages, for example like Google search results,
-or you can do infinite scrolling like Twitter's feed.
-
-.
-
-
-
-- Cursor-based pagination: you use a cursor to bookmark a location in a result set. On subsequent requests you can then jump straight to that saved location. Similar to how you can access an array by its index.
-
-The cursor must be a unique, sequential column - such as an ID or a timestamp. This approach is more efficient than offset-based pagination and will be the one you use in this tutorial.
-
-
-
-### Pagination in GraphQL
-
-To make the GraphQL API support pagination, you need to introduce [Relay Cursor Connections Specification](https://relay.dev/graphql/connections.htm) to the GraphQL schema. This is a specification for how a GraphQL server should expose paginated data.
-
-Here is what the paginated query of `allLinksQuery` will look like:
-
-```graphql
-query allLinksQuery($first: Int, $after: ID) {
- links(first: $first, after: $after) {
- pageInfo {
- endCursor
- hasNextPage
- }
- edges {
- cursor
- node {
- id
- imageUrl
- title
- description
- url
- category
- }
- }
- }
-}
-```
-The query takes two arguments, `first` and `after`:
-
-- `first`: an `Int` that specifies how many items you want the API to return.
-- `after`: a `ID` argument that bookmarks the last item in a result set, this is the cursor.
-
-This query returns an object containing two fields, `pageInfo` and `edges`:
-
-- `pageInfo`:an object that helps the client determine if there is more data to be fetched. This object contains two fields, `endCursor` and `hasNextPage`:
- - `endCursor`: the cursor of the last item in a result set. This cursor is of type `String`
- - `hasNextPage`: a boolean returned by the API that lets the client know if there are more pages that can be fetched.
-- `edges` is a an array of objects, where each object has a `cursor` and a `node` fields. The `node` field here returns the `Link` object type.
-
-You will implement one-way pagination, where some links are requested when the page first loads, then the user can fetch more by clicking a button.
-
-{/* */}
-
-Alternatively, you can make this request as the user reaches the end of the page when scrolling.
-
-The way this works is that you fetch some data as the page first loads. Then after clicking a button, you send a second request to the API which includes how many items you want returned and a cursor. The data is then returned and displayed on the client.
-
-
-
-> **Note**: an example of two-way pagination is a chat app like Slack, where you can load messages by going forwards or backwards.
-
-### Modifying the GraphQL schema
-
-Pothos provides a plugin for handling relay-style cursor-pagination with nodes, connections, and other helpful utilities
-
-Install the plugin with the following command:
-
-```sh
-npm install @pothos/plugin-relay
-```
-Update the `graphql/builder.ts` to include the relay plugin.
-
-```ts
-diff
-// graphql/builder.ts
-import SchemaBuilder from "@pothos/core";
-import PrismaPlugin from '@pothos/plugin-prisma';
-import prisma from "../lib/prisma";
-import type PrismaTypes from '@pothos/plugin-prisma/generated';
-+import RelayPlugin from '@pothos/plugin-relay';
-
-
-export const builder = new SchemaBuilder<{
- PrismaTypes: PrismaTypes
-}>({
-- plugins: [PrismaPlugin],
-+ plugins: [PrismaPlugin, RelayPlugin],
-+ relayOptions: {},
- prisma: {
- client: prisma,
- }
-})
-
-builder.queryType({
- fields: (t) => ({
- ok: t.boolean({
- resolve: () => true,
- }),
- }),
-});
-```
-### Updating the resolver to return paginated data from the database
-
-To use cursor-based pagination make the following update to the `links` query:
-
-```ts
-diff
-// ./graphql/types/Link.ts
-// code remains unchanged
-
-builder.queryField('links', (t) =>
-- t.prismaField({
-+ t.prismaConnection({
-- type: ['Link'],
-+ type: 'Link',
-+ cursor: 'id',
- resolve: (query, _parent, _args, _ctx, _info) =>
- prisma.link.findMany({ ...query })
- })
-)
-```
-The `prismaConnection` method is used to create a `connection` field that also pre-loads the data inside that connection.
-
-
-
- -
- {data.links.map((link: Link) => (
-
-
- --
{link.category}
-{link.title}
-{link.description}
- - {link.url.replace(/(^\w+:|^)\/\//, '')} - - -
- ))}
-
Loading...
; - if (error) returnOh no... {error.message}
; - - const { endCursor, hasNextPage } = data.links.pageInfo; - - return ( -
-
- Awesome Links
-
-
-
- );
-}
-
-export default Home;
-```
-You are first passing a `variables` object to the `useQuery` hook, which contains a key called `first` with a value of `2`. This means you will be fetching two links. You can set this value to any number you want.
-
-The `data` variable will contain the data returned from the initial request to the API.
-
-You are then destructuring the `endCursor` and `hasNextPage` values from the `pageInfo` object.
-
-If `hasNextPage` is `true`, we will show a button that has an `onClick` handler. This handler returns a function that calls the `fetchMore()` function, which receives an object with the following fields:
-
-- A`variables` object that takes the `endCursor` returned from the initial data.
-- `updateQuery` function, which is responsible for updating the UI by combining the previous results with the results returned from the second query.
-
-If `hasNextPage` is `false`, it means there are no more links that can be fetched.
-
-If you save and your app is running, you should be able to fetch paginated data from your database.
-
-## Summary and Next-steps
-
-Congratulations! You successfully completed the second part of the course! If you run into any issues or have any questions, feel free to reach out in [our Slack community](https://slack.prisma.io).
-
-In this part, you learned about:
-
-- The advantages of using GraphQL over REST
-- How to build a GraphQL API using SDL
-- How to build a GraphQL API using Pothos and the benefits it offers
-- How to add support for pagination in your API and how to send paginated query from the client
-
-In [the next part](/fullstack-nextjs-graphql-prisma-3-clxbrcqppv) of the course, you will:
-
-- Add authentication using Auth0 to secure the API endpoint, this way, only logged in users can view the links
-- Create a mutation so that a logged-in user can bookmark a link
-- Create an admin-only route for creating links
-- Set up AWS S3 to handle file uploads
-- Add a mutation to create links as an admin
-
diff --git a/apps/blog/content/blog/fullstack-nextjs-graphql-prisma-3-clxbrcqppv/index.mdx b/apps/blog/content/blog/fullstack-nextjs-graphql-prisma-3-clxbrcqppv/index.mdx
deleted file mode 100644
index 99ed0327e6..0000000000
--- a/apps/blog/content/blog/fullstack-nextjs-graphql-prisma-3-clxbrcqppv/index.mdx
+++ /dev/null
@@ -1,907 +0,0 @@
----
-title: "Fullstack App With TypeScript, PostgreSQL, Next.js, Prisma & GraphQL: Authentication"
-slug: "fullstack-nextjs-graphql-prisma-3-clxbrcqppv"
-date: "2022-01-28"
-authors:
- - "Mahmoud Abdelwahab"
- - "Alex Ruheni"
-metaTitle: "Fullstack app with TypeScript, Next.js, Prisma & GraphQL - Authentication"
-metaDescription: "Learn how to build a fullstack app using TypeScript, PostgreSQL, Next.js, GraphQL, and Prisma. In this article, you will learn how to add authentication and authorization to your application using Auth0"
-metaImagePath: "/fullstack-nextjs-graphql-prisma-3-clxbrcqppv/imgs/meta-91075c8f117cdbd825ecc504f44bf57d5916e0af-1269x714.png"
-heroImagePath: "/fullstack-nextjs-graphql-prisma-3-clxbrcqppv/imgs/hero-6e7a91ceafb378a17154ba9cb238ed0953434c64-844x474.svg"
-heroImageAlt: "Fullstack App With TypeScript, PostgreSQL, Next.js, Prisma & GraphQL: Authentication"
-series: fullstack-nextjs-graphql-prisma
-seriesIndex: 3
-tags:
- - "education"
----
-
-This article is the third part of the course where you build a fullstack app with Next.js, GraphQL, TypeScript, Prisma
- and PostgreSQL. In this article, you will learn how to add authentication to your app.
-
-## Table of Contents
-
-- [Introduction](#introduction)
-- [Development environment](#development-environment)
-- [Clone the repository](#clone-the-repository)
-- [Seed the database](#seed-the-database)
- - [Project structure and dependencies](#project-structure-and-dependencies)
-- [Authentication and securing the GraphQL API using Auth0](#authentication-and-securing-the-graphql-api-using-auth0)
- - [Configure Auth0](#configure-auth0)
- - [Add the Auth0 SDK](#add-the-auth0-sdk)
- - [Secure the GraphQL API](#secure-the-graphql-api)
- - [Sync Auth0 users with the app's database](#sync-auth0-users-with-the-apps-database)
- - [Expose `localhost:3000` using Ngrok](#expose-localhost3000-using-ngrok)
- - [Define an API route for creating new users](#define-an-api-route-for-creating-new-users)
- - [Create links – auth protected page](#create-links--auth-protected-page)
- - [Bonus: protecting pages based on the user role](#bonus-protecting-pages-based-on-the-user-role)
-- [Summary and next steps](#summary-and-next-steps)
-
-## Introduction
-
-In this course, you will learn how to build "awesome-links", a fullstack app where users can browse through a list of curated links and bookmark their favorite ones.
-
-In [part 2](/fullstack-nextjs-graphql-prisma-2-fwpc6ds155), you built the GraphQL API using GraphQL Yoga and Pothos. You then used Apollo Client to consume the GraphQL API on the frontend.
-
-## Development environment
-
-To follow along with this tutorial, ensure you have [Node.js](https://nodejs.org/en/download/package-manager) and the [GraphQL extension](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql) installed. You will also need a PostgreSQL database running.
-
-If you're following along from part 2, you can skip project setup and jump into the [authentication and securing the GraphQL API using Auth0](#authentication-and-securing-the-graphql-api-using-auth0) section.
-
-> Note: You can set up PostgreSQL [locally](https://www.prisma.io/dataguide/postgresql/setting-up-a-local-postgresql-database) or a hosted instance on [Heroku](https://dev.to/prisma/how-to-setup-a-free-postgresql-database-on-heroku-1dc1). You will need a remote database for the deployment step at the end of the course.
-
-## Clone the repository
-
-You can find the [complete source code](https://github.com/prisma/awesome-links) for the course on GitHub.
-
-> Note: Each article has a corresponding branch. This way, you can follow along as you go through it. You'll have the same starting point as this article by checking out at [part-3 branch](https://github.com/prisma/awesome-links/tree/part-3). There might be a few differences between each branch, so to not run into any issues, it is recommended that you clone the branch for this article.
-
-To get started, navigate into the directory of your choice and run the following command to clone the repository:
-
-```shell
-git clone -b part-3 https://github.com/prisma/awesome-links.git
-```
-Navigate into the cloned application and install the dependencies:
-
-```shell
-cd awesome-links
-npm install
-```
-## Seed the database
-
-After setting up a PostgreSQL database, rename the `env.example` file to `.env` and set the connection string for your database. After that, run the following command to create the tables in your database:
-
-> Refer to [Part 1 – Add Prisma to your Project](/fullstack-nextjs-graphql-prisma-oklidw1rhw#add-prisma-to-your-project) for more details on the format of the connection string.
-
-```shell
-npx prisma migrate dev --name init
-```
-If `prisma migrate dev` did not trigger the seed step, run the following command to seed the database:
-
-```shell
-npx prisma db seed
-```
-This command will run the `seed.ts` file in the `/prisma` directory. `seed.ts` creates four links and one user in your database using Prisma Client.
-
-You can now start the application server by running the following command:
-
-```shell
-npm run dev
-```
-### Project structure and dependencies
-
-The project has the following folder structure:
-
-```txt
-awesome-links/
-┣ components/
-┃ ┣ Layout
-┃ ┗ AwesomeLink.tsx
-┣ data/
-┃ ┗ links.ts
-┣ graphql/
-┃ ┣ types/
-┃ ┣ builder.tsx
-┃ ┗ schema.ts
-┣ lib/
-┃ ┣ apollo.ts
-┃ ┗ prisma.ts
-┣ pages/
-┃ ┣ api/
-┃ ┃ ┗ graphql.ts
-┃ ┣ _app.tsx
-┃ ┣ about.tsx
-┃ ┗ index.tsx
-┣ prisma/
-┃ ┣ migrations/
-┃ ┣ schema.prisma
-┃ ┗ seed.ts
-┣ public/
-┣ styles/
-┃ ┗ tailwind.css
-┣ .env.example
-┣ .gitignore
-┣ next-env.d.ts
-┣ package-lock.json
-┣ package.json
-┣ postcss.config.js
-┣ README.md
-┣ tailwind.config.js
-┗ tsconfig.json
-```
-This is a Next.js application that uses the following libraries and tools:
-
-- [Prisma](https://www.prisma.io) for database access/CRUD operations
-- [Next.js](https://nextjs.org) as the fullstack React framework
-- [TailwindCSS](https://tailwindcss.com) for styling
-- [Pothos](https://pothos-graphql.dev) as the GraphQL schema construction library
-- [GraphQL Yoga](https://the-guild.dev/graphql/yoga-server) as the GraphQL server
-- [Apollo Client](https://www.apollographql.com/docs/react) as the GraphQL client
-
-The `pages` directory contains the following files:
-
-- `index.tsx`: fetches links from the API and displays them on the page. The results are paginated and you can fetch more links.
-- `_app.tsx`: root component that allows you to persist layouts and state when navigating between pages.
-- `/api/graphql.ts`: GraphQL endpoint using Next.js's [API routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes).
-
-## Authentication and securing the GraphQL API using Auth0
-
-### Configure Auth0
-
-To secure the app, you will use [Auth0](https://auth0.com) – an authentication and authorization drop-in solution.
-
-After [creating an account](https://auth0.com/signup), navigate to the **Applications** dropdown located on the left sidebar and select **Applications** from the sub-menu.
-
-
-
-Next, create a new application by clicking the **+ Create application** button. Give your app a name, select **Regular Web Application** and finalize creating the app by selecting the **Create** button on the bottom right of the dialog.
-
-
-
-Once the application is successfully created, navigate to the **Settings** tab and copy the following information to the `.env` file of your project:
-
-- Domain
-- Client ID
-- Client Secret
-
-
-
-```shell
-# .env
-AUTH0_SECRET='...' # run `openssl rand -hex 32` to generate a 32 bytes value
-AUTH0_BASE_URL='http://localhost:3000'
-AUTH0_ISSUER_BASE_URL='https://YOUR_APP_DOMAIN'
-AUTH0_CLIENT_ID='YOUR_CLIENT_ID'
-AUTH0_CLIENT_SECRET='YOUR_CLIENT_SECRET'
-```
-- `AUTH0_SECRET`: A long secret value used to encrypt the session cookie. You can generate a suitable string by running `openssl rand -hex 32` in your terminal.
-- `AUTH0_BASE_URL`: The base URL of your application.
-- `AUTH0_ISSUER_BASE_URL`: The URL of your Auth0 tenant domain.
-- `AUTH0_CLIENT_ID`: Your Auth0 application's Client ID.
-- `AUTH0_CLIENT_SECRET`: Your Auth0 application's Client Secret.
-
-Finally, you need to configure some of the application's URIs in the Auth0 dashboard. Add `http://localhost:3000/api/auth/callback` to the **Allowed Callback URLs**, and `http://localhost:3000` to the **Allowed Logout URLs** list.
-
-Save these configuration changes by clicking the **Save Changes** button at the bottom of the page.
-
-When you're deploying your app to production, you can replace `localhost` with your deployed app's domain. Auth0 allows multiple URLs, so you can include both `localhost` and production URLs – separated by a comma.
-
-
-
-### Add the Auth0 SDK
-
-You can add Auth0 to your project by installing the [Auth0 Next.js SDK](https://github.com/auth0/nextjs-auth0):
-
-```shell
-npm install @auth0/nextjs-auth0
-```
-Next, create an `auth/[...auth0].ts` file inside the `pages/api` directory and add the following code to it:
-
-```ts
-// pages/api/auth/[...auth0].ts
-import { handleAuth } from '@auth0/nextjs-auth0'
-
-export default handleAuth()
-```
-This [Next.js dynamic API route](https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes) will automatically create the following endpoints:
-
-- `/api/auth/login`: Auth0's login route.
-- `/api/auth/logout`: The route used to logout the user.
-- `/api/auth/callback`: The route Auth0 redirects the user to after a successful login.
-- `/api/auth/me`: The route to fetch the user profile from Auth0.
-
-Finally, navigate to the `pages/_app.tsx` file and update it with the following code that wraps your app with the `UserProvider` component from Auth0:
-
-```tsx
-// pages/_app.tsx
-import '../styles/tailwind.css'
-import { UserProvider } from '@auth0/nextjs-auth0/client'
-import Layout from '../components/Layout'
-import { ApolloProvider } from '@apollo/client'
-import type { AppProps } from 'next/app'
-import apolloClient from '../lib/apollo'
-
-function MyApp({ Component, pageProps }: AppProps) {
- return (
-
-
-
- {data?.links.edges.map(({ node }: { node: Link }) => (
-
- {hasNextPage ? (
-
- ) : (
- - You've reached the end!{" "} -
- )} -
-
-
-
-
-
-
-
- )
-}
-
-export default Admin
-
-export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
- const session = await getSession(req, res);
-
- if (!session) {
- return {
- redirect: {
- permanent: false,
- destination: '/api/auth/login',
- },
- props: {},
- }
- }
-
- return {
- props: {},
- };
-}
-```
-The `onSubmit` function passes the form values to the `createLink` mutation. A toast will be shown as the mutation is being executed – success, loading, or error.
-
-In `getServerSideProps`, if there is no session, you are redirecting the user to the login page. If a user record that matches the email of the logged-in user is found, the `/admin` page is rendered.
-
-Update `Header.tsx` file by adding a **+ Create** button authenticated users can use to create links.
-
-```tsx
-diff // components/Layout/Header.tsx
-/** imports */
-
-const Header = () => {
- const { user } = useUser()
- return (
- Create a new link
- -
-
- )
-}
-
-export default Admin
-
-// getServerSideProps code remains unchanged
-```
-The form includes a new input field to handle file upload. The input field accepts images of either `.png` or `.jpeg` formats. Whenever an image is uploaded, the `uploadPhoto` function sends a request to the `/api/upload-image` API endpoint. A toast will be shown as the request is being resolved by the API – success, loading, or error states.
-
-When the form is submitted, the URL of the image is included as a variable in the `createLink` mutation. A toast will appear as the mutation is being executed.
-
-## Summary and next steps
-
-You learned how to add support for image upload using AWS S3. In the [next part](/fullstack-nextjs-graphql-prisma-5-m2fna60h7c), you will deploy your app to Vercel and learn how you can use the Prisma Data Proxy to manage your database connection pool to ensure your application doesn't run out of connections.
-
diff --git a/apps/blog/content/blog/fullstack-nextjs-graphql-prisma-5-m2fna60h7c/index.mdx b/apps/blog/content/blog/fullstack-nextjs-graphql-prisma-5-m2fna60h7c/index.mdx
deleted file mode 100644
index 6f0d9ab140..0000000000
--- a/apps/blog/content/blog/fullstack-nextjs-graphql-prisma-5-m2fna60h7c/index.mdx
+++ /dev/null
@@ -1,165 +0,0 @@
----
-title: "Fullstack App With TypeScript, PostgreSQL, Next.js, Prisma & GraphQL: Deployment"
-slug: "fullstack-nextjs-graphql-prisma-5-m2fna60h7c"
-date: "2022-04-06"
-authors:
- - "Alex Ruheni"
- - "Mahmoud Abdelwahab"
-metaTitle: "Fullstack app with TypeScript, Next.js, Prisma & GraphQL - Deployment"
-metaDescription: "Learn how to build a fullstack app using TypeScript, PostgreSQL, Next.js, GraphQL and Prisma. In this article you are going to deploy your app to Vercel"
-metaImagePath: "/fullstack-nextjs-graphql-prisma-5-m2fna60h7c/imgs/meta-6b91985fb8bb4d0d06e95090aab1d8b0ede0696b-1269x714.png"
-heroImagePath: "/fullstack-nextjs-graphql-prisma-5-m2fna60h7c/imgs/hero-487ed996090048a8225eec985d2ea001c5e1486b-844x474.svg"
-heroImageAlt: "Fullstack App With TypeScript, PostgreSQL, Next.js, Prisma & GraphQL: Deployment"
-series: fullstack-nextjs-graphql-prisma
-seriesIndex: 5
-tags:
- - "education"
----
-
-This article is the final part of the course where you build a fullstack app with Next.js, GraphQL, TypeScript, Prisma, and PostgreSQL. In this article, you will learn how to deploy your app to Vercel.
-
-> **Update (May 2026):** This deployment chapter still works as a conceptual guide, but the Prisma Data Proxy steps are now historical. For new projects, prefer [Prisma Accelerate](https://www.prisma.io/accelerate) for connection pooling and caching, use the current [serverless deployment docs](https://www.prisma.io/docs/orm/prisma-client/deployment/serverless/deploy-to-vercel), and consider [Prisma Postgres](https://www.prisma.io/postgres) if you want a managed Postgres database with Prisma ORM.
-
-## Table of Contents
-
-- [Introduction](#introduction)
-- [Prerequisites](#prerequisites)
-- [Fork the repository](#fork-the-repository)
-- [Database access in serverless environments with the Prisma Data Proxy](#database-access-in-serverless-environments-with-the-prisma-data-proxy)
-- [Getting started with the Prisma Data Proxy](#getting-started-with-the-prisma-data-proxy)
-- [Update the application](#update-the-application)
- - [Enable the Prisma Data Proxy](#enable-the-prisma-data-proxy)
- - [Create new scripts in `package.json`](#create-new-scripts-in-packagejson)
-- [Deploy the app to Vercel](#deploy-the-app-to-vercel)
-- [Summary](#summary)
-
-## Introduction
-
-In this course you will learn how to build "awesome-links", a fullstack app where users can browse through a list of curated links and bookmark their favorite ones.
-
-In [part 4](/fullstack-nextjs-graphql-prisma-4-1k1kc83x3v), you added support for image uploads using AWS S3. In this part, you will walk through the original deployment flow for the series and see why connection pooling matters in serverless environments.
-
-## Prerequisites
-
-To follow along with this tutorial, you will need an account on [GitHub](https://github.com) and a [Vercel](https://vercel.com). You will also need a hosted PostgreSQL database.
-
-## Fork the repository
-
-You can find the [complete source code](https://github.com/prisma/awesome-links) for the course on GitHub. To follow along, fork the repository to your own GitHub account.
-
-If you're following along from the previous parts, ensure you have added your code to source control and pushed it to GitHub.
-
-## Database access in serverless environments with the Prisma Data Proxy
-
-Serverless functions are ephemeral and short-lived – _stateless_. When traffic to your application spikes, the number of instances of a serverless function also goes up. On the other hand, database connections are stateful and require a TCP connection between the application and the database.
-
-When a serverless function needs to access a database, it establishes a connection to it, submits a query, and receives the response from the database. The response data is then delivered to the client that invoked the serverless function, the database connection is closed and the function is torn down again.
-
-When there's a traffic spike, each serverless function will spawn a new database connection.
-
-
-
-Traditional databases such as PostgreSQL and MySQL typically have a _database connection limit_ that can be easily exhausted when there's a traffic spike to your application. When the connection limit is exhausted, the requests to your application would start failing.
-
-A solution to this problem is using a database connection pooler, such as [pgBouncer](https://www.pgbouncer.org/) for PostgreSQL or the [Prisma Data Proxy](https://www.prisma.io/docs/data-platform/data-proxy).
-
-The Prisma Data Proxy is a proxy server for your database that manages a connection pool and ensures existing database connections are reused. This prevents incoming user requests from failing and improves your app's performance.
-
-Create a new link
- -
-
- )
-}
-```
-You should see a screen that looks something like this:
-
-
-
-> **Note**: If you do not see Tailwind's styles being applied to your page, you may need to restart your development server.
-
-If that looks good, you have successfully configured TailwindCSS and can move on to the next step, setting up the database!
-
-## Create a MongoDB instance
-
-In this project, you will be using Prisma to interact with a MongoDB database. Before you configure Prisma, however, you will need a MongoDB instance to connect to!
-
-You will set up a MongoDB cluster using Mongo's [Atlas](https://www.mongodb.com/atlas) cloud data platform.
-
-> **Note**: You could, of course, set up a MongoDB instance any way you are comfortable. Atlas, however, provides the easiest and quickest experience. The only requirement by Prisma is that your MongoDB is deployed with a [replica set](https://www.mongodb.com/docs/manual/tutorial/deploy-replica-set/).
-
-Head over to the Atlas home page linked above. If you don't already have an account, you'll want to create one.
-
-TailwindCSS Is Working!
-
-
- )
-}
-```
-The default export of a route file is the component Remix renders into the browser.
-
-Start the development server using `npm run dev` and navigate to [`http://localhost:3000/login`](http://localhost:3000/login), and you should see the route rendered.
-
-
-
-This works, but doesn't look very nice yet... Next you will spruce it up a bit by adding an actual sign in form.
-
-## Create a re-usable layout component
-
-First, create a component you will wrap your routes in to provide some shared formatting and styling. You will use the [composition](https://reactjs.org/docs/composition-vs-inheritance.html) pattern to create this `Layout` component.
-
-Login Route
-The child
-` tag is a child of the `Parent` component and will be rendered into the `Parent` component wherever you decide to render the `children` prop value. -
{children}
-}
-```
-This component uses Tailwind classes to specify you want anything wrapped in the component to take up the full width and height of the screen, use the mono font, and show a moderately dark blue as the background.
-
-Notice the `children` prop is rendered inside the ``. To see how this will get rendered when put to use, check out the snippets below:
-
-
-
-```tsx
-
-
-```
-```tsx
-` tag inside of the new `Layout` component instead of the `
Child Element
-
-
-```
-
-
-## Create the sign in form
-
-Now you can import that component into the `app/routes/login.tsx` file and wrap your `Child Element
-` tag inside of the new `Layout` component instead of the `` where it currently lives:
-
-```tsx
-// app/routes/login.tsx
-import { Layout } from '~/components/layout'
-
-export default function Login() {
- return (
-
- Login Route
-
- )
-}
-```
-### Build the form
-
-Next add a sign in form that takes in `email` and `password` inputs and displays a submit button. Add a nice welcome message at the top to greet users when they enter your site and center the entire form on the screen using [Tailwind's flex classes](https://tailwindcss.com/docs/flex).
-
-```tsx
-// app/routes/login.tsx
-import { Layout } from '~/components/layout'
-
-export default function Login() {
- return (
-
-
- Welcome to Kudos!
- Log In To Give Some Praise!
-
-
-
-
- )
-}
-```
-
-
-At this point, you don't need to worry about where the `
Login Route
-
-
- Welcome to Kudos!
-Log In To Give Some Praise!
- - -