{"id":7476,"date":"2019-09-29T09:45:13","date_gmt":"2019-09-29T09:45:13","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=7476"},"modified":"2021-03-06T20:51:47","modified_gmt":"2021-03-06T20:51:47","slug":"writing-our-first-apollo-graphql-server","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/writing-our-first-apollo-graphql-server\/","title":{"rendered":"Writing our first Apollo GraphQL server"},"content":{"rendered":"<p>In the previous posts we&#8217;ve seen how to build an express based server and eventually add GraphQL to it. <\/p>\n<p>graphql-express is not the only option for implementing GraphQL servers, let&#8217;s now look at <a href=\"https:\/\/www.apollographql.com\/docs\/\" rel=\"noopener noreferrer\" target=\"_blank\">Apollo<\/a> &#8211; I cannot say whether one library is better than the other as I&#8217;ve not used them enough to comment although. <\/p>\n<p>Let&#8217;s go through the process of creating a new project for this, so carry out the following steps<\/p>\n<ul>\n<li>Create a folder for your project<\/li>\n<li>cd to that folder<\/li>\n<li>Run yarn init -y<\/li>\n<li>Run tsc &#8211;init<\/li>\n<li>Add a folder named models and a file named user.ts (we&#8217;ll use the same model\/data from the previous posts), here&#8217;s the code for this file\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nexport default class User {\r\n  constructor(public firstName: string, public lastName: string) {\r\n  }\r\n}\r\n\r\nexport const stubData = &#x5B;\r\n  new User('Scooby', 'Doo'),\r\n  new User('Fred', 'Jones'),\r\n  new User('Velma', 'Dinkley'),\r\n  new User('Daphne', 'Blake'),\r\n  new User('Shaggy', 'Rogers'),\r\n];\r\n<\/pre>\n<\/li>\n<\/ul>\n<p>So that&#8217;s the basics in place for the support data and model, let&#8217;s now look at the specifics for Apollo.<\/p>\n<p>We&#8217;re going to create a file for the resolvers named resolver.ts and here&#8217;s the code<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nimport User, { stubData } from &quot;.\/models\/user&quot;;\r\n\r\nexport const resolvers = {\r\n  Query: {\r\n    users: () =&gt; stubData,\r\n  },\r\n  Mutation: {\r\n    create: (parent: any, args: any): User =&gt; {\r\n      const data = new User(args.user.firstName, args.user.lastName)\r\n      stubData.push(data);\r\n      return data;\r\n    }\r\n  }\r\n}\r\n<\/pre>\n<p>As you can see, we specify the Query and Mutation separately and the code&#8217;s pretty much the same as the express-graphql implementation except in the <em>create<\/em> mutation parameters. In this case the parent will supply any parent nodes whilst the args supplies the parameters from the mutation call.<\/p>\n<p>Now we&#8217;ll create the file server.ts which will have the (as I&#8217;m sure you guessed) the server code as well as the schema definition (Apollo names this <em>typeDefs<\/em>).<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nimport { ApolloServer, gql } from &quot;apollo-server&quot;;\r\nimport { resolvers } from &quot;.\/resolvers&quot;;\r\n\r\nconst typeDefs = gql`\r\ntype 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\r\nconst server = new ApolloServer({ typeDefs, resolvers });\r\n\r\nserver.listen()\r\n  .then(({ url }) =&gt; {\r\n    console.log(`Server listening to ${url}`);\r\n  });\r\n<\/pre>\n<p>Note that Apollo uses a template tag <em>gql<\/em> function to declare the GraphQL schema, which along with the resolves is passed into the ApolloServer, then we simply start the server.<\/p>\n<p>If you now run <em>yarn build<\/em> followed by <em>yarn run<\/em> the server will run up with default port 4000. Navigating to http:\/\/localhost:4000\/ will display the GraphQL playground.<\/p>\n<p>So, as you can see, Apollo is very simple to set-up for use as a GraphQL server.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the previous posts we&#8217;ve seen how to build an express based server and eventually add GraphQL to it. graphql-express is not the only option for implementing GraphQL servers, let&#8217;s now look at Apollo &#8211; I cannot say whether one library is better than the other as I&#8217;ve not used them enough to comment although. [&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":[269,45,46],"tags":[],"class_list":["post-7476","post","type-post","status-publish","format-standard","hentry","category-apollo","category-javascript","category-typescript"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7476","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=7476"}],"version-history":[{"count":4,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7476\/revisions"}],"predecessor-version":[{"id":8744,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7476\/revisions\/8744"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7476"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7476"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}