Socket
Socket
Sign inDemoInstall

storybook-addon-apollo-client

Package Overview
Dependencies
Maintainers
1
Versions
33
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

storybook-addon-apollo-client

Use Apollo Client in your Storybook stories.


Version published
Weekly downloads
80K
decreased by-2.97%
Maintainers
1
Weekly downloads
 
Created
Source

Storybook Addon Apollo Client

Use Apollo Client in your Storybook stories.

Versions

  • If you're using Apollo Client 2.x and Storybook 5.x use version 1.x
  • If you're using Apollo Client 2.x or 3.x and Storybook 6.x use version 4.x
  • If you're using Apollo Client 2.x or 3.x and Storybook 7.x use version 5.x
  • If you're using Apollo Client 2.x or 3.x and Storybook 8.x use version 7.x

Known issues

due to how MockedProvider works in Apollo, you will have to hard refresh when visiting sub stories (visiting stories that exist in the same file) to get the expected results, please upvote my comment here to see if we can get this fixed: https://github.com/apollographql/apollo-client/issues/9738#issuecomment-1606316338

Install

pnpm

pnpm add -D storybook-addon-apollo-client

yarn

yarn add -D storybook-addon-apollo-client

npm

npm install -D storybook-addon-apollo-client

Add the addon to your configuration in .storybook/main.ts

export default {
  ...config,
  addons: [
    ...yourAddons
    "storybook-addon-apollo-client",
  ],
};

7.0 Features

  • removed globalMocks key to favor composition

Migrate from 5.x+ to 7.x

Example of < 7.x

preview.ts

import { MockedProvider } from "@apollo/client/testing"; // Use for Apollo Version 3+
// import { MockedProvider } from "@apollo/react-testing"; // Use for Apollo Version < 3

export const preview = {
  parameters: {
    apolloClient: {
      MockedProvider,
      globalMocks: [
        // whatever mocks you want here
      ],
    },
  },
};
Example of 7.x

preview.ts

// Whatever you want here, but not Apollo Client related

component.stories.ts

import type { Meta } from "@storybook/react";
import { globalMocks } from "./globalMocks";
import { otherMocks } from "./otherMocks";
import { YourComponent, YOUR_QUERY } from "./component";

export const meta: Meta<typeof DisplayLocation> = {
  component: YourComponent,
  parameters: {
    apolloClient: {
      mocks: [
        ...globalMocks,
        ...otherMocks,
        {
          request: {
            query: YOUR_QUERY,
          },
          result: {
            data: {
              // your data here
            },
          },
        },
      ],
    },
  },
};

Upgrading from a previous version below 6.x

In previous versions, we had a decorator called withApolloClient this is no longer nesscessary. If you're upgrading from this API here are the following changes that you'll need to make:

  1. remove all code referencing the deprecated withApolloClient decorator.
  2. follow install instructions

Writing your stories with queries

import DashboardPage, { DashboardPageQuery } from ".";

export default {
  title: "My Story",
};

export const Example = () => <DashboardPage />;

Example.parameters = {
  apolloClient: {
    mocks: [
      {
        request: {
          query: DashboardPageQuery,
        },
        result: {
          data: {
            viewer: null,
          },
        },
      },
    ],
  },
};

Read more about the options available for MockedProvider at https://www.apollographql.com/docs/react/development-testing/testing

Usage

In Storybook, click "Show Addons" and navigate to the "Apollo Client" tab.

Addon UI Preview

Example App

To see real world usage of how to use this addon, check out the example app:

https://github.com/lifeiscontent/realworld

Loading State

You can use the delay parameter to simulate loading state.

import DashboardPage, { DashboardPageQuery } from ".";

export default {
  title: "My Story",
};

export const Example = () => <DashboardPage />;

Example.parameters = {
  apolloClient: {
    mocks: [
      {
        // Use `delay` parameter to increase loading time
        delay: 1000,
        request: {
          query: DashboardPageQuery,
        },
        result: {
          data: {},
        },
      },
    ],
  },
};

Error State

You can use the error parameter to create error state.

import DashboardPage, { DashboardPageQuery } from ".";

export default {
  title: "My Story",
};

export const Example = () => <DashboardPage />;

Example.parameters = {
  apolloClient: {
    mocks: [
      {
        request: {
          query: DashboardPageQuery,
        },
        error: new ApolloError("This is a mock network error"),
      },
    ],
  },
};

Keywords

FAQs

Package last updated on 26 Apr 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc