I m trying to make a component library based on lt Execute g GoodData #gooddata-ui

I’m trying to make a component library based on &l...

Evan Shen

05/31/2022, 2:41 AM

I’m trying to make a component library based on <Execute> that I can import into other projects we have, but I’m running into a problem where the

useBackendStrict()

hook doesn’t work when used in one of these imported components, instead throwing an error: “IAnalyticalBackend must be defined. Either pass it as a parameter or make sure there is a BackendProvider up the component tree.” I don’t get this error when the code for these components exist within the project itself instead of in a separate library, and the place I’m putting them is within a `BackendProvider`’s scope. Is there a React Context consumer or something like that for IAnalyticalBackend that I can use? I’m trying to keep the props as simple and “Gooddata UI SDK”-like as possible and would rather avoid having to pass backend and workspace through props.

Evan Shen

05/31/2022, 2:44 AM

image.png

Evan Shen

05/31/2022, 5:37 PM

I found

withBackend

and tried to wrap my export in that

Copy code

export default withBackend(TimelineChart);

but am still getting this error

Evan Shen

05/31/2022, 5:48 PM

actually even passing it as a prop isn’t working for me

Evan Shen

05/31/2022, 5:51 PM

Copy code

// App code consuming the component library, <BackendProvider> exists higher up the hierarchy.
const Sandbox = () => {
    const backend = useBackendStrict();
    const workspace = useWorkspaceStrict();
    return <div>
        <div style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly'}}>
            <div style={{height: '450px', width: '600px'}}><InsightView insight="aavJTU0ek5qW" /></div>
            <StackedColumnChart insightId="aavJTU0ek5qW" backend={backend} workspace={workspace} />
        </div>
        <br/>
    </div>;
};

Copy code

// Component that needs the backend
const StackedColumnChart = ({
    backend,
    workspace,
    insightId,
    filters,
    config,
}: IStackedColumnChartProps) => {
    const gdAnalyticalWorkspace = backend.workspace(workspace);
...
};

export default StackedColumnChart

Matyáš Kandl

06/01/2022, 12:52 PM

Hello @Evan Shen maybe there is some disconnection between your component library and the application code? Do you have

@gooddata/*

and

react

packages as peerDependencies in

package.json

in the library code? Otherwise, you may have multiple react / gooddata packages (in library vs application) and this can cause that React contexts are not properly propagated down in the component tree.

Evan Shen

06/01/2022, 2:15 PM

ah, I didn’t have the gooddata packages as a peer dependency. that worked, thanks!

🙌 1

✅ 1

Open in Slack

Previous Next