{"id":3166,"date":"2020-10-02T11:15:00","date_gmt":"2020-10-02T11:15:00","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/deploy-graphql-mongodb-api-using-netlify-functions\/"},"modified":"2026-04-27T09:55:11","modified_gmt":"2026-04-27T09:55:11","slug":"wdrozenie-graphql-mongodb-api-przy-uzyciu-funkcji-netlify","status":"publish","type":"post","link":"https:\/\/thecodest.co\/pl\/blog\/deploy-graphql-mongodb-api-using-netlify-functions\/","title":{"rendered":"Wdra\u017canie API GraphQL\/MongoDB przy u\u017cyciu funkcji Netlify"},"content":{"rendered":"\n

Goals<\/h2>\n\n\n\n
    \n
  1. Configure both local and lambda servers.<\/li>\n\n\n\n
  2. Connect both to MongoDB.<\/li>\n\n\n\n
  3. Implement basic authentication.<\/li>\n\n\n\n
  4. Deploy serverless Apollo GraphQL<\/a> API<\/a> with Netlify.<\/li>\n\n\n\n
  5. Use Typescript<\/a>.<\/li>\n<\/ol>\n\n\n\n

    Initial setup<\/h2>\n\n\n\n
    npm init -y<\/code><\/code><\/pre>\n\n\n\n
    Install dependencies<\/h2>\n\n\n\n
    npm install --save typescript<\/a> graphql aws-lambda @types\/aws-lambda<\/code><\/code><\/pre>\n\n\n\n
    Let’s start<\/h2>\n\n\n\n
    First, add the tsconfig.json<\/code> to main directory:<\/p>\n\n\n\n
     {\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"module\": \"commonjs\",\n \"allowJs\": true,\n \"strict\": true,\n \"esModuleInterop\": true,\n \"skipLibCheck\": true,\n \"forceConsistentCasingInFileNames\": true\n },\n \"include\": [\"src\/*.ts\", \"src\/**\/*.ts\", \"src\/**\/*.js\"],\n \"exclude\": [\"node_modules\"]\n }<\/code><\/code><\/pre>\n\n\n\n
    Now, let’s create src\/server.ts<\/code> for servers implementations. Then add two functions: one for local server and second for lambda.<\/p>\n\n\n\n
    \/\/ src\/server.ts\nimport { ApolloServer as ApolloServerLambda } from \"apollo-server-lambda\";\nimport { ApolloServer } from \"apollo-server\";\n\n\nconst createLambdaServer = () =>\n  new ApolloServerLambda({\n    typeDefs,\n    resolvers,\n    introspection: true,\n    playground: true,\n    },\n  });\n\nconst createLocalServer = () =>\n  new ApolloServer({\n    typeDefs,\n    resolvers,\n    introspection: true,\n    playground: true,\n    },\n  });\n\nexport { createLambdaServer, createLocalServer };<\/code><\/pre>\n\n\n\n
    OK, we don\u2019t have any resolvers or type definitions so we need to create some. Let’s assume that, at first, we want to create users and receive info about them.<\/p>\n\n\n\n
    \/\/ src\/schemas.ts\nconst { gql } = require(\"apollo-server-lambda\");\n\nconst userSchema = gql`\n  type User {\n    id: ID!\n    email: String!\n    name: String!\n  }\n\n  type Query {\n    user(id: ID!): User!\n  }\n\n  type Mutation {\n    createUser(name: String!, email: String!, password: String!): User!\n  }\n`;<\/code><\/pre>\n\n\n\n
    If you\u2019re not familiar with this, Apollo prepared a very nice tutorial <\/a><\/p>\n\n\n\n
    Now let\u2019s create a user resolver with one query and one mutation.<\/p>\n\n\n\n
    \/\/ src\/resolvers.ts\nconst userResolver = {\n  Query: {\n    user: async (parent, args, context, info) => {\n      {...}\n    },\n  },\n  Mutation: {\n    createUser: async (parent, args, context, info) => {\n      {...}\n    },\n  },\n};<\/code><\/pre>\n\n\n\n
    But we don\u2019t have any data… Let’s fix it \ud83d\ude09<\/p>\n\n\n\n
    Don\u2019t forget to import type definition and resolver onto the server.<\/p>\n\n\n\n
    \/\/ src\/server.ts\nimport { ApolloServer as ApolloServerLambda } from \"apollo-server-lambda\";\nimport { ApolloServer } from \"apollo-server\";\n\nimport { typeDefs } from \".\/schemas\";\nimport { resolvers } from \".\/resolvers\";\n\n{...}<\/code><\/pre>\n\n\n\n
    Connect with MongoDB via mongoose<\/h2>\n\n\n\n
    Now it’s a good time to create a connection with our database. In this particular case, it will be MongoDB. It\u2019s free and easy to maintain. But before that, let’s install two more dependencies:<\/p>\n\n\n\n
    npm install --save mongoose dotenv<\/code><\/pre>\n\n\n\n
    The first step is to create a User Model.<\/p>\n\n\n\n
    \/\/ src\/model.ts\nimport mongoose, { Document, Error, Schema } from \"mongoose\";\n\nexport type User = Document & {\n  _id: string,\n  email: string,\n  name: string,\n  password: string,\n};\n\ndelete mongoose.connection.models[\"User\"];\n\nconst UserSchema: Schema = new Schema({\n  email: {\n    type: String,\n    required: true,\n    unique: true,\n  },\n  name: {\n    type: String,\n    required: true,\n    minLength: 3,\n    maxLength: 32,\n  },\n  password: {\n    type: String,\n    required: true,\n  },\n});\n\nexport const userModel = mongoose.model < User > (\"User\", UserSchema);<\/code><\/pre>\n\n\n\n
    Make passwords more safe<\/h3>\n\n\n\n
    Security first! Let\u2019s now secure our passwords by hashing them.<\/p>\n\n\n\n
    npm install --save bcrypt @types\/bcrypt<\/code><\/code><\/pre>\n\n\n\n
    Now, implement the password security inside the pre-middleware callback. Pre-middleware functions are executed one after another, when each middleware calls next. To make the passwords safe, we are using a technique which generates a salt and hash<\/a> on separate function calls.<\/p>\n\n\n\n
    \/\/ src\/model.ts\nimport bcrypt from \"bcrypt\";\n{...}\nconst SALT_WORK_FACTOR: number = 10;\n\nUserSchema.pre(\"save\", function (next) {\n  const user = this as User;\n  if (!this.isModified(\"password\")) return next();\n\n  bcrypt.genSalt(SALT_WORK_FACTOR, function (err, salt) {\n    if (err) return next(err);\n\n    bcrypt.hash(user.password, salt, function (err, hash) {\n      if (err) return next(err);\n      user.password = hash;\n      next();\n    });\n  });\n});\n{...}<\/code><\/pre>\n\n\n\n
    Then add comparePasswords method to UserSchema:<\/p>\n\n\n\n
    \/\/ src\/model.ts\n{...}\nUserSchema.methods.comparePasswords = function (\n  candidatePassword: string,\n  cb: (err: Error | null, same: boolean | null) => void\n) {\n  const user = this as User;\n  bcrypt.compare(candidatePassword, user.password, (err, isMatch) => {\n    if (err) {\n      return cb(err, null);\n    }\n    cb(null, isMatch);\n  });\n};\n{...}<\/code><\/pre>\n\n\n\n
    And of course, modify User type.<\/p>\n\n\n\n
    type comparePasswordFunction = (\n  candidatePassword: string,\n  cb: (err: Error, isMatch: boolean) => void\n) => void;\n\nexport type User = Document & {\n  _id: string,\n  email: string,\n  name: string,\n  password: string,\n  comparePasswords: comparePasswordFunction,\n};<\/code><\/pre>\n\n\n\n
    Now we can arrange a connection between servers and databases. MONGODB_URI<\/code> is an environment variable which contains a connection string needed to create the connection. You can get it from your cluster panel after you log into your MongoDB atlas account. Put it inside .env<\/code><\/p>\n\n\n\n
    \/\/ .env\nMONGODB_URI = ...;<\/code><\/pre>\n\n\n\n
    Always remember to add that file to .gitignore<\/code>. Great! Now let’s add a function which allow to connect with db.<\/p>\n\n\n\n
    \/\/ src\/server.ts\nimport mongoose, { Connection } from \"mongoose\";\n{...}\nlet cachedDb: Connection;\n\nconst connectToDatabase = async () => {\n  if (cachedDb) return;\n\n  await mongoose.connect(process.env.MONGODB_URI || \"\", {\n    useNewUrlParser: true,\n    useUnifiedTopology: true,\n    useFindAndModify: false,\n    useCreateIndex: true,\n  });\n  cachedDb = mongoose.connection;\n};\n{...}<\/code><\/pre>\n\n\n\n
    The context is an object which is shared across all resolvers. To provide it, we just need to add a context initialization function to the ApolloServer constructor. Let’s do it.<\/p>\n\n\n\n
    \/\/ src\/server.ts\nimport { userModel } from \".\/models\/user.model\";\n{...}\nconst createLambdaServer = async () =>\n  new ApolloServerLambda({\n    typeDefs,\n    resolvers,\n    introspection: true,\n    playground: true,\n    context: async () => {\n      await connectToDatabase();\n\n      return {\n        models: {\n          userModel,\n        },\n      };\n    },\n  });\n\nconst createLocalServer = () =>\n  new ApolloServer({\n    typeDefs,\n    resolvers,\n    introspection: true,\n    playground: true,\n    context: async () => {\n      await connectToDatabase();\n\n      return {\n        models: {\n          userModel,\n        },\n      };\n    }\n  });<\/code><\/pre>\n\n\n\n
    As you can see, we are also passing userModel<\/code> through context<\/code>. We can now update resolver:<\/p>\n\n\n\n
    \/\/ resolvers.ts\nconst userResolver = {\n  Query: {\n    user: async (_, { email, name, password }, { models: { userModel } }) => {\n      const user = await userModel.findById({ _id: id }).exec();\n      return user;\n    },\n  },\n  Mutation: {\n    createUser: async (_, { id }, { models: { userModel } }) => {\n      const user = await userModel.create({ email, name, password });\n      return user;\n    },\n  },\n};<\/code><\/pre>\n\n\n\n
    Looks nice! Now create a basic server instance:<\/p>\n\n\n\n
    \/\/ src\/index.ts\nimport { createLocalServer } from \".\/server\";\nrequire(\"dotenv\").config();\n\nconst port = process.env.PORT || 4000;\n\nconst server = createLocalServer();\n\nserver.listen(port).then(({ url }) => {\n  console.log(`Server ir running at ${url}`);\n});<\/code><\/pre>\n\n\n\n
    Starting the local server with Nodemon<\/h2>\n\n\n\n
    Last thing before run, add nodemon.json<\/code><\/p>\n\n\n\n
    {\n  \"watch\": [\"src\"],\n  \"ext\": \".ts,.js\",\n  \"ignore\": [],\n  \"exec\": \"ts-node --transpile-only .\/src\/index.ts\"\n}<\/code><\/pre>\n\n\n\n
    Add script to package.json<\/code><\/p>\n\n\n\n
    \"scripts\": {\n    \"start\": \"nodemon\"\n  },<\/code><\/pre>\n\n\n\n
    And run!<\/p>\n\n\n\n
    npm start<\/code><\/pre>\n\n\n\n
    You should get such info inside terminal:<\/p>\n\n\n\n
    Server ir running at http:\/\/localhost:4000\/<\/code><\/pre>\n\n\n\n
    If yes, open the http:\/\/localhost:4000\/<\/code> inside your browser.<\/p>\n\n\n\n
    The GraphQL playground should appear. Let\u2019s create a new user!<\/p>\n\n\n\n
    \"createUser.png\"<\/figure>\n\n\n\n
    Take a look at how it looks in the database.<\/p>\n\n\n\n
    \"databaseJohnDoe.png\"<\/figure>\n\n\n\n
    Cool! Everything works fine!<\/p>\n\n\n\n
    Let\u2019s try and get some user info.<\/p>\n\n\n\n
    \"userWithoutAuth.png\"<\/figure>\n\n\n\n
    And add the password field…<\/p>\n\n\n\n
    \"userPassword.png\"<\/figure>\n\n\n\n
    Nice! We receive error Cannot query field \"password\" on type \"User\".\"<\/code>. As you can check back, we didn’t add this field inside the user type definition. It is there on purpose. We should not make it possible to query any password or other sensitive data<\/a>.<\/p>\n\n\n\n
    Another thing… We can get user data without any authentication… it is not a good solution. We need to fix it.<\/p>\n\n\n\n
    But before…<\/p>\n\n\n\n
    Configure Codegen<\/h2>\n\n\n\n
    Let\u2019s use the GraphQL code<\/a> generator to get a compatible base type, based on our schema.<\/p>\n\n\n\n
    npm install --save @graphql-codegen\/cli @graphql-codegen\/introspection\n@graphql-codegen\/typescript @graphql-codegen\/typescript-resolvers<\/code><\/pre>\n\n\n\n
    Create codegen.yml<\/code><\/p>\n\n\n\n
    overwrite: true\nschema: \"http:\/\/localhost:4000\"\ngenerates:\n  .\/src\/generated\/graphql.ts:\n    plugins:\n      - \"typescript\"\n      - \"typescript-resolvers\"\n  .\/graphql.schema.json:\n    plugins:\n      - \"introspection\"\n<\/code><\/pre>\n\n\n\n
    Add codegen<\/code> script to package.json<\/code><\/p>\n\n\n\n
    \"scripts\": {\n    \"start\": \"nodemon\",\n    \"codegen\": \"graphql-codegen --config .\/codegen.yml\",\n  },<\/code><\/pre>\n\n\n\n
    Then, when the local server is running, run script:<\/p>\n\n\n\n
    npm run codegen<\/code><\/pre>\n\n\n\n
    In case of success you will get message:<\/p>\n\n\n\n
      \u221a Parse configuration\n  \u221a Generate outputs<\/code><\/pre>\n\n\n\n
    If you receive that info, two files should appear:<\/p>\n\n\n\n