[draft] Split CmsQueryRepeater into CmsQuery and CmsQueryRepeater

[zvictor]

The goal is to be able to run queries against the CMS reusing the currently developed code.

AFAIK there is only CmsQueryRepeater providing a convenient way to run such queries in React, but it has the limitation that it forces the design of the application to follow a separation of rows. Sometimes we want to run some aggregation on that data, or something else that does not expect to present one element per row.

This PR attempts to make the following code possible:

import { CmsQuery } from '@plasmicpkgs/plasmic-cms'

interface InboxProps {
  userId: string
}

const Notifications = ({ userId }: InboxProps) => (
  <CmsQuery table={'messages' as const} filterField={'user' as const} filterValue={userId}>
    {(rows) => <div>{rows.length} messages in your inbox</div>}
  </CmsQuery>
)

export default Notifications

[vercel[bot]]

@zvictor is attempting to deploy a commit to the Plasmic Team on Vercel.

A member of the Team first needs to authorize it.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
contenful-example	✅ Ready (Inspect)	Visit Preview	Dec 9, 2022 at 4:24PM (UTC)
dynamic-multistep-forms	✅ Ready (Inspect)	Visit Preview	Dec 9, 2022 at 4:24PM (UTC)
plasmic	✅ Ready (Inspect)	Visit Preview	Dec 9, 2022 at 4:24PM (UTC)
plasmic-blog-example	❌ Failed (Inspect)		Dec 9, 2022 at 4:24PM (UTC)
plasmic-blog-starter	❌ Failed (Inspect)		Dec 9, 2022 at 4:24PM (UTC)
vercel-workflow	✅ Ready (Inspect)	Visit Preview	Dec 9, 2022 at 4:24PM (UTC)

[zvictor]

My understanding of the code is that it should not break anything. However, when I test it, all calls to CmsQueryRepeater stop working.

I am not sure if it's a problem with my code or with the way I am testing it. None of the CMS data appears in the $ctx with my code.

[yang]

Thank you @zvictor!

We are trying to avoid making dramatic restructuring of the CMS components since all current projects depend on the current components and their interfaces (at least not without migrations).

However, your change prompted us to discuss and introduce an alternative approach to accomplish what you are mentioning as follows, using a noAutoRepeat prop—this would make the CMS components more consistent with our other data source integration components:

<CmsQueryRepeater ... noAutoRepeat>
  {/* Now you can do whatever you want from here */}
  <DataCtxReader>{ctx => ...ctx.plasmicCmsProductsCollection}</DataCtxReader>
</CmsQueryRepeater>

(You may also be interested in the noLayout prop if you want it to be a pure data provider with no HTML elements.)

cc @tmadeira for visibility!

[IcaroG]

Implemented in No auto-repeat and No layout.