Update or expose maxDepth for telejson

[ArrayKnight]

Is your feature request related to a problem? Please describe.
I'm working on building an addon and when trying to pass graphql-tag DocumentNode(s) through parameters, data is lost (stringified) at a certain depth and queries are rendered useless.

Describe the solution you'd like
I'd like to be able to set the max depth (via register config?)

Describe alternatives you've considered
I also tried to avoid using the useParameter hook and to pass the parameter through the channel from decorator to panel. But it seems to have the same issue since all data in coming from the same store.

An alternative would be to find a solution that has an extreme or "infinite" max depth

Are you able to assist bring the feature to reality?
Not right now

[ArrayKnight]

I initially thought this was part of:
https://github.com/storybookjs/storybook/blob/next/lib/api/src/lib/store-setup.ts#L8

But now I think it's actually:
https://github.com/storybookjs/storybook/blob/next/lib/channel-postmessage/src/index.ts#L78

[shilman]

cc @ndelangen @tmeasday

[tmeasday]

Can you tell us a bit more about the data you are sending over @ArrayKnight?

[ndelangen]

This is already possible:

storybook/addons/actions/src/preview/action.ts

Lines 13 to 32 in 2046e90

	const handler = function actionHandler(...args: any[]) {
	const channel = addons.getChannel();
	const id = uuid();
	const minDepth = 5; // anything less is really just storybook internals
	const actionDisplayToEmit: ActionDisplay = {
	id,
	count: 0,
	data: { name, args },
	options: {
	...actionOptions,
	depth: minDepth + (actionOptions.depth || 3),
	allowFunction: actionOptions.allowFunction || false,
	},
	};
	channel.emit(EVENT_ID, actionDisplayToEmit);
	};
	return handler;
	}

storybook/lib/channels/src/index.ts

Lines 71 to 79 in 341fc2d

	if (args.length >= 1 && args[0] && args[0].options) {
	options = args[0].options;
	}
	const handler = () => {
	if (this.transport) {
	this.transport.send(event, options);
	}
	this.handleEvent(event, true);

storybook/lib/channel-postmessage/src/index.ts

Lines 62 to 71 in 7e18c2e

	if (options && typeof options.allowFunction === 'boolean') {
	allowFunction = options.allowFunction;
	}
	if (options && Number.isInteger(options.depth)) {
	depth = options.depth;
	}
	if (options && typeof options.target === 'string') {
	target = options.target;
	}

[ArrayKnight]

@tmeasday I'm sending through a DocumentNode which is created with a gql tag for a GraphQL query.

@ndelangen I'll have to give this a closer look. Is this documented anywhere?

[ArrayKnight]

@ndelangen I'm seeing how you'd be able to set the depth manually for each emit but this doesn't appear to be configurable for the issue I'm having.

In a story:

import { gql } from '@apollo/client'

export default {
    ...,
    parameters: {
        myAddon: {
            foo: gql`
                {
                    artworks {
                        artist {
                            name
                            location
                        }
                        imageUrl
                        title
                    }
                }
            `
        }
    }
}

In my decorator:

export const withMyAddon: (
    options: HeadlessOptions,
) => DecoratorFunction<ReactElement<unknown>> = makeDecorator({
    name: DECORATOR_NAME,
    parameterName: PARAM_KEY,
    skipIfNoParametersOrOptions: true,
    wrapper: (storyFn, context, { options, parameters }) => {
        const channel = addons.getChannel()

        console.log(parameters) // Correctly logs full parameters without a max depth

        return (
            <Decorator
                channel={channel}
                context={context}
                options={options}
                parameters={parameters}
                storyFn={storyFn}
            />
        )
    },
})

In my panel:

export const Panel = memo(({ active }: Props): ReactElement | null => {
    const parameters = useParameter<MyAddonParameters>(PARAM_KEY, {})

    console.log(parameters) // Max depth has been applied and data is forever lost

    return <></>
})

I've been unable to find a way to configure the max depth so that the parameters maintains all data.

Now that I know about manually applying options to each message, I could in theory pass the parameters through the channel from the decorator to the panel, but that doesn't feel like what I'm supposed to do.

Also, it would be really helpful if the ...args: any somehow included the typing for an optional options object.

[ArrayKnight]

@tmeasday To help clarify why I couldn't just send the query as a string over, the gql tag creates a validated editing experience that works along with a *.graphql schema file.

[ndelangen]

I see, the depth in parameters isn't enough for your usecase.

[tmeasday]

@ArrayKnight you could stringify the DocumentNode yourself though and pass it as a string?

I'm sure it would be better to be able to control telejson, but essentially that'd be the same thing, no?

[ArrayKnight]

That's what I'm having to do currently. But because I'm running into this issue as part of a Storybook addon, it means anybody that wants to use the addon has to do this extra step. My ideal would be to have the addon control telejson so that the end user implementation is as simple as possible.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!