Docker installed on your computer (to run the PostgreSQL database locally).<\/li>\n<\/ul>\nIt would be beneficial to have some prior knowledge of JavaScript, Node.js, GraphQL, and PostgreSQL for this tutorial, but it is not absolutely necessary.<\/p>\n
The first step involves the creation of the Node.js project.<\/h2>\n
In this phase, you’ll initialize a Node.js project using npm and incorporate the required apollo-server and graphql dependencies. This project will serve as the basis for the GraphQL API you’ll develop and deploy in this guide.<\/p>\n
To begin with, establish a fresh folder specifically for your project.<\/p>\n
<\/code><\/pre>\n\n- mkdir<\/span> prisma-graphql<\/li>\n<\/ol>\n
<\/code><\/pre>\n <\/p>\n
<\/code><\/pre>\nAfterwards, proceed to enter the directory and start a new npm project with no initial content.<\/p>\n
<\/code><\/pre>\n\n- cd<\/span> prisma-graphql<\/li>\n
- npm<\/span> init –yes<\/span><\/li>\n<\/ol>\n
<\/code><\/pre>\n <\/p>\n
<\/code><\/pre>\nThis command generates a basic package.json file which serves as the configuration file for your npm project.<\/p>\n
You will get the mentioned output.<\/p>\n
<\/code><\/pre>\nOutput<\/div>\n
<\/code><\/pre>\nWrote to \/Users\/your_username<\/mark>\/workspace\/prisma-graphql\/package.json: { “name”: “prisma-graphql”, “version”: “1.0.0”, “description”: “”, “main”: “index.js”, “scripts”: { “test”: “echo \\”Error: no test specified\\” && exit 1″ }, “keywords”: [], “author”: “”, “license”: “ISC” }<\/p>\n<\/code><\/pre>\nYou are now prepared to set up TypeScript in your project.<\/p>\n
Please install the required dependencies.<\/p>\n
<\/code><\/pre>\n\n- npm<\/span> install<\/span> apollo-server graphql –save<\/span><\/li>\n<\/ol>\n
<\/code><\/pre>\n <\/p>\n
<\/code><\/pre>\nThis instruction will add two packages to your project’s dependencies during installation.<\/p>\n
\n- apollo-server is the HTTP library that you use to define how GraphQL requests are resolved and how to fetch data.<\/li>\n
- graphql is the library you\u2019ll use to build the GraphQL schema.<\/li>\n<\/ul>\n
Once you have successfully set up your project and installed the necessary dependencies, the subsequent task involves defining the GraphQL schema.<\/p>\n
Second Step \u2014 Establishing the GraphQL Schema and Resolvers<\/h2>\n
In this stage, you will be creating the GraphQL schema and its corresponding resolvers. The schema will outline the operations that the API can perform. The resolvers will determine how these requests are handled, utilizing in-memory data structures that will later be substituted with database queries.<\/p>\n
To begin with, generate a fresh directory named src to store all of your source files.<\/p>\n
<\/code><\/pre>\n\n- mkdir<\/span> src<\/li>\n<\/ol>\n
<\/code><\/pre>\n <\/p>\n
<\/code><\/pre>\nNext, execute the given command to generate the file for the schema.<\/p>\n
<\/code><\/pre>\n\n- nano<\/span> src\/schema.js<\/li>\n<\/ol>\n
<\/code><\/pre>\n <\/p>\n
<\/code><\/pre>\nYou should include the code provided into the document.<\/p>\n
In the prisma-graphql directory, navigate to the schema.js file.<\/div>\n
const<\/span> {<\/span> gql }<\/span> =<\/span> require<\/span>(<\/span>'apollo-server'<\/span>)<\/span>\r\n\r\nconst<\/span> typeDefs =<\/span> gql`<\/span>\r\n type<\/span> Post<\/span> {<\/span>\r\n content<\/span>:<\/span> String<\/span>\r\n id<\/span>:<\/span> ID<\/span>!<\/span>\r\n published<\/span>:<\/span> Boolean<\/span>!<\/span>\r\n title<\/span>:<\/span> String<\/span>!<\/span>\r\n }<\/span>\r\n\r\n type<\/span> Query<\/span> {<\/span>\r\n feed<\/span>:<\/span> [<\/span>Post<\/span>!<\/span>]<\/span>!<\/span>\r\n post<\/span>(<\/span>id<\/span>:<\/span> ID<\/span>!<\/span>)<\/span>:<\/span> Post<\/span>\r\n }<\/span>\r\n\r\n type<\/span> Mutation<\/span> {<\/span>\r\n createDraft<\/span>(<\/span>content<\/span>:<\/span> String<\/span>,<\/span> title<\/span>:<\/span> String<\/span>!<\/span>)<\/span>:<\/span> Post<\/span>!<\/span>\r\n publish<\/span>(<\/span>id<\/span>:<\/span> ID<\/span>!<\/span>)<\/span>:<\/span> Post<\/span>\r\n }<\/span>\r\n<\/span>`<\/span><\/span>\r\n<\/code><\/pre>\nThe gql tagged template is used to specify the GraphQL schema. It encompasses a set of type definitions (typeDefs), which collectively determine the structure of the queries that can be run on your API. Consequently, this will transform the GraphQL schema string into the format anticipated by Apollo.<\/p>\n
The schema presents three categories.<\/p>\n
\n- Post defines the type for a post in your blogging app and contains four fields where each field is followed by its type: for example, String.<\/li>\n
- Query defines the feed query which returns multiple posts as denoted by the square brackets and the post query which accepts a single argument and returns a single Post.<\/li>\n
- Mutation defines the createDraft mutation for creating a draft Post and the publish mutation which accepts an id and returns a Post.<\/li>\n<\/ul>\n
Each GraphQL API includes a query type and potentially a mutation type. These types function like regular object types but hold a unique role as they define the initial point for every GraphQL query.<\/p>\n
Afterwards, you can include the posts array in the src\/schema.js file, positioned under the typeDefs variable.<\/p>\n
prisma-graphql’s schema can be found in the location src\/schema.js.<\/div>\n
...<\/span>\r\nconst<\/span> posts =<\/span> [<\/span>\r\n {<\/span>\r\n id<\/span>:<\/span> 1<\/span>,<\/span>\r\n title<\/span>:<\/span> 'Subscribe to GraphQL Weekly for community news '<\/span>,<\/span>\r\n content<\/span>:<\/span> 'https:\/\/graphqlweekly.com\/'<\/span>,<\/span>\r\n published<\/span>:<\/span> true<\/span>,<\/span>\r\n }<\/span>,<\/span>\r\n {<\/span>\r\n id<\/span>:<\/span> 2<\/span>,<\/span>\r\n title<\/span>:<\/span> 'Follow Silicon Cloud on Twitter'<\/span>,<\/span>\r\n content<\/span>:<\/span> 'https:\/\/twitter.com\/digitalocean'<\/span>,<\/span>\r\n published<\/span>:<\/span> true<\/span>,<\/span>\r\n }<\/span>,<\/span>\r\n {<\/span>\r\n id<\/span>:<\/span> 3<\/span>,<\/span>\r\n title<\/span>:<\/span> 'What is GraphQL?'<\/span>,<\/span>\r\n content<\/span>:<\/span> 'GraphQL is a query language for APIs'<\/span>,<\/span>\r\n published<\/span>:<\/span> false<\/span>,<\/span>\r\n }<\/span>,<\/span>\r\n]<\/span>\r\n<\/code><\/pre>\nYou initialize the posts array with three predefined posts. Each post object follows the structure defined by the Post type in the schema. This array contains the posts that will be provided through the API. Later on, you will update the array when the database and Prisma Client are introduced.<\/p>\n
Afterwards, you can establish the resolvers object by inserting the subsequent code underneath the recently declared posts array:<\/p>\n
src\/schema.js in prisma-graphql.<\/div>\n
...<\/span>\r\nconst<\/span> resolvers =<\/span> {<\/span>\r\n Query<\/span>:<\/span> {<\/span>\r\n feed<\/span>:<\/span> (<\/span>parent,<\/span> args<\/span>)<\/span> =><\/span> {<\/span>\r\n return<\/span> posts.<\/span>filter<\/span>(<\/span>(<\/span>post<\/span>)<\/span> =><\/span> post.<\/span>published)<\/span>\r\n }<\/span>,<\/span>\r\n post<\/span>:<\/span> (<\/span>parent,<\/span> args<\/span>)<\/span> =><\/span>