Mastering MERN and GraphQL: Top Interview Questions for 2024

By /

The MERN (MongoDB, Express, React, Node.js) stack continues to dominate modern web development. Combined with GraphQL, it powers complex, scalable applications. If you’re preparing for interviews at top companies, here are some advanced and twisted MERN + GraphQL questions to test your expertise.

1. Explain how GraphQL resolves nested queries. How does it affect performance?

Answer: GraphQL resolves nested queries by recursively invoking the resolver functions for each field in the query. Each resolver handles its specific data-fetching logic. The process looks like a tree traversal:

  • The root resolver handles the entry point.
  • Each nested field’s resolver fetches the required data.

Performance Considerations:

  • Under-fetching: Unlike REST, GraphQL avoids under-fetching by retrieving exactly what’s needed.
  • Over-fetching: GraphQL can still cause performance issues if nested queries involve multiple network calls.
  • Optimization: Use DataLoader for batching and caching to minimize redundant database hits and n+1 query problems.

Example:

query {
  user(id: "123") {
    name
    posts {
      title
      comments {
        text
      }
    }
  }
}

Here, resolvers for user, posts, and comments are invoked in a hierarchical manner.

2. How do you handle authentication in a MERN application using GraphQL?

Answer: Authentication in GraphQL is usually done via middleware in the Express server. A token (e.g., JWT) is sent in the HTTP headers and verified at the server.

Steps:

  1. Client-Side:
    • The client sends the JWT in the Authorization header of the GraphQL request.
    const client = new ApolloClient({ uri: "/graphql", headers: { Authorization: `Bearer ${token}` } });
  2. Server-Side:
    • Use middleware to validate the token and attach the user to the request.
    app.use((req, res, next) => { const token = req.headers.authorization?.split(" ")[1]; if (token) { try { req.user = jwt.verify(token, "your-secret-key"); } catch (err) { throw new Error("Invalid token"); } } next(); });
  3. GraphQL Context:
    • Pass the authenticated user in the context.
    const server = new ApolloServer({ schema, context: ({ req }) => ({ user: req.user }), });
  4. Resolvers:
    • Check user permissions.
    const resolvers = { Query: { protectedData: (parent, args, context) => { if (!context.user) throw new Error("Authentication required"); return "Sensitive Data"; }, }, };

3. How would you design a schema for a blog application that supports categories, tags, and nested comments in GraphQL?

Answer: Here’s a sample schema:

type User {
  id: ID!
  name: String!
}

type Post {
  id: ID!
  title: String!
  content: String!
  author: User!
  categories: [Category!]!
  tags: [Tag!]!
  comments: [Comment!]!
}

type Category {
  id: ID!
  name: String!
}

type Tag {
  id: ID!
  name: String!
}

type Comment {
  id: ID!
  text: String!
  author: User!
  replies: [Comment!] # Nested comments
}

type Query {
  posts(categoryId: ID, tagIds: [ID]): [Post!]!
}

type Mutation {
  addComment(postId: ID!, text: String!): Comment!
}

Complexities Addressed:

  • Nested Comments: Handled via recursive replies field.
  • Filtering by Categories/Tags: Leverages query parameters for flexibility.

4. How would you optimize a GraphQL query in a MERN application if it’s fetching redundant data?

Answer: Optimizations include:

  1. DataLoader for Batching: Use Facebook’s DataLoader to batch and cache database requests, avoiding duplicate queries. const userLoader = new DataLoader(keys => UserModel.find({ _id: { $in: keys } }) );
  2. Efficient Resolver Design: Avoid querying unrelated data. Use projection in MongoDB to fetch only required fields. const posts = await PostModel.find({}, "title author");
  3. GraphQL Directives: Use custom directives for conditional queries. query { post(id: "123") { title @include(if: $includeTitle) } }
  4. Pagination and Limits: Implement skip and limit in resolvers. query { posts(limit: 10, skip: 20) { title } }

5. What are the challenges in migrating from REST to GraphQL, and how do you overcome them?

Answer: Challenges:

  1. Overfetching: Transitioning to GraphQL needs careful query design to avoid requesting unnecessary fields.
  2. Caching: RESTful URLs are cacheable by default, whereas GraphQL needs custom cache management.
  3. Backend Compatibility: Existing endpoints may need refactoring to expose data efficiently.

Solutions:

  • Start with REST-to-GraphQL bridges for gradual adoption.
  • Use Apollo Client cache or Redis for query caching.
  • Employ schema stitching for integrating existing REST APIs.

6. How would you implement real-time updates in a MERN + GraphQL application?

Answer: Real-time updates can be implemented using GraphQL Subscriptions with WebSocket support.

Steps:

  1. Server-Side: Use subscriptions-transport-ws or Apollo’s WebSocket server. const { PubSub } = require("graphql-subscriptions"); const pubsub = new PubSub(); const resolvers = { Query: { ... }, Mutation: { createPost: async (parent, args) => { const post = await PostModel.create(args); pubsub.publish("POST_CREATED", { postCreated: post }); return post; }, }, Subscription: { postCreated: { subscribe: () => pubsub.asyncIterator("POST_CREATED"), }, }, };
  2. Client-Side: Use Apollo’s useSubscription hook. const { data, loading } = useSubscription(POST_CREATED_SUBSCRIPTION);
  3. Subscription Query: subscription { postCreated { id title } }

7. How do you ensure security when using GraphQL in MERN applications?

Answer:

  1. Query Depth Limitation: Use libraries like graphql-depth-limit to prevent deeply nested queries. import depthLimit from "graphql-depth-limit"; const server = new ApolloServer({ schema, validationRules: [depthLimit(10)], });
  2. Rate Limiting: Implement rate-limiting middleware. app.use(rateLimit({ windowMs: 15 * 60 * 1000, max: 100 }));
  3. Input Validation: Use graphql-scalars for strict type validation. scalar Email
  4. Avoid Introspection in Production: Disable introspection to hide schema details. const server = new ApolloServer({ schema, introspection: process.env.NODE_ENV !== "production", });

Final Words

The MERN stack with GraphQL offers unparalleled flexibility and efficiency. However, its complexity demands a strong understanding of not just implementation but also optimization and security. By mastering these twisted questions, you’ll be ready to shine in your 2024 interviews!

Post Views: 5

Related Posts

Scroll to Top