本文共 16091 字，大约阅读时间需要 53 分钟。
prisma orm
In the last couple of years, has taken on the scene in terms of frontend development due to the various it offers over .
在过去的几年中， 已经在前端开发方面的现场，由于各种它提供了 。
However, setting up your own server is challenging, it's both error-prone and complicated. This has been made easier due to managed services such as which does the heavy lifting in your GraphQL server making it easier for you to instead focus on the development of you app.
但是，设置自己的服务有挑战性，因为它容易出错而且很复杂。 由于诸如托管服务，这使GraphQL服务器的工作变得更加轻松，这使其变得更加容易，从而使您更轻松地专注于应用程序的开发。
In this tutorial, we will be building a fully functional Recipe app using and .
在本教程中，我们将使用和构建功能齐全的Recipe应用程序。
( )
- Intermediate knowledge of Javascript and React Java和React的中级知识
- GraphQL fundamentals GraphQL基础
- Docker fundamentals - don't panic if you have no prior experience, just copy paste the commands and hopefully all goes well :) Docker基础-如果您没有任何经验，请不要惊慌，只需复制粘贴命令，希望一切顺利:)
( )
We need to install the prisma cli client globally by running the following command:
我们需要通过运行以下命令来全局安装prisma cli客户端：
npm install -g prisma
We will be using create-react-app to bootstrap our react app, run the folowing command to install it globally:
我们将使用create-react-app引导我们的react应用程序，运行folowing命令将其全局安装：
npm install -g create-react-app
To use Prisma locally, you need to have installed on your machine. If you don't have Docker yet, you can download the Docker Community Edition .
要在本地使用Prisma，您需要在计算机上安装 。 如果您还没有Docker，则可以在下载Docker Community Edition。
( )
To use the prisma cli, you will need to have a prisma account, you can create an account then login to prisma cli by running the following command:
要使用prisma cli，您将需要有一个prisma帐户，您可以创建一个帐户然后通过运行以下命令来登录prisma cli：
prisma login
Now that we have all the required dependecies to kickstart our project installed, head over to your terminal and create a folder for the project (somewhere in your code stash) and navigate into the folder by running the following commands:
现在，我们已经具备了启动项目所需的所有条件，然后转到您的终端并为该项目创建一个文件夹（在代码存储区的某个位置），然后通过运行以下命令导航到该文件夹：
mkdir recipe-app-prisma-react cd recipe-app-prisma-react
Then we initialize our prisma server in the folder:
然后，我们在文件夹中初始化prisma服务器：
prisma init
A prompt will appear with a few options on which method you want to use to setup your prisma server, we will be working with the server locally for now and then deploy it later, choose Create new database to have prisma create a database locally with
将会出现一个提示，其中包含一些选项，供您选择要使用哪种方法来设置您的prisma服务器，我们现在将在本地使用该服务器，然后再进行部署，选择“ Create new database以使prisma通过在本地创建数据库
Next, you'll get a prompt to choose a database, for this tutorial we will be using Postgres so choose PostgreSQL:
接下来，提示您选择数据库，在本教程中，我们将使用Postgres，因此选择PostgreSQL ：
Next we have to choose a language for out generated prisma client, choose Prisma Javascript Client(sorry flow and typescript fanatics :( won't be using any type checkers so as to keep the tutorial simple )
接下来，我们必须为生成的prisma客户端选择一种语言，选择Prisma Javascript Client （抱歉，流程和打字稿狂热者：（为了简化本教程，将不使用任何类型检查器）
You should have the following files generated by Prisma based on the above selected options:
您应具有Prisma根据上述所选选项生成的以下文件：
( )
Now that we have our prisma server setup, make sure docker is running and the run the following command to start the server:
既然我们已经完成了棱镜服务器的设置，请确保docker正在运行，并运行以下命令来启动服务器：
docker-compose up -d
is used to run multiple containers as a single service, the above command will start our prisma server and the postgres database, head over to 127.0.0.1:4466 to view the prisma playground. Incase you want to kill your server just run docker-compose stop
用于将多个容器作为单个服务运行，上述命令将启动我们的prisma服务器和postgres数据库，并转到127.0.0.1:4466 观看prisma游乐场。 如果您想杀死服务器，只需运行docker-compose stop
Open your datamodel.prisma file and replace the demo content with the following:
打开您的datamodel.prisma文件，并将演示内容替换为以下内容：
type Recipe{ id: ID! @unique createdAt: DateTime! updatedAt: DateTime! title: String! @unique ingredients: String! directions: String! published: Boolean! @default(value: "false")} Then run the following command to deploy to a demo server:
然后运行以下命令以部署到演示服务器：
prisma deploy
You should get a response showing the created models and your prisma endpoint as follows:
您应该得到如下响应，其中显示了创建的模型和您的prisma端点，如下所示：
To view the deployed server, open you prisma dashboard at and navigate to services, you should have the following showing in your dashboard:
要查看已部署的服务器，请在打开prisma仪表板，然后导航至服务，您的仪表板中应显示以下内容：
To deploy to your local server open the prisma.yml file and change the endpoint to http://localhost:4466 then run prisma deploy
要部署到本地服务器，请打开prisma.yml文件，并将端点更改为http://localhost:4466然后运行prisma deploy
( )
Now that our prisma server is ready, we can setup our react app to consume the prisma GraphQL endpoint.
现在我们的棱镜服务器已经准备就绪，我们可以设置我们的react应用程序以使用pyramida GraphQL端点。
In the project folder, run the following command to bootstrap our client app using create-react-app
在项目文件夹中，运行以下命令以使用create-react-app引导我们的客户端应用create-react-app
create-react-app client
To work with graphql, we will require a few dependecies, navigate into the client folder and run the following command to install them:
要使用graphql，我们将需要一些依赖项，进入client文件夹并运行以下命令来安装它们：
cd clientnpm install apollo-boost react-apollo graphql-tag graphql --save
For the UI we will be using :
对于UI，我们将使用 ：
npm install antd --save
资料夹结构： (Folder Structure:)
Our app folder structure will be as follows:
我们的应用程序文件夹结构如下：
src├── components│ ├── App.js│ ├── App.test.js│ ├── RecipeCard│ │ ├── RecipeCard.js│ │ └── index.js│ └── modals│ ├── AddRecipeModal.js│ └── ViewRecipeModal.js├── containers│ └── AllRecipesContainer│ ├── AllRecipesContainer.js│ └── index.js├── graphql│ ├── mutations│ │ ├── AddNewRecipe.js│ │ └── UpdateRecipe.js│ └── queries│ ├── GetAllPublishedRecipes.js│ └── GetSingleRecipe.js├── index.js├── serviceWorker.js└── styles └── index.css
( )
Index.js (Index.js)
In here is where we do the apollo config, it's the main entry file for our app:
在这里，我们进行阿波罗配置，这是我们应用程序的主要入口文件：
import React from 'react';import ReactDOM from 'react-dom';import ApolloClient from 'apollo-boost';import { ApolloProvider } from 'react-apollo';import App from './components/App';// Pass your prisma endpoint to uriconst client = new ApolloClient({ uri: 'https://eu1.prisma.sh/XXXXXX'});ReactDOM.render( , document.getElementById('root')); GetAllPublishedRecipes.js (GetAllPublishedRecipes.js)
Query to fetch all recipes:
查询以获取所有配方：
import{ gql } from 'apollo-boost';export default gql`query GetAllPublishedRecipes { recipes(where: { published: true }) { id createdAt title ingredients directions published } }`; GetSingleRecipe.js (GetSingleRecipe.js)
Query to fetch a recipe by the recipe id:
通过配方ID查询以获取配方：
import{ gql } from 'apollo-boost';export default gql`query GetSingleRecipe($recipeId: ID!) { recipe(where: { id: $recipeId }) { id createdAt title directions ingredients published } }`; AddNewRecipe.js (AddNewRecipe.js)
The mutation for creating a new recipe:
创建新配方的变体：
import{ gql } from 'apollo-boost';export default gql`mutation AddRecipe( $directions: String! $title: String! $ingredients: String! $published: Boolean ) { createRecipe( data: { directions: $directions title: $title ingredients: $ingredients published: $published } ) { id } }`; UpdateRecipe.js (UpdateRecipe.js)
The mutation for updating a recipe:
更新配方的突变：
import{ gql } from 'apollo-boost';export default gql`mutation UpdateRecipe( $id: ID! $directions: String! $title: String! $ingredients: String! $published: Boolean ) { updateRecipe( where: { id: $id } data: { directions: $directions title: $title ingredients: $ingredients published: $published } ) { id } }`; AllRecipesContainer.js (AllRecipesContainer.js)
This is where our logic for the CRUD operations is based, the file is quite big, I've omitted the irrelavant parts to make space for the crucial bits, you can view the rest of the code .
这是我们CRUD操作的逻辑基础，文件很大，我省略了无关紧要的部分来为关键位留出空间，您可以在查看其余的代码。
In order to use our queries and mutations, we need to import them and then use the react-apollo's that allows us to create a higher-order component that can execute queries and update reactively based on the data we have in our app, here is an example of how we can fetch and display all published recipes:
为了使用我们的查询和变异，我们需要导入它们，然后使用react-apollo's ，它使我们可以创建一个higher-order component ，该higher-order component可以执行查询并根据我们应用程序中的数据进行React式更新，此处是我们如何获取和显示所有已发布食谱的示例：
import React, { Component } from 'react';import { graphql } from 'react-apollo';import { Card, Col, Row, Empty, Spin } from 'antd';// queriesimport GetAllPublishedRecipes from '../../graphql/queries/GetAllPublishedRecipes';class AllRecipesContainer extends Component { render() { const { loading, recipes } = this.props.data; return ( { loading ? ( { recipes.map(recipe => ( { `${ recipe.ingredients.substring(0, 50)}.....`} { `${ recipe.directions.substring(0, 50)}.....`} } handleOnClick={ this._handleOnClick} handleOnEdit={ this._handleOnEdit} handleOnDelete={ this._handleOnDelete} { ...recipe} /> ))}
) : ( The resulting view would look as follows:
结果视图如下所示：
NB: Styling for the components will not be included due to file size, the code is however available in the repo
注意：由于文件大小，将不包括组件的样式，但是代码可在存储库中找到
Since we have require a more than one enhancer in our component, we will use compose to be able to incorporate all needed enhancers for the component:
由于我们的组件中需要一个以上的增强器，因此我们将使用compose来合并该组件所需的所有增强器：
import React, { Component } from 'react';import { graphql, compose, withApollo } from 'react-apollo';// queriesimport GetAllPublishedRecipes from '../../graphql/queries/GetAllPublishedRecipes';import GetSingleRecipe from '../../graphql/queries/GetSingleRecipe';// mutationsimport UpdateRecipe from '../../graphql/mutations/UpdateRecipe';import AddNewRecipe from '../../graphql/mutations/AddNewRecipe';// other importsclass GetAllPublishedRecipes extends Component { // class logic}export default compose( graphql(UpdateRecipe, { name: 'updateRecipeMutation' }), graphql(AddNewRecipe, { name: 'addNewRecipeMutation' }), graphql(GetAllPublishedRecipes))(withApollo(AllRecipesContainer)); We also require the withApollo enhancer which provides direct access to your ApolloClient instance, This will be useful since we need to carry out one-off queries for fetching data for a recipe.
我们还需要withApollo增强器，该增强器可直接访问您的ApolloClient实例。这将很有用，因为我们需要执行一次性查询来获取配方数据。
创建配方： (Creating a recipe:)
After capturing the data from the following form:
从以下形式捕获数据后：
We then execute the following handleSubmit callback which runs the addNewRecipeMutation mutation:
然后，我们执行以下handleSubmit回调，该回调运行addNewRecipeMutation突变：
class GetAllPublishedRecipes extends Component { //other logic _handleSubmit = event => { this.props .addNewRecipeMutation({ variables: { directions, title, ingredients, published }, refetchQueries: [ { query: GetAllPublishedRecipes } ] }) .then(res => { if (res.data.createRecipe.id) { this.setState( (prevState, nextProps) => ({ addModalOpen: false }), () => this.setState( (prevState, nextProps) => ({ notification: { notificationOpen: true, type: 'success', message: `recipe ${ title} added successfully`, title: 'Success' } }), () => this._handleResetState() ) ); } }) .catch(e => { this.setState((prevState, nextProps) => ({ notification: { ...prevState.notification, notificationOpen: true, type: 'error', message: e.message, title: 'Error Occured' } })); }); };}; 编辑配方： (Editing a recipe:)
In order to edit a recipe, we re-use the form used to create a new recipe and then pass the recipe data, when a user clicks on the edit icon, the form pops up with the data pre-filled as follows:
为了编辑配方，我们重复使用用于创建新配方的表格，然后传递配方数据，当用户单击编辑图标时，该表格将弹出并预先填充数据，如下所示：
We then run a different handleSubmit handler to run the update mutation as follows:
然后，我们运行一个不同的handleSubmit处理程序来运行更新突变，如下所示：
class GetAllPublishedRecipes extends Component { // other logic _updateRecipe = ({ id, directions, ingredients, title, published, action }) => { this.props .updateRecipeMutation({ variables: { id, directions, title, ingredients, published: false }, refetchQueries: [ { query: GetAllPublishedRecipes } ] }) .then(res => { if (res.data.updateRecipe.id) { this.setState( (prevState, nextProps) => ({ isEditing: false }), () => this.setState( (prevState, nextProps) => ({ notification: { notificationOpen: true, type: 'success', message: `recipe ${ title} ${ action} successfully`, title: 'Success' } }), () => this._handleResetState() ) ); } }) .catch(e => { this.setState((prevState, nextProps) => ({ notification: { ...prevState.notification, notificationOpen: true, type: 'error', message: e.message, title: 'Error Occured' } })); }); };} 删除配方： (Deleting a recipe:)
As for the delete functionality, we will be doing a soft-delete on the deleted recipe which means we will be basically be changing the published attribute to false since when fetching the articles we filter to make sure we only get published articles.
至于删除功能，我们将对已删除的配方进行soft-delete ，这意味着我们将基本上将已published属性更改为false，因为在获取文章时我们会进行过滤以确保仅获取published文章。
We will use the same function above and pass in published as false, as shown in the example below:
我们将使用上面相同的函数，并以false形式传递发布，如下例所示：
class GetAllPublishedRecipes extends Component { // other logic _handleOnDelete = ({ id, directions, ingredients, title }) => { // user confirmed delete prompt this._updateRecipe({ id, directions, ingredients, title, published: false, // soft delete the recipe action: 'deleted' }); };}; You can access the code and you can also try out the demo app .
您可以访问代码， ，你也可以尝试演示程序 。
( )
Prisma is a very highly reliable service that makes life easier for you as a developer, you get to focus on implementing you business logic and let prisma do the heavy lifting for your GraphQL server.
Prisma是一种非常高度可靠的服务，它使您作为开发人员的工作变得更轻松，您可以专注于实现业务逻辑，让prisma为您的GraphQL服务器承担繁重的工作。
翻译自:
prisma orm
转载地址：http://rruwd.baihongyu.com/