{"id":7471,"date":"2019-09-28T21:29:04","date_gmt":"2019-09-28T21:29:04","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=7471"},"modified":"2019-09-28T21:29:04","modified_gmt":"2019-09-28T21:29:04","slug":"adding-graphql-to-our-express-server","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/adding-graphql-to-our-express-server\/","title":{"rendered":"Adding GraphQL to our Express server"},"content":{"rendered":"<p>In the previous two posts, we firstly create a basic server, then extended this with REST functionality, now lets add GraphQL capabilities.<\/p>\n<p>First off, run the following<\/p>\n<ul>\n<li>yarn add express-graphql graphql<\/li>\n<li>Add a folder named schema<\/li>\n<\/ul>\n<p>With the schema folder add a new file userSchema.ts with the following code<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nimport { buildSchema } from &quot;graphql&quot;;\r\n\r\nexport const schema = buildSchema(`\r\n  type User {\r\n    firstName: String\r\n    lastName: String\r\n  }\r\n\r\n  type Query {\r\n    users: &#x5B;User]\r\n  }\r\n`);\r\n<\/pre>\n<p>In the above code, we create a GraphQL schema based upon our User type, along with the <em>type Query<\/em> for us to use the User type.<\/p>\n<p>Next we&#8217;ll create a folder named resolvers along with the file userResolver.ts. GraphQL uses resolvers to interact with the data via GraphQL (like the code in the indexController in the previous post). <\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nimport { stubData } from &quot;..\/models\/user&quot;;\r\n\r\nexport const userResolver = {\r\n  users: () =&gt; {\r\n    return stubData;\r\n  }\r\n}\r\n<\/pre>\n<p>Now let&#8217;s update the server.ts file by adding the GraphQL code, I&#8217;ll include the whole file here (at least the specifics for GraphQL)<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nimport graphqlHTTP from &quot;express-graphql&quot;;\r\nimport { schema } from &quot;.\/schema\/userSchema&quot;;\r\nimport { userResolver } from &quot;.\/resolvers\/userResolver&quot;;\r\n\r\nconst server = express();\r\n\r\nserver.use('\/graphql', graphqlHTTP({\r\n  schema: schema,\r\n  rootValue: userResolver,\r\n  graphiql: true,\r\n}));\r\n\r\nconst port = 4000;\r\nserver.listen(port,\r\n  () =&gt; console.log(`Server on port ${port}`)\r\n);\r\n<\/pre>\n<p>In the above we&#8217;ve specified <em>graphiql: true<\/em> which allows us to via the Graph<em>I<\/em>QL page using http:\/\/localhost:4000\/graphql<\/p>\n<p>Now if you type the following into the left hand (query) pane<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\n{\r\n  users {\r\n    firstName\r\n    lastName\r\n  }\r\n}\r\n<\/pre>\n<p>Running this from Graph<em>I<\/em>QL should output all our stubData.<\/p>\n<p>We&#8217;ve essentially got the <em>users<\/em> method from our original code but now let&#8217;s add the equivalent of the <em>create<\/em> method, which in GraphQL terms is a mutation type.<\/p>\n<p>In the userSchema.ts file, change the schema to look like this<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nexport const schema = buildSchema(`\r\n  type User {\r\n    firstName: String\r\n    lastName: String\r\n  }\r\n\r\n  input UserInput {\r\n    firstName: String\r\n    lastName: String\r\n  }\r\n\r\n  type Mutation {\r\n    create(user: UserInput): User\r\n  }\r\n\r\n  type Query {\r\n    users: &#x5B;User]\r\n  }\r\n`);\r\n<\/pre>\n<p>We&#8217;ve added an input type <em>UserInput<\/em> along with the <em>type Mutation<\/em>. Next, within the userResolve.ts file change the userResolve to add the <em>create<\/em> function, as below<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nexport const userResolver = {\r\n  users: () =&gt; {\r\n    return stubData;\r\n  },\r\n  create: (data: any) =&gt; {\r\n    stubData.push(new User(data.user.firstName, data.user.lastName)); \r\n    return data.user;\r\n  }\r\n}\r\n<\/pre>\n<p>Let&#8217;s test this code by executing the following query via Graph<em>I<\/em>QL<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nmutation {\r\n  create(user: {\r\n    firstName: &quot;Miner&quot;,\r\n    lastName: &quot;FortyNiner&quot;,\r\n  }) {\r\n    firstName\r\n    lastName\r\n  }\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>In the previous two posts, we firstly create a basic server, then extended this with REST functionality, now lets add GraphQL capabilities. First off, run the following yarn add express-graphql graphql Add a folder named schema With the schema folder add a new file userSchema.ts with the following code import { buildSchema } from &quot;graphql&quot;; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[268,189,45,46],"tags":[],"class_list":["post-7471","post","type-post","status-publish","format-standard","hentry","category-express","category-graphql","category-javascript","category-typescript"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7471","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=7471"}],"version-history":[{"count":3,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7471\/revisions"}],"predecessor-version":[{"id":7475,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7471\/revisions\/7475"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7471"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7471"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}