Mocking GraphQL with Apollo Server

Thanks to mocking, UI development can begin before the backend is fully functional. The UI can be tested without having to wait for lengthy database operations or maintaining a full-fledged GraphQL server.
There are a number of community-built tools, such as graphql-tools, graphql-faker, and Apollo Server's in-built mocking feature, that make it simple to simulate user interactions with a GraphQL API by simulating their queries and schema.
In order to test our resolvers before actually implementing them, let's use Apollo Server's mocking feature to simulate GraphQL requests.
Head to the src/index.ts
file and simply add mocks: true
to Apollo Server, as follows:
const server : ApolloServer = new ApolloServer({schema , mocks: true});
The mocking functionality built into Apollo Server is simplistic. A value of the same type as the associated field is simply returned based on the type definitions. Please enter the following query into Apollo Studio:
query {
findUsers(searchQuery:"ahmed"){
id name email postsCount
}
findPostsByUserId(userId:"10"){
id text postBy { id name } commentsCount
latestComment { id comment }
datetime
}
}
This shows that the default behavior for queries that are supposed to return a list of values is to return only two values, and that the value Hello World is returned for every field that accepts strings. This gives the results the right general shape, but it's not at all realistic. The good news is that we can use tools like casual, a fake data generator for JavaScript, to return more realistic and random values from GraphQL queries before implementing the necessary resolvers, in conjunction with Apollo Server.
Since the frontend developer can interact with the GraphQL API and retrieve the generated data without waiting for the backend developer to implement the resolvers, the frontend developer can begin building the frontend immediately. One problem that may arise is that our mocked API does not properly link entries that should be linked in a real-world scenario.
In the next article, we'll see how to configure CORS in our backend to allow our frontend development server (Angular CLI) to connect with our API without getting blocked by the Same Origin Policy in web browsers.
- Author: Ahmed Bouchefra Follow @ahmedbouchefra
-
Date:
✋If you have any questions about this article, ask them in our GitHub Discussions 👈 community. You can also
❤️ Like our page and subscribe to our feed for updates!
Find a list of emojis to copy and paste
Related posts
Seeding test data in TypeORM Setup TypeORM TypeORM Entity & Column decorators Setup TypeORM Create PostgreSQL database & user Angular 14 Apollo Client Setup Angular 14 Apollo Client Setup Debugging Angular applications Configuring CORS with Express.js Mocking GraphQL with Apollo Server GraphQL APIs with Apollo Server & Apollo Studio [Part 2] GraphQL APIs with Apollo Server & Apollo Studio Watch and compile TypeScript code to JavaScript Setup TypeScript with Node.js & Express.js Setup the server with Node.js/Express.js/Apollo Storing data with PostgreSQL and TypeORM Using GraphQL and Apollo for front- and back-end integration Using NVM on Windows How to Use Node.js to Run JavaScript on Servers Modern full-stack single-page apps' architecture 99+ Web Development Projects Challenges