PB Elements - Data Loaders

[adrians5j]

Changes

This PR introduces the useLoader React hook, which makes it easier to load data within page elements. For example, the existing SpaceX page element example can be now rewritten in the following way.

Before:

export const SpaceX = createRenderer(() => {
  // Let's retrieve the variables that were chosen by
  // the user upon dropping the page element onto the page.
  const { getElement } = useRenderer();
  const element = getElement<SpaceXElementData>();
  const { limit, offset, type } = element.data.variables;

  const [data, setData] = useState<Spacecraft[]>([]);

  // This is where we fetch the data and store it into component's state.
  useEffect(() => {
    request(GQL_API_URL, QUERIES[type], {
      limit: parseInt(limit),
      offset: parseInt(offset)
    }).then(({ data }) => setData(data));
  }, [limit, offset, type]);

  if (!data.length) {
    return <>Nothing to show.</>;
  }

  // If the data has been retrieved, we render it via a simple unordered list.
  return (
    <ul>
        {/* Code removed for brevity. */}
    </ul>
  );
});

After (with the useLoader hook):

// The renderer React component.
export const SpaceX = createRenderer(() => {
    // Let's retrieve the variables that were chosen by
    // the user upon dropping the page element onto the page.
    const { getElement } = useRenderer();
    const element = getElement<SpaceXElementData>();
    const { limit, offset, type } = element.data.variables;

    // This is where we fetch the data and store it into component's state.
    const { data, loading } = useLoader<Spacecraft[]>(() => {
        return request(GQL_API_URL, QUERIES[type], {
            limit: parseInt(limit),
            offset: parseInt(offset)
        }).then(res => res.data);
    });

    if (loading) {
        return <>Loading...</>;
    }

    if (!data?.length) {
        return <>Nothing to show.</>;
    }

    // If the data has been retrieved, we render it via a simple unordered list.
    return (
        <ul>
           {/* Code removed for brevity. */}
        </ul>
    );
});

Why is this important?

From the above example, we can see that, with the useLoader React hook, our code looks a bit cleaner.

Nice to have, but still, this is not the main reason we're introducing this feature.

The main reason we're introducing this feature is data caching which improves page performance and user experience.

What useLoader does behind the scenes is it enables caching of the data that has been returned from the provided data fetcher function (in the above example, the function that's pinging the SpaceX API).

This caching is happening during page prerendering. Once the data has been returned, it's basically injected into the body of the page. For example:

With the data being injected into the page and also included in the final page prerendering snapshot, it can then be accessed during an actual page visit. Once the page is visited, upon rendering the page element, the useLoader will first check if the data is already in the page HTML. If so, it'll use it and no remote API calls will be issued. Meaning immediate content in the page element, which means better page performance and better UX.

Extra Changes

• AddButtonLinkComponent decorator removed
• "ConditionalCheckFailedException: The conditional request failed";

How Has This Been Tested?

A Jest test for parsing data cached in HTML during the prerendering process.

Manual testing on the frontend side.

Documentation

Changelog. Update existing docs.