{"id":17491,"date":"2023-02-17T09:03:38","date_gmt":"2023-02-17T14:03:38","guid":{"rendered":"https:\/\/qxf2.com\/blog\/?p=17491"},"modified":"2023-02-17T09:05:03","modified_gmt":"2023-02-17T14:05:03","slug":"virtualizing-graphql-microservice","status":"publish","type":"post","link":"https:\/\/qxf2.com\/blog\/virtualizing-graphql-microservice\/","title":{"rendered":"Virtualizing GraphQL Microservice using Apollo Server"},"content":{"rendered":"

There is plenty of information online about how to virtualize REST based microservices. At our clients, Qxf2<\/a> has implemented different techniques like using a Flask app, using wiremock, etc. But recently we found the need to for virtualizing a GraphQL microservice to expand the scope of our test automation on our CI environment. In this post, we will show one way to virtualize a GraphQL based microservice. In theory, the approach is very similar to mocking a REST API. However, there are enough implementation differences that we thought it was worth explaining at length in a blog post.<\/p>\n

Why use service virtualization for testing?<\/h4>\n

At Qxf2, we are big fans of service virtualization as a testing technique. This is because it allows us to isolate the application under test from any third-party dependencies it may have. By doing so, we can enable developers to test the application on their local machines, and also ensure that most integration tests run smoothly with the CI setup.
\nMoreover, service virtualization can help reduce the costs associated with testing. This is because it means we need to use and maintain fewer third-party licenses in our test environments. Furthermore, it enables us to test a wider range of possibilities, such as how the application behaves when a third-party dependency is slow or (even worse) down.<\/p>\n

In this post, we will demonstrate how to virtualize a GraphQL microservice. Specifically, we will show you how to create a sandbox GraphQL server that mocks the responses for the queries. To start, we will show you how to mock a single query and then extend the example to show how we mocked authentication. Once you have learned this, you can easily extend the example to mock all the queries you need.<\/p>\n

Ways to Virtualize GraphQL Microservices<\/h4>\n

There are several options when it comes to virtualizing GraphQL microservices. There are many tools like mocki.io<\/strong>, mountebank<\/strong>, json-graphql-server<\/strong> etc, which allows us to easily mock GraphQL servers. These tools make it quick and easy to get started with mocking simple GraphQL interfaces. However, we needed more fine-grained control over the data that is needed to be returned. So, in our example we will be using Apollo server<\/a> and @graphql-tools\/mock<\/a> node packages to setup our own sandbox GraphQL server that mocks the qxf2-employees<\/a><\/strong> microservices, which is used by the qxf2-survey<\/a><\/strong> app to retrieve the employee details.<\/p>\n

Overview<\/h3>\n

Since this is going to be a long post, here is a quick overview of what we will cover:
\nA. Pre-requisites
\nB. Getting Started
\nC. Setting Up a Virtual GraphQL Server
\nD. Defining the Schema
\nE. Mocking the response for the queries
\nF. Mocking the Authentication
\nF1. Mocking the generation of tokens
\nF2. Validation of tokens in the header
\nG. Putting it all together<\/p>\n

We will be mocking the response returned for the following query:<\/p>\n

\r\nquery findAllEmployees {\r\n  allEmployees {\r\n    edges {\r\n      node {\r\n        email\r\n        employeeId\r\n        dateJoined\r\n        isActive\r\n        blogAuthorName\r\n        firstname\r\n        lastname\r\n      }\r\n    }\r\n  }\r\n}\r\n<\/pre>\n
In addition, we will demonstrate how to mock the authentication process, which includes generating an access token and validating the authorization headers.<\/p>\n
A. Pre-requisites<\/h4>\n
You need to have at least Nodejs<\/strong> version 14 or above and npm<\/strong> installed on your machine. You can refer to the following link<\/a> if needed. <\/p>\n
B. Getting Started<\/h4>\n
1. To start off, we’ll initialize a new project by running the following command in the terminal:<\/p>\n
\r\nnpm init -y\r\n<\/pre>\n
This creates a default package.json<\/code> file for your project, which contains information about the project and its dependencies.<\/p>\n
2. Next, we’ll install the necessary libraries to build our GraphQL server.  Use the following command to install the dependencies:<\/p>\n
\r\n npm install --save @apollo\/server @graphql-tools\/mock dotenv graphql graphql-tools\r\n<\/pre>\n
3. Finally, create a new JavaScript file in your project. Let’s name it mock-graphql-server.js<\/em><\/code> for this example.
\nYou’re now ready to begin building your own virtual GraphQL server!<\/p>\n
C. Setting Up a Virtual GraphQL Server<\/h4>\n
The first step in virtualizing a GraphQL microservice is to set up a virtual GraphQL server. This can be accomplished using the ApolloServer<\/code> library in Node.js<\/strong>.
\n1. Let’s begin by importing the required libraries. The ApolloServer<\/code> library is imported from the @apollo\/server package<\/code>, and the startStandaloneServer<\/code> method is imported from the @apollo\/server\/standalone<\/code> package.<\/p>\n
\r\nconst { ApolloServer } = require('@apollo\/server');\r\nconst { startStandaloneServer } = require('@apollo\/server\/standalone');\r\n<\/pre>\n
2. Next, we declare our sample typeDefs<\/strong> and resolvers<\/strong>.<\/p>\n
  • typeDefs<\/strong> is a string that represents the GraphQL schema of our server.<\/li>\n
  • resolvers<\/strong> are used to handle the responses that are returned for data requests made by GraphQL queries.<\/li>\n
    Let’s define a query “reslove_me” under typeDef<\/code> which would be resolved to give response “Resolved”<\/p>\n
    \r\nconst typeDefs = `\r\n  type Query {\r\n    resolve_me: String\r\n  }`;\r\nconst resolvers = {\r\n    Query: {\r\n      resolve_me: () => 'Resolved',\r\n    },\r\n  };\r\n<\/pre>\n
    3. Now we will use the  ApolloServer<\/code> class to create a new instance of the virtual GraphQL server. The typeDefs<\/code> and resolvers<\/code> needs to be passed as options to the constructor.<\/p>\n
    \r\nconst server = new ApolloServer({\r\n  typeDefs,\r\n  resolvers,\r\n});\r\n<\/pre>\n
    4. Finally, we can define the code to start our server by calling the startStandaloneServer()<\/code> method. Here, you can also specify the port you want your server to run on, by default the port is  set to 4000.<\/p>\n
    \r\nconst server_port = 5000\r\nconst { url } = startStandaloneServer(server, {listen: { port: server_port }});\r\nconsole.log(`\ud83d\ude80 Server listening at Port: ${server_port}`);\r\n<\/pre>\n
    5. Your complete code should look similar to this:<\/p>\n
    \r\nconst { ApolloServer } = require('@apollo\/server');\r\nconst { startStandaloneServer } = require('@apollo\/server\/standalone');\r\nconst typeDefs = `\r\n  type Query {\r\n    resolve_me: String\r\n  }`;\r\nconst resolvers = {\r\n    Query: {\r\n      resolve_me: () => 'Resolved',\r\n    },\r\n  };\r\n\r\nconst server = new ApolloServer({\r\n  typeDefs,\r\n  resolvers,\r\n});\r\n\r\nconst serverPort = 5000;\r\nconst { url } = startStandaloneServer(server, { listen: { port: serverPort } });\r\nconsole.log(`\ud83d\ude80 Server listening at Port: ${serverPort}`);\r\n<\/pre>\n
    6. You can now run your code using node mock-graphql-server<\/code>.<\/p>\n
    7. Open your browser and navigate to http:\/\/localhost:5000\/. You should see a GraphQL web interface.
    \n
    \"Web<\/a>
    GraphQL web interface by Apollo Server<\/figcaption><\/figure><\/p>\n
    8. Try running the query: <\/p>\n
    query resolver{resolve_me}<\/pre>\n
    9. You should see the following response:<\/p>\n
    \r\n{\r\n  \"data\": {\r\n    \"resolve_me\": \"Resolved\"\r\n  }\r\n}\r\n<\/pre>\n
    As mentioned earlier, if you look back at our code, you would see that we have defined a resolver<\/code> which returns a string “Resolved” when the query “resolve_me” is called. <\/p>\n
    Pretty cool right? Now lets go ahead and replace the sample Query in typeDef<\/code> and define the actual schema we are trying to mock.<\/p>\n
    D. Defining the Schema<\/h4>\n
    We define our GraphQL schema using the GraphQL type system. The schema is a blueprint for what kind of data can be requested from the API. In our case, we have to mock the following Query: <\/p>\n
    \r\nquery findAllEmployees {\r\n  allEmployees {\r\n    edges {\r\n      node {\r\n        email\r\n        employeeId\r\n        dateJoined\r\n        isActive\r\n        blogAuthorName\r\n        firstname\r\n        lastname\r\n      }\r\n    }\r\n  }\r\n}\r\n<\/pre>\n
    1. We can do this by defining a Query type that includes the allEmployees<\/code> field.<\/p>\n
    \r\nconst typeDefs = `#graphql\r\n  type Query {\r\n    allEmployees: Employees\r\n  }\r\n<\/pre>\n
    You would notice that allEmployees<\/code> is of  a custom type Employees<\/code>.<\/p>\n
    2. Now lets define the custom type Employees<\/code><\/p>\n
    \r\n  type Employees {\r\n    edges: [EmployeeEdge]\r\n  }\r\n<\/pre>\n
    The type Employees<\/code> has a single field edges<\/code> which is an array of another custom type EmployeeEdge<\/code><\/p>\n
    3. Let’s define the EmployeeEdge<\/code> type<\/p>\n
    \r\n  type EmployeeEdge {\r\n    node: Employee\r\n  }\r\n<\/pre>\n
    The EmployeeEdge<\/code> type consists of the field node<\/code> which is of another custom type Employee<\/code><\/p>\n
    4. Finally, lets define the type Employee<\/code><\/p>\n
    \r\n  type Employee {\r\n    email: String\r\n    employeeId: String\r\n    dateJoined: String\r\n    isActive: String\r\n    blogAuthorName: String\r\n    firstname: String\r\n    lastname: String\r\n  }\r\n<\/pre>\n
    As you can see the custom type Employee<\/code> has several fields of the type ‘String<\/strong>‘<\/p>\n
    5. Our typeDef<\/code> should now look similar to this:<\/p>\n
    \r\nconst typeDefs = `#graphql\r\n  type Query {\r\n    allEmployees: Employees\r\n  }\r\n  type Employees {\r\n    edges: [EmployeeEdge]\r\n  }\r\n\r\n  type EmployeeEdge {\r\n    node: Employee\r\n  }\r\n  type Employee {\r\n    email: String\r\n    employeeId: String\r\n    dateJoined: String\r\n    isActive: String\r\n    blogAuthorName: String\r\n    firstname: String\r\n    lastname: String\r\n  }\r\n`;\r\n<\/pre>\n
    6.  With this schema, a client can query for all employees by sending the GraphQL query mentioned above
    \nNext, lets take a look at how we can resolve this query and return response for it<\/p>\n
    E. Mocking the response for the queries<\/h4>\n
    I mentioned earlier that we could resolve the queries by defining a resolver. But in this case allEmployees<\/code> is of a custom type and defining a resolver can be tedious. So, let us use the magic of @graphql-tools\/mock<\/code> to generate a mock response for the query.<\/p>\n
    1. To do this lets first import the addMocksToSchema<\/code> library from package @graphql-tools\/mock<\/code> and library makeExecutableSchema<\/code> from @graphql-tools\/schema<\/code> <\/p>\n
        \r\nconst { addMocksToSchema } = require ('@graphql-tools\/mock');\r\nconst { makeExecutableSchema } =  require('@graphql-tools\/schema');\r\n<\/pre>\n
    2. Next, replace the existing server with the following:<\/p>\n
        \r\nconst server = new ApolloServer({\r\n    schema: addMocksToSchema({\r\n      schema: makeExecutableSchema({ typeDefs, resolvers }),\r\n      preserveResolvers: true,\r\n    }),\r\n  });\r\n<\/pre>\n
    addMocksToSchema<\/code> automatically generates mock data for the fields in a GraphQL schema.
    \n3. Our final code should look similar to this:<\/p>\n
       \r\nconst { ApolloServer } = require('@apollo\/server');\r\nconst { startStandaloneServer } = require('@apollo\/server\/standalone');\r\nconst { addMocksToSchema } = require ('@graphql-tools\/mock');\r\nconst { makeExecutableSchema } =  require('@graphql-tools\/schema');\r\n\r\nconst typeDefs = `#graphql\r\n  type Query {\r\n    allEmployees: Employees\r\n  }\r\n  \r\n  type Employees {\r\n    edges: [EmployeeEdge]\r\n  }\r\n\r\n  type EmployeeEdge {\r\n    node: Employee\r\n  }\r\n\r\n  type Employee {\r\n    email: String\r\n    employeeId: String\r\n    dateJoined: String\r\n    isActive: String\r\n    blogAuthorName: String\r\n    firstname: String\r\n    lastname: String\r\n  }\r\n`;\r\n\r\nconst resolvers = {\r\n    Query: {},\r\n  };\r\n\r\nconst server = new ApolloServer({\r\n    schema: addMocksToSchema({\r\n      schema: makeExecutableSchema({ typeDefs, resolvers }),\r\n      preserveResolvers: true,\r\n    }),\r\n  });\r\n\r\nconst server_port = 5000\r\nconst { url } = startStandaloneServer(server, {listen: { port: server_port }});\r\n  \r\nconsole.log(`\ud83d\ude80 Server listening at Port: ${server_port}`);\r\n<\/pre>\n
    4. Now, run the script again  navigate to http:\/\/localhost:5000\/ and run the query:<\/p>\n
    \r\nquery findAllEmployees {\r\n  allEmployees {\r\n    edges {\r\n      node {\r\n        email\r\n        employeeId\r\n        dateJoined\r\n        isActive\r\n        blogAuthorName\r\n        firstname\r\n        lastname\r\n      }\r\n    }\r\n  }\r\n}\r\n<\/pre>\n
    5. You should see the following response:<\/p>\n
    \r\n{\r\n  \"data\": {\r\n    \"allEmployees\": {\r\n      \"edges\": [\r\n        {\r\n          \"node\": {\r\n            \"email\": \"Hello World\",\r\n            \"employeeId\": \"Hello World\",\r\n            \"dateJoined\": \"Hello World\",\r\n            \"isActive\": \"Hello World\",\r\n            \"blogAuthorName\": \"Hello World\",\r\n            \"firstname\": \"Hello World\",\r\n            \"lastname\": \"Hello World\"\r\n          }\r\n        },\r\n        {\r\n          \"node\": {\r\n            \"email\": \"Hello World\",\r\n            \"employeeId\": \"Hello World\",\r\n            \"dateJoined\": \"Hello World\",\r\n            \"isActive\": \"Hello World\",\r\n            \"blogAuthorName\": \"Hello World\",\r\n            \"firstname\": \"Hello World\",\r\n            \"lastname\": \"Hello World\"\r\n          }\r\n        }\r\n      ]\r\n    }\r\n  }\r\n}\r\n<\/pre>\n
    All the fields in the response are magically populated!!<\/p>\n
    6. But, in my case I want to return a specific response for each field rather than “Hello World”. We can do this by passing the desired mock data to the addMocksToSchema<\/code> method<\/p>\n
    7. First lets create the data that we would like to return. For this example lets add the details of two employees ‘smart learner<\/code>‘ and ‘slow learner<\/code>‘ and assign it to a variable employees<\/strong>:<\/p>\n
        \r\nlet employees = [ \r\n    {\r\n        \"email\": \"smart_learner@qxf2.com\",\r\n        \"employeeId\": \"4\",\r\n        \"dateJoined\": \"04-Sept-1976\",\r\n        \"isActive\": \"Y\",\r\n        \"blogAuthorName\": \"user4\",\r\n        \"firstname\": \"Smart\",\r\n        \"lastname\": \"Learner\"\r\n    },\r\n\r\n    {\r\n        \"email\": \"slow_learner@qxf2.com\",\r\n        \"employeeId\": \"5\",\r\n        \"dateJoined\": \"25-Feb-1977\",\r\n        \"isActive\": \"Y\",\r\n        \"blogAuthorName\": \"user3\",\r\n        \"firstname\": \"Slow\",\r\n        \"lastname\": \"Learner\"\r\n    }\r\n   ]\r\n<\/pre>\n
    8. Next let us define a constant mock and assign it to the response that we want to return.<\/p>\n
    \r\nconst mocks = {\r\n  Employees: () => ({\r\n    edges: employees.map(employee => ({ node: employee }))\r\n  }),\r\n};\r\n<\/pre>\n
    Here, mock object contains the property, Employees<\/code>. The value of this property is a function that returns an object that represents the mock data for the Employees<\/code> type that we defined in our query. This object contains an edges<\/code> property which is an array of objects, where each object represents a node which contains the employee data.<\/p>\n
    9. Finally, lets pass this mock object as an argument to the addMocksToSchema<\/code> function<\/p>\n
    \r\nconst server = new ApolloServer({\r\n    schema: addMocksToSchema({\r\n      schema: makeExecutableSchema({ typeDefs, resolvers }),\r\n      mocks,\r\n      preserveResolvers: true,\r\n    }),\r\n  });\r\n<\/pre>\n
    10. Our final code should look like this:<\/p>\n
    \r\nconst { ApolloServer } = require('@apollo\/server');\r\nconst { startStandaloneServer } = require('@apollo\/server\/standalone');\r\nconst { addMocksToSchema } = require ('@graphql-tools\/mock');\r\nconst { makeExecutableSchema } =  require('@graphql-tools\/schema');\r\n\r\nconst typeDefs = `#graphql\r\n  type Query {\r\n    resolved: String\r\n    allEmployees: Employees\r\n  }\r\n  \r\n  type Employees {\r\n    edges: [EmployeeEdge]\r\n  }\r\n\r\n  type EmployeeEdge {\r\n    node: Employee\r\n  }\r\n\r\n  type Employee {\r\n    email: String\r\n    employeeId: String\r\n    dateJoined: String\r\n    isActive: String\r\n    blogAuthorName: String\r\n    firstname: String\r\n    lastname: String\r\n  }\r\n`;\r\n\r\nconst resolvers = {\r\n    Query: {},\r\n  };\r\n\r\n  let employees = [ \r\n    {\r\n        \"email\": \"smart_learner@qxf2.com\",\r\n        \"employeeId\": \"4\",\r\n        \"dateJoined\": \"04-Sept-1976\",\r\n        \"isActive\": \"Y\",\r\n        \"blogAuthorName\": \"user4\",\r\n        \"firstname\": \"Smart\",\r\n        \"lastname\": \"Learner\"\r\n    },\r\n\r\n    {\r\n        \"email\": \"slow_learner@qxf2.com\",\r\n        \"employeeId\": \"5\",\r\n        \"dateJoined\": \"25-Feb-1977\",\r\n        \"isActive\": \"Y\",\r\n        \"blogAuthorName\": \"user3\",\r\n        \"firstname\": \"Slow\",\r\n        \"lastname\": \"Learner\"\r\n    }\r\n   ]\r\n\r\nconst mocks = {\r\nEmployees: () => ({\r\n  edges: employees.map(employee => ({ node: employee }))\r\n  }),\r\n};\r\n\r\nconst server = new ApolloServer({\r\n    schema: addMocksToSchema({\r\n      schema: makeExecutableSchema({ typeDefs, resolvers }),\r\n      mocks,\r\n      preserveResolvers: true,\r\n    }),\r\n  });\r\n\r\nconst server_port = 5000\r\nconst { url } = startStandaloneServer(server, {listen: { port: server_port }});\r\n  \r\nconsole.log(`\ud83d\ude80 Server listening at Port: ${server_port}`);\r\n<\/pre>\n
    11. Now run the script again and go to http:\/\/localhost:5000\/. Run the query again<\/p>\n
    \r\nquery findAllEmployees {\r\n  allEmployees {\r\n    edges {\r\n      node {\r\n        email\r\n        employeeId\r\n        dateJoined\r\n        isActive\r\n        blogAuthorName\r\n        firstname\r\n        lastname\r\n      }\r\n    }\r\n  }\r\n}\r\n<\/pre>\n
    12. You should see following response:<\/p>\n
    \r\n{\r\n  \"data\": {\r\n    \"allEmployees\": {\r\n      \"edges\": [\r\n        {\r\n          \"node\": {\r\n            \"email\": \"smart_learner@qxf2.com\",\r\n            \"employeeId\": \"4\",\r\n            \"dateJoined\": \"04-Sept-1976\",\r\n            \"isActive\": \"Y\",\r\n            \"blogAuthorName\": \"user4\",\r\n            \"firstname\": \"Smart\",\r\n            \"lastname\": \"Learner\"\r\n          }\r\n        },\r\n        {\r\n          \"node\": {\r\n            \"email\": \"slow_learner@qxf2.com\",\r\n            \"employeeId\": \"5\",\r\n            \"dateJoined\": \"25-Feb-1977\",\r\n            \"isActive\": \"Y\",\r\n            \"blogAuthorName\": \"user3\",\r\n            \"firstname\": \"Slow\",\r\n            \"lastname\": \"Learner\"\r\n          }\r\n        }\r\n      ]\r\n    }\r\n  }\r\n}\r\n<\/pre>\n
    Voila!! And that is how we mock the responses for a query.<\/p>\n
    F. Mocking the Authentication<\/h4>\n
    We explored the process of virtualizing GraphQL responses. Now, moving on, let’s delve into how we can mock the authentication process. The virtualization of GraphQL authentication process can be divided into two distinct parts:<\/p>\n
    1. Mocking the generation of tokens.
    \n2. Validation of tokens in the header.<\/p>\n
    It’s important to note that the microservice we’re virtualizing utilizes JWT for authentication. Therefore, this example is written with that specific implementation in mind. However, if your microservice uses a different form of authentication, you can adapt these steps accordingly.<\/p>\n
     F1. Mocking the generation of tokens <\/h5>\n
    1. To mock the generation of tokens, we need to mock the mutation<\/code> which is used to return the access tokens<\/p>\n
    \r\nmutation {\r\n    auth(password: \"A_PASSWORD_YOU_SET\", username: \"A_USERNAME_YOU_SELECT\") {\r\n        accessToken\r\n        refreshToken\r\n        }\r\n}\r\n<\/pre>\n
    2. To mock this mutation<\/code>, lets first define a new type Mutation<\/code> under typeDef<\/code>.<\/p>\n
    \r\n type Mutation {\r\n    auth(username: String, password: String): Auth\r\n  }\r\n<\/pre>\n
    As, we saw in the previous section Mutation<\/code> consists of a field auth<\/code> which is of a custom type Auth<\/code>.
    \n3. So, lets define the type Auth<\/code> as well.<\/p>\n
    \r\n  type Auth {\r\n    accessToken: String\r\n    refreshToken: String\r\n  }\r\n<\/pre>\n
    Here, Auth contains two fields accessToken<\/code> and refreshToken<\/code> both of type String<\/strong>
    \n4. Lets create an environment file that would store our mock credentials in the same directory as our node project. Add the variables USERNAME, PASSWORD, ACCESS_TOKEN, REFRESH_TOKEN and assign some dummy values to it. <\/p>\n
    \r\n#.env\r\nGRAPHQl_USERNAME=\"dummy\"\r\nGRAPHQL_PASSWORD=\"dummy\"\r\nACCESS_TOKEN=\"dummy-token\"\r\nREFRESH_TOKEN=\"dummy-token\"\r\n<\/pre>\n
    5. We can then use the dotenv<\/code> library to import the environment variable to our Javascript file. Lets first import the dotenv<\/code> library<\/p>\n
    \r\nrequire('dotenv').config();\r\n<\/pre>\n
    6. Next, we need to define what happens when the Mutation<\/code> is invoked. Lets handle this with our resolvers<\/code>.<\/p>\n
    \r\nconst resolvers = {\r\n  Query: {},\r\n  Mutation: {\r\n    auth: (_, { username, password }) => {\r\n      if (username === process.env.USERNAME && password === process.env.PASSWORD) {\r\n        return {\r\n          accessToken: process.env.ACCESS_TOKEN,\r\n          refreshToken: process.env.REFRESH_TOKEN\r\n        };\r\n      } else {\r\n        return {\r\n          accessToken: null,\r\n          refreshToken: null\r\n        };\r\n      }\r\n    },\r\n  },\r\n};\r\n<\/pre>\n
    Here the Mutation<\/code> takes two input parameters, username<\/code> and password<\/code>, The username<\/code> and password<\/code> are compared with the USERNAME<\/strong> and PASSWORD<\/strong> that we specified in our environment file. If both the strings match then the values of accessToken<\/code> and refreshToken<\/code> defined in our environment file are returned, If the strings do not match then null values are returned.<\/p>\n
    Now that we have mocked the generation of tokens, lets take a look at how we can validate these tokens.<\/p>\n
    F2. Validation of tokens in the header<\/h5>\n
    In the real service that we are trying to mock, the access token generated needs to be passed in the Authorization<\/code> header for authorization of query requests. It returns an error message “object of type ‘AuthInfoField’ has no len()<\/em>” incase the Authorization<\/code> Header is not present or is incorrect.<\/p>\n
    Note:<\/strong> It is to be noted that the current implementation of the service that is mocked has an issue with its error handling. In the case that the Authorization header is absent or invalid, we should be receiving a 401 Unauthorized response code, however, the implementation returns a 200 response code.<\/p>\n
    1. To mock this process let’s first fetch the authorization header from the request. We can do this by passing req.headers.authorization<\/code> that fetches the Authorization<\/strong> header, in the startStandaloneServer<\/code> method.<\/p>\n
    \r\nconst { url } = startStandaloneServer(server, {\r\n    context: async ({ req, res }) => {\r\n      const token = req.headers.authorization || '';\r\n      return { token };\r\n    },\r\n    listen: { port: server_port },\r\n  });\r\n<\/pre>\n
    Here, we get the header value and assign it to a constant token<\/code><\/p>\n
    2. Now that we have fetched the authorization header, we need to call it inside our resolvers<\/code>. Since we are trying to add authorization to the Query allEmployees<\/code>, lets first define allEmployees<\/code> in our Query resolver. <\/p>\n
    \r\n    Query: {\r\n      allEmployees: () => {},\r\n    }\r\n<\/pre>\n
    3. Now since we have to raise a GraphQL<\/code> error in case the Authorization Header is incorrect or not present, let’s import the error module that will help us raise this error from the graphql<\/code> package.<\/p>\n
    \r\nconst { GraphQLError } = require('graphql');\r\n<\/pre>\n
    4. Next, we can call the context<\/code> method which contains the token<\/code> object in our allEmployees<\/code> query resolver. We can then compare the token to check if it matches with the expected token, and raise an error which mimics the error we would receive in the actual service if the tokens do not match.<\/p>\n
    \r\n    Query: {\r\n      allEmployees: (root, args, context) => {\r\n        if (context.token != `Bearer ${process.env.ACCESS_TOKEN}`) {\r\n          throw new GraphQLError(\"object of type 'AuthInfoField' has no len()\", {\r\n            extensions: {\r\n              code: 'Unauthorized'\r\n            },\r\n          });\r\n      }\r\n      },\r\n    }\r\n<\/pre>\n
    5. Finally, lets disable the stacktrace<\/a> for the error as we are just mocking the error received in the actual service. To do this we need to pass the includeStacktraceInErrorResponses<\/code> option to the constructor of ApolloServer<\/code> and set it to false<\/p>\n
    \r\nconst server = new ApolloServer({\r\n    schema: addMocksToSchema({\r\n      schema: makeExecutableSchema({ typeDefs, resolvers }),\r\n      mocks,\r\n      preserveResolvers: true,\r\n    }),\r\n    includeStacktraceInErrorResponses: false\r\n  });\r\n<\/pre>\n
    G. Putting it all together<\/h4>\n
    That’s it! We are finally done with our coding. Our complete code should look similar to this:<\/p>\n
    \r\nconst { ApolloServer } = require('@apollo\/server');\r\nconst { startStandaloneServer } = require('@apollo\/server\/standalone');\r\nconst { addMocksToSchema } = require ('@graphql-tools\/mock');\r\nconst { makeExecutableSchema } =  require('@graphql-tools\/schema');\r\nconst { GraphQLError } = require('graphql');\r\nconst fs = require('fs');\r\nrequire('dotenv').config();\r\n\r\nconst typeDefs = `#graphql\r\n  type Query {\r\n    allEmployees: Employees\r\n  }\r\n  \r\n  type Mutation {\r\n    auth(username: String, password: String): Auth\r\n  }\r\n\r\n  type Auth {\r\n    accessToken: String\r\n    refreshToken: String\r\n  }\r\n\r\n  type Employees {\r\n    edges: [EmployeeEdge]\r\n  }\r\n\r\n  type EmployeeEdge {\r\n    node: Employee\r\n  }\r\n\r\n  type Employee {\r\n    email: String\r\n    employeeId: String\r\n    dateJoined: String\r\n    isActive: String\r\n    blogAuthorName: String\r\n    firstname: String\r\n    lastname: String\r\n  }\r\n`;\r\n\r\nconst resolvers = {\r\n    Query: {\r\n      allEmployees: (root, args, context) => {\r\n        if (context.token != `Bearer ${process.env.ACCESS_TOKEN}`) {\r\n          throw new GraphQLError(\"object of type 'AuthInfoField' has no len()\", {\r\n            extensions: {\r\n              code: 'Unauthorized'\r\n            },\r\n          });\r\n      }\r\n      },\r\n    },\r\n    Mutation: {\r\n      auth: (_, { username, password }) => {\r\n        if (username === process.env.USERNAME && password === process.env.PASSWORD) {\r\n          return {\r\n            accessToken: process.env.ACCESS_TOKEN,\r\n            refreshToken: process.env.REFRESH_TOKEN\r\n          };\r\n        } else {\r\n          return {\r\n            accessToken: null,\r\n            refreshToken: null\r\n          };\r\n        }\r\n      },\r\n    },\r\n  };\r\n\r\n  let employees = [ \r\n    {\r\n        \"email\": \"smart_learner@qxf2.com\",\r\n        \"employeeId\": \"4\",\r\n        \"dateJoined\": \"04-Sept-1976\",\r\n        \"isActive\": \"Y\",\r\n        \"blogAuthorName\": \"user4\",\r\n        \"firstname\": \"Smart\",\r\n        \"lastname\": \"Learner\"\r\n    },\r\n\r\n    {\r\n        \"email\": \"slow_learner@qxf2.com\",\r\n        \"employeeId\": \"5\",\r\n        \"dateJoined\": \"25-Feb-1977\",\r\n        \"isActive\": \"Y\",\r\n        \"blogAuthorName\": \"user3\",\r\n        \"firstname\": \"Slow\",\r\n        \"lastname\": \"Learner\"\r\n    }\r\n   ]\r\n\r\nconst mocks = {\r\nEmployees: () => ({\r\n  edges: employees.map(employee => ({ node: employee }))\r\n }),\r\n};\r\n  \r\nconst server = new ApolloServer({\r\n    schema: addMocksToSchema({\r\n      schema: makeExecutableSchema({ typeDefs, resolvers }),\r\n      mocks,\r\n      preserveResolvers: true,\r\n    }),\r\n    includeStacktraceInErrorResponses: false\r\n  });\r\n  \r\nconst server_port = 5000\r\nconst { url } = startStandaloneServer(server, {\r\n    context: async ({ req, res }) => {\r\n      const token = req.headers.authorization || '';\r\n      return { token };\r\n    },\r\n    listen: { port: server_port },\r\n  });\r\n    \r\nconsole.log(`\ud83d\ude80 Server listening at Port: ${server_port}`);\r\n<\/pre>\n
    1. Start your server, navigate to http:\/\/localhost:5000\/. Try running the query findAllEmployees<\/code> again:<\/p>\n
    \r\nquery findAllEmployees {\r\n  allEmployees {\r\n    edges {\r\n      node {\r\n        email\r\n        employeeId\r\n        dateJoined\r\n        isActive\r\n        blogAuthorName\r\n        firstname\r\n        lastname\r\n      }\r\n    }\r\n  }\r\n}\r\n<\/pre>\n
    You would see an Unauthorized<\/strong> error in your response.<\/p>\n
    2. You can add a header by clicking on the headers<\/code> tab in the Apollo server’s web interface itself.<\/p>\n
    \"Apollo<\/a>
    Set the Header for your query request with Apollo Server’s inbuilt Header feature<\/figcaption><\/figure>\n
    3. Set the header key to Authorization<\/code> and value to 'Bearer '<\/code>. In our case the header would be Authorization<\/strong>: Bearer dummy-token<\/strong><\/code><\/p>\n
    \"Setting<\/a>
    Setting Headers for the GraphQL query request<\/figcaption><\/figure>\n
    4. Now run the query again, you would see that the actual response is returned this time.<\/p>\n
    \n
    Hire Qxf2!<\/h4>\n
    Qxf2<\/a> is the home of technical testers. We help in testing early stage products and love working with small engineering teams. We employ many emerging testing techniques and implement test ideas using a whole suite of modern testing tools. If this post helped you, consider hiring a tester from Qxf2 for your project. You can get in touch with us via this contact form<\/a>.<\/p>\n
    \n","protected":false},"excerpt":{"rendered":"
    There is plenty of information online about how to virtualize REST based microservices. At our clients, Qxf2 has implemented different techniques like using a Flask app, using wiremock, etc. But recently we found the need to for virtualizing a GraphQL microservice to expand the scope of our test automation on our CI environment. In this post, we will show one […]<\/p>\n","protected":false},"author":29,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[324,287,256,64,325],"tags":[],"class_list":["post-17491","post","type-post","status-publish","format-standard","hentry","category-apollo-server","category-graphql","category-microservices","category-mock","category-mock-graphql"],"_links":{"self":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts\/17491","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/comments?post=17491"}],"version-history":[{"count":81,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts\/17491\/revisions"}],"predecessor-version":[{"id":17675,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts\/17491\/revisions\/17675"}],"wp:attachment":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/media?parent=17491"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/categories?post=17491"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/tags?post=17491"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}