Passing dynamic data to created layout.

[taine-zuse]

Hi :)

Would it be possible to pass dynamic data to the final created layout?

In my scenario I'm creating a report builder whereby a super user can design his/her own report relating to a sub user activities. This report will be dynamic and the only values I need to pass it would be the sub users ID as well as a date for the data to be generated for that will be displayed on the report. I understand to display the form I just wrap the outputed json to the Editor with edit disabled however I can seem to see how I could pass the two arguments all my components require to display the data.

[taine-zuse]

One possible way I can think of is creating a hidden node with a properties that can hold the two values I want, that way when I render the report in non edit way and desterilize the json I know the keys that I can then inject the data, then render the editor. I will try this and update the thread with the results

[ankri]

I would suggest putting the data into a Context.

And in your component you do:

const data = useData();
// data is either null or the data you need
// data is always null in editor mode (<Editor enabled />) 
// data can be null in (<Editor enabled={false} />) or the data you need

Pseudo code for useData and the Provider

import * as React from 'react';
import { useEditor } from '@craftjs/core';
// or react-query, your own fetch, etc.
import useSWR from 'swr';

const DataContext = React.createContext(null);

// pseudo code
export const useData = () => {
  const { enabled } = useEditor((state) => ({ enabled: state.options.enabled }));
  const data = React.useContext(DataContext);

  if (!enabled) {
    return null;
  } else {
    return data;
  }
};


// retrieve userId from somewhere
export const DataContextProvider = ({ children, userId }) => {
  const { enabled } = useEditor((state) => ({ enabled: state.options.enabled }));
  // provide buildURL
  const url = userId ? buildUrl(userId) : undefined;
  const { data } = useSWR(url);

  if (enabled) {
    return <DataContext.Provider value={null}>{children}</DataContext.Provider>;
  } else {
   // while loading we render nothing, alternatively you can render a loading animation
   // or add an loading flag to your context to be able to render the components which render themselves in in a loading state
    if (data == null) {
      return null;
    } else {
      return <DataContext.Provider value={data}>{children}</DataContext.Provider>;
    }
  }
};

[ankri]

I figured that the code needs some more explanation:

You wrap your your Frame inside the Editor in the DataContextProvider and pass the userId and date. The Provider will load the data and make it available for your components. The components now access the data from the Provider. In my implementation the Provider only loads the data when the Editor is disabled.

Alternatively you can always load the data and make it available on the provider.

---

The idea behind that solution is that the provider loads all the data into a global state and the components pick the data they need from that global state.

The drawback of that solution is, that you will almost always overfetch from the server. But this could be solved with GraphQL and sth like relay down the line.

[taine-zuse]

Thank you for the suggestion I will give it a go and get back to you 🥇