#Loader and render function - ✅

9 messages · Page 1 of 1 (latest)

fading flicker
#

Hey there everyone, I'm pretty new to storybook and tried to look for answer on docs, on the web and even youtube but can"t find the exact answer.
I want to put data on my stories that comes from an API.
Following the doc I tried to get a loader and get the result in a render function as this code :

import type { Meta, StoryObj } from "@storybook/react";
import DesignerCard from "./DesignerCard";
import { findDesignerBySlug } from "@/utils/lib/directus/designer";
import { IDesigner } from "@/utils/interfaces/IDesigner";

const meta: Meta<typeof DesignerCard> = {
  title: "Design System/Molecules/DesignerCard",
  component: DesignerCard,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
};

export default meta;
type Story = StoryObj<typeof DesignerCard>;

export const Primary: StoryObj<{ designer: IDesigner }> = {
  loaders: [
    async () => ({
      designer: await findDesignerBySlug("nantes"),
    }),
  ],
  render: (args, { loaded: designer }) => <DesignerCard {...args} designer={designer} />,
};

try even a global loader in the preview file :

import type { Preview } from "@storybook/react";
import "../app/reset.scss";
import "../app/global.scss";
import "../app/swiper.scss";
import "../app/leaflet.scss";
import "../app/directus.scss";
import { findDesignerBySlug } from "../utils/lib/directus/designer";

const preview: Preview = {
  loaders: [
    async () => ({
      designer: await await findDesignerBySlug("nantes"),
    }),
  ],
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

export default preview;```

So my question is : What am I doing wrong? 😅 Thank you for your time, I appreciate it.
heavy yacht
#

Hi, and welcome! 👋

In this code here:

export const Primary: StoryObj<{ designer: IDesigner }> = {
  loaders: [
    async () => ({
      designer: await findDesignerBySlug("nantes"),
    }),
  ],
  render: (args, { loaded: designer }) => <DesignerCard {...args} designer={designer} />,
};

Your loader function is returning an object with a designer property.

But in your render function, you reassign the loaded object (which would have the shape of the loader function's returned object) to the designer variable. So you end up passing the whole wrapping object, instead of just the designer property.

Does this work?

export const Primary: StoryObj<{ designer: IDesigner }> = {
  loaders: [
    async () => ({
      designer: await findDesignerBySlug("nantes"),
    }),
  ],
  render: (args, { loaded: { designer } }) => <DesignerCard {...args} designer={designer} />,
};
fading flicker
#

Thank you for the fast answer.

I have ts errors :

type DesignerCard = /unresolved/ any```

Impossible to assign type '{ loaders: (() => Promise<{ designer: IDesigner | null; }>)[]; render: (args: { designer: IDesigner; }, { loaded: { designer } }: StoryContext<ReactRenderer, { designer: IDesigner; }>) => DesignerCard; designer: boolean; }' to type 'StoryAnnotations<ReactRenderer, { designer: IDesigner; }>'.
An object literal can only specify known properties, and 'designer' doesn't exist in the type 'StoryAnnotations<ReactRenderer, { designer: IDesigner; }>'.ts(2322)
(property) designer: any```

The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum.ts(2362) type.
There is no value in the scope of the shortened 'designer' property. You must declare one, or provide an initializer.ts(18004)
(property) designer: any```

```Expected expression.ts(1109)```
#

My function findDesignerBySlug is a function that use Directus sdk

# 
export const findDesignerBySlug = async (slug: string): Promise<IDesigner | null> => {
  const response = await directus.request(
    readItems("designer", {
      filter: {
        slug: {
          _eq: slug,
        },
      },
      limit: 1,
    })
  );

  if (response && response.length > 0) {
    return response[0] as IDesigner;
  }

  return null;
};```
heavy yacht
#

Those errors look like you currently have a DesignerCard.stories.ts file, which should be renamed to DesignerCard.stories.tsx, due to the use of JSX.

fading flicker
#

🤦🏻‍♂️ what dumb I Am... Of course. Now I just have to find the correct way to get the data. Thank you very much

#

Loader and render function ✅

#

Loader and render function - ✅