Forem: Saloni Kathuria

Unleashing GraphQL Type-Based Mocking

Saloni Kathuria — Thu, 12 Oct 2023 09:03:55 +0000

Developing GraphQL APIs often involves creating and testing the API’s functionality, and one essential aspect of this process is generating mock data. Mock data helps developers build and test GraphQL queries and mutations without relying on a real database or production data. In this article, we’ll explore how to use graphql-codegen-typescript-mock-data to easily generate mock data based on your GraphQL schema.

Understanding GraphQL Schemas

A GraphQL schema defines the types and operations available in your API. It includes information about queries, mutations, and the data types that can be retrieved or manipulated. The schema acts as a contract between the client and server, ensuring that clients request only valid data.

Generating Mock Data with graphql-codegen-typescript-mock-data

The graphql-codegen-typescript-mock-data is a powerful tool that works in conjunction with graphql-codegen. It generates TypeScript types and mock data for your GraphQL schema, making it easier to develop and test your API.

Steps to get started with graphql-codegen-typescript-mock-data:

- Install Dependencies

npm install - save-dev @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-mock-data graphql

- Creating a GraphQL Schema

To get started, you need a GraphQL schema for your API. You can define your schema using the GraphQL Schema Definition Language (SDL) or a programmatic approach, depending on your preferences. Here’s a simple example of an SDL-based schema:

type Post {
  id: ID!
  title: String!
  content: String!
}

type Query {
  getPosts: [Post!]!
}

With this schema, you can query for a list of posts. Now, let’s see how to use graphql-codegen-typescript-validation-schema to generate TypeScript types and mock data based on this schema.

- Configure Code Generation

schema: ./src/schema.ts
require:
  - ts-node/register/transpile-only
generates:
  src/generated-types.ts:
    plugins:
      - typescript
      - typescript-resolvers
  src/generated-mocks.ts:
    plugins:
      - typescript-mock-data:
          typesFile: './generated-types.ts'

This configuration specifies the schema path and the output file for the generated TypeScript code. Also generates mock data using typescript-mock-data plugin.

The configuration has the following fields:

schema: specifies the path to the local/ graphql schema endpoint

generates: A map where the key represents an output path for the generated code, and the value represents a set of relevant options for that specific file. Below are the possible options that can be specified.

Generating types in output file src/generated-types.ts , using plugins typescript and typescript-resolver .
Generating mocks from the types in the putput file src/generated-mocks.ts , using the plugin typescript-mock-data

Once you run this command it will create 2 files one with generated types and other with generated mocks using the types.

The generated mock data file looks like this

export const aPost = (overrides?: Partial<Post>): Post => {
  return {
    id: overrides && overrides.hasOwnProperty('id') ? overrides.id! : '0550ff93-dd31-49b4-8c38-ff1cb68bdc38',
    title: overrides && overrides.hasOwnProperty('title') ? overrides.title! : 'aliquid',
    content: overrides && overrides.hasOwnProperty('content') ? overrides.title! : 'rerum', 
  };
};

- Use Mock Data

You can use the generated mock data in your tests, development environment, or anywhere else you need mock data.

Here we will see the usage of it in unit testing:

const { aPost } from 'src/generated-mocks';

const post = aPost({ title: 'Hello World' });

// will create a post object with `title` property overridden to `Hello World`

The mockPost() function will provide you with mock data for a Post type:

{
  "id": "0550ff93-dd31-49b4-8c38-ff1cb68bdc38",
  "title": "Hello World",
  "content": "rerum"
}

Generating mock data for your GraphQL API is crucial for effective development and testing. With tools like graphql-codegen-typescript-mock-data, you can streamline the process by automatically generating TypeScript types and mock data based on your GraphQL schema. This simplifies development, reduces reliance on real data sources, and ensures consistent and reliable testing for your GraphQL API.

Thanks for reading :)

Reset your ErrorBoundary

Saloni Kathuria — Wed, 21 Jun 2023 10:29:52 +0000

Error boundaries are a powerful feature in React that allow developers to catch and handle JavaScript errors gracefully, preventing the entire application from crashing. However, sometimes you may encounter situations where you need to reset an error boundary and recover from an error state. In this blog post, we will explore how to reset an error boundary in React and regain control over error handling.

Before we dive into resetting error boundaries let us quickly recap what error boundaries are.

What is an Error Boundary?

Error boundaries work like a JavaScript catch {} block, but for components. They are React components that implement the componentDidCatch lifecycle method. By defining this method, you can catch errors that occur within the component's tree and display a fallback UI instead of the error propagating to the entire application.

By default, error boundaries will catch errors in the rendering phase. However, they do not catch errors in event handlers, async code (e.g., setTimeout), or during server-side rendering. When an error is caught by an error boundary, React will call the componentDidCatch method, allowing you to handle the error appropriately.

Resetting an Error Boundary

Resetting an Error Boundary becomes necessary in certain scenarios. For example, imagine a form where user is filling up the data and the form has some validation rules. After the user has entered information if application runs into an error because of an invalid input, it would be beneficial to reset the error boundary after displaying an error message. This allows the user to correct the input and submit the form again without having to refresh the page or start from scratch.

To reset an Error Boundary, you need to manipulate its internal state.



class MyErrorBoundary extends React.Component {
     constructor(props) {
       super(props);
       this.state = { hasError: false };
       this.resetErrorBoundary = this.resetErrorBoundary.bind(this);
     }

     componentDidCatch(error, errorInfo) {
       this.setState({ hasError: true });
     }

     resetErrorBoundary() {
       this.setState({ hasError: false });
     }

     render() {
       if (this.state.hasError) {
         return (
           <div>
             <h1>Something went wrong!</h1>
             <button onClick={this.resetErrorBoundary}>Reset</button>
           </div>
         );
       }

       return this.props.children;
     }
   }

Steps to follow:

Create a state variable within your error boundary component to track the error state. For example, you can define a hasError state variable and initialise it to false.
In the componentDidCatch method of the error boundary component, set the hasError state variable to true. This indicates that an error has occurred.
In render function return an appropriate fallback UI to notify the user of the error only when the state hasError is true.
To reset the state, add a Reset button in the fallback UI.
Implement the reset function like resetErrorBoundary defined in the above mentioned code. This function should set the hasError state variable back to false and perform any necessary cleanup or reset actions.

Update Error boundary from outside

To update the error boundary state from outside, you can make use of a React Context. There can be other ways also.

Here’s an example using React context:

Create an error context to manage the error state and provide a method to update it.



// Error Context Provider
import React, { createContext, useState } from "react";

const ErrorContext = createContext({
  hasError: false,
  updateError: () => {}
});

const ErrorContextProvider = ({ children }) => {
  const [hasError, setHasError] = useState(false);

  const updateError = (value) => {
    setHasError(value);
  };

  return (
    <ErrorContext.Provider value={{ hasError, updateError }}>
      {children}
    </ErrorContext.Provider>
  );
};

export { ErrorContext, ErrorContextProvider };

In the error boundary component, access the error context and update the error state when an error occurs.



// Error Context Provider
import React from "react";
import { ErrorContext } from "./ErrorContextProvider";

class ErrorBoundary extends React.Component {
  static contextType = ErrorContext;

  componentDidCatch(error, errorInfo) {
    this.context.updateError(true);
  }

  render() {
    if (this.context.hasError) {
      return (
        <div>
          <h1>Something went wrong!</h1>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

Wrap your application or the relevant portion of the component tree with the ErrorContextProvider.



import { createRoot } from "react-dom/client";
import { ErrorContextProvider } from "./ErrorContextProvider";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <ErrorContextProvider>
    <App />
  </ErrorContextProvider>
);

From a higher-level component or an event handler outside the error boundary component hierarchy, update the error state by accessing the updateError method from the error context. TextField internally throws an error.



import "./styles.css";
import { TextField } from "./TextField";
import ErrorBoundary from "./ErrorBoundary";
import { useContext } from "react";
import { ErrorContext } from "./ErrorContextProvider";

export default function App() {
  const { updateError } = useContext(ErrorContext);
  const handleReset = () => {
    updateError(false);
  };

  return (
    <div className="App">
      <div>
        <button onClick={handleReset}>Reset boundary</button>
      </div>
      <ErrorBoundary>
        <TextField /> 
      </ErrorBoundary>
    </div>
  );
}

Codesandbox : https://codesandbox.io/s/reset-error-boundary-wk86wj

Hope this helps. Happy coding! :D

Why do we need to lazy load React component ?

Saloni Kathuria — Mon, 20 Jul 2020 10:03:21 +0000

What is Lazy loading ?

You all must be already familiar with the term Lazy Loading, if not, it's a common asynchronous loading pattern where you defer loading a resource until it is actually needed.

In React v16.6, some interesting features were introduced, couple of them being React.lazy() and React.Suspense , to power your application with component or route based code-splitting.

Note: React.lazy and Suspense are not yet available for server-side rendering (v16.13.0). If you want to do code-splitting in a server rendered app, we recommend Loadable Components. It has a nice guide for bundle splitting with server-side rendering.

Why is it needed?

JavaScript has evolved tremendously over the last few years. With Webpack, Gulp, Grunt and many more bundlers, you can achieve code-splitting by breaking your one large bundle into different bundles (or chunks) and loading them individually, instead of all at once, to reduce the impact on page load time.

With time, your application would grow and it could lead to increase in bundle size and could in turn impact page load time.

Let's jump into the code to understand this.

Suppose, you have an application with Home component, which has a dropdown menu on header. The UserMenu renders when user clicks on the profile icon.
In the scenario below, during the initial load, the UserMenu component will be part of the bundle.

import React from 'react';
import UserMenu from '../Menu/UserMenu';

class Home extends React.Component {
  /* some logic */
  render() {
     { isUserMenuOpen && <UserMenu /> }
     /* do something else */
  }

}

But you must be thinking, what issues this might create? This seems be good so far! No?

It does seem good for smaller applications. But when the application scales and feature set increases; with its implementation the bundle size increases as well, eventually increasing the page load time. Furthermore, users with low end devices and slower network adds on to the problem.

This is where React.Lazy and Suspense come to the rescue!

Let's fix the current scenario by using this amazing feature. Create a file called LazyUserMenu.jsx

import React, { Suspense } from 'react';

const UserMenu = React.lazy(() => import('../Menu/UserMenu'));

const LazyUserMenu = props => {
  <Suspense fallback={ <h1> loading ... </h1> }>
     <UserMenu { ...props } />
  </Suspense>

}

export default LazyUserMenu;

We have created a Lazy async UserMenu component. And while the component is getting fetched, suspense helps you add a loading state to your view. Now, let's use LazyUserMenu component instead of the other one.

import React from 'react';
import LazyUserMenu from '../Menu/LazyUserMenu';

class Home extends React.Component {
  /* some logic */
  render() {
     { isUserMenuOpen && <LazyUserMenu /> }
     /* do something else */
  }

}

Voila!! This is it. This way the LazyUserMenu component will only be fetched when the isUserMenuOpen state is set i.e., only when the component is required.

To check how does it work ?

Go to Network tab in developer tools. Click on user profile icon to open the menu.

You will see the component getting downloaded as a separate bundle.

Benefits of using these components:

Trimmed initial bundle size.
Better initial page load time.
Better performance on low end devices or devices with weaker network strength.

Conclusion

Lazy and suspense feature has great potential benefits with large feature-rich applications. Whenever you add a new feature to your project, try to evaluate its performance impact on the bundle. If you think the feature could be used on demand or may never be used in the user journey then Lazy and Suspense is the way to go!

Happy Coding!