|
| 1 | +.. _node-prisma-integration: |
| 2 | + |
| 3 | +=============================== |
| 4 | +Tutorial: Integrate with Prisma |
| 5 | +=============================== |
| 6 | + |
| 7 | +.. facet:: |
| 8 | + :name: genre |
| 9 | + :values: tutorial |
| 10 | + |
| 11 | +.. meta:: |
| 12 | + :description: Learn how to connect a Node.js application using Prisma to a MongoDB database. |
| 13 | + :keywords: integrations, prisma, type safety |
| 14 | + |
| 15 | +.. contents:: On this page |
| 16 | + :local: |
| 17 | + :backlinks: none |
| 18 | + :depth: 2 |
| 19 | + :class: singlecol |
| 20 | + |
| 21 | +Overview |
| 22 | +-------- |
| 23 | + |
| 24 | +Prisma is an open source Object Relational Mapper (ORM) for Node.js. It supports both {+language+} |
| 25 | +and TypeScript, but it is primarily used with TypeScript to help you write readable and type-safe |
| 26 | +code. |
| 27 | + |
| 28 | +Schemas |
| 29 | +~~~~~~~ |
| 30 | + |
| 31 | +Schemas help developers avoid data inconsistency issues over time by defining the structure of |
| 32 | +your collection's documents. While you can define a schema at the database level within MongoDB, |
| 33 | +Prisma lets you define a schema at the application level. Because the Prisma Client is aware |
| 34 | +of the schema, developers using the Prisma Client have access to auto-completing queries. |
| 35 | + |
| 36 | +Data Modeling |
| 37 | +~~~~~~~~~~~~~ |
| 38 | + |
| 39 | +Generally, data that is accessed together should be stored together in a MongoDB collection. |
| 40 | +Prisma supports using embedded documents to keep data together. In use |
| 41 | +cases where you must store related data in separate MongoDB collections, |
| 42 | +you must include one document's ``_id`` field in another document. Prisma streamlines this |
| 43 | +process and assists you in organizing this related data, while also maintaining referential integrity |
| 44 | +of the data. |
| 45 | + |
| 46 | +To learn more about efficient data modeling in MongoDB, see :manual:`Reduce $lookup Operations </data-modeling/design-antipatterns/reduce-lookup-operations>` |
| 47 | +in the {+mdb-server+} manual. |
| 48 | + |
| 49 | +Tutorial |
| 50 | +-------- |
| 51 | + |
| 52 | +This tutorial shows how to perform the following actions: |
| 53 | + |
| 54 | +- Download an example Prisma application |
| 55 | +- Configure your Prisma schema |
| 56 | +- Create and populate a MongoDB database with sample data |
| 57 | +- Make the example application compatible with MongoDB |
| 58 | +- Run the application |
| 59 | + |
| 60 | +.. procedure:: |
| 61 | + :style: connected |
| 62 | + |
| 63 | + .. step:: Verify the prerequisites |
| 64 | + |
| 65 | + Before you begin this tutorial, ensure you have the following components prepared: |
| 66 | + |
| 67 | + - A MongoDB Atlas account with a configured cluster. To view |
| 68 | + instructions, see the :atlas:`Get Started with Atlas </getting-started>` |
| 69 | + guide. |
| 70 | + - `Node.js <https://nodejs.org/en/download>`__ {+min-node-version+} or later. |
| 71 | + |
| 72 | + .. step:: Download the example application |
| 73 | + |
| 74 | + Clone or download the :github:`example application </prisma/prisma-examples/tree/accelerate-nextjs-starter/typescript/rest-nextjs-api-routes>` from the |
| 75 | + :github:`Prisma examples repository </prisma/prisma-examples/tree/latest>`. |
| 76 | + |
| 77 | + This example is a simple blog content management platform that uses a SQLite database. |
| 78 | + The following steps modify the application to use MongoDB instead of SQLite. |
| 79 | + |
| 80 | + .. step:: Configure your Prisma schema |
| 81 | + |
| 82 | + Navigate to the ``prisma/schema.prisma`` file in the example application |
| 83 | + directory. In the ``datasource db`` object of this file, set the ``provider`` field to ``"mongodb"`` and |
| 84 | + the ``url`` field to your Atlas connection URI. |
| 85 | + |
| 86 | + In the ``User`` model in the same file, change the ``id`` field type from ``Int`` to |
| 87 | + ``String`` and set the default value to ``auto()``. The ``id`` property must map |
| 88 | + to the MongoDB ``_id`` field. You must also instruct Prisma to set the data type for this |
| 89 | + property to ``ObjectId``. |
| 90 | + |
| 91 | + In the ``Post`` model, perform the same changes to the ``id`` field as you did in the ``User`` |
| 92 | + model. You must also change the ``authorId`` field type from ``Int`` to ``String`` and set the |
| 93 | + data type to ``ObjectId``. |
| 94 | + |
| 95 | + Your ``schema.prisma`` file should resemble the following: |
| 96 | + |
| 97 | + .. literalinclude:: /includes/integrations/example-schema.prisma |
| 98 | + :language: typescript |
| 99 | + |
| 100 | + This schema defines separate ``User`` and ``Post`` collections in your MongoDB |
| 101 | + database, where each ``Post`` contains a reference to a ``User``. |
| 102 | + |
| 103 | + Once you have made these changes, navigate to the project directory in your |
| 104 | + terminal and run the following commands to install the necessary dependencies and |
| 105 | + generate the schema: |
| 106 | + |
| 107 | + .. code-block:: shell |
| 108 | + |
| 109 | + npm install |
| 110 | + npx prisma generate |
| 111 | + |
| 112 | + .. note:: |
| 113 | + |
| 114 | + If you make any further changes to the schema, you must re-run the |
| 115 | + ``npx prisma generate`` command for the changes to take effect. |
| 116 | + |
| 117 | + .. step:: Create and populate the MongoDB database |
| 118 | + |
| 119 | + To populate the database with sample data, run the ``prisma/seed.ts`` file in the example |
| 120 | + project by running the following command: |
| 121 | + |
| 122 | + .. code-block:: shell |
| 123 | + |
| 124 | + npx prisma db seed |
| 125 | + |
| 126 | + This creates the ``User`` and ``Post`` collections as defined by the ``schema.prisma`` |
| 127 | + file and populates them with sample data. |
| 128 | + |
| 129 | + .. step:: Make the example application compatible with MongoDB |
| 130 | + |
| 131 | + Navigate to the ``src`` directory of the example project. In the ``pages/api/post/[id].ts`` |
| 132 | + and ``pages/api/publish/[id].ts`` files, replace all instances of ``Number(postId)`` with |
| 133 | + ``postId``. This is necessary because the ``id`` fields in the schema are now of type |
| 134 | + ``String`` instead of ``Int``. |
| 135 | + |
| 136 | + .. step:: Run the application |
| 137 | + |
| 138 | + To start the application, run the following command from the project directory: |
| 139 | + |
| 140 | + .. code-block:: shell |
| 141 | + |
| 142 | + npm run dev |
| 143 | + |
| 144 | + Navigate to ``http://localhost:3000`` in your web browser to view and run |
| 145 | + the application. You can use the application to create, draft, publish, and delete blog posts. |
| 146 | + You can reference the API route definitions in the ``pages/api`` folder of the example project. |
| 147 | + |
| 148 | +Additional Resources |
| 149 | +-------------------- |
| 150 | + |
| 151 | +To learn more about Prisma, see the `Prisma documentation <https://www.prisma.io/docs/>`__. |
| 152 | + |
| 153 | +To view and download a full version of the application in this tutorial, see the |
| 154 | +:github:`prisma-mongodb-nextjs-example </mongodb-developer/prisma-mongodb-nextjs-example>` |
| 155 | +GitHub repository. |
0 commit comments