Do we still need to use usePlasmicQueryData in app dir?

[efficient_pelican]

I’m loving the Next 13 appdir support

Are we still required to use usePlasmicQueryData when data fetching in plasmic components? or is there some special way to async/await in server components?

[jason]

Hey @efficient_pelican, you don’t need to use usePlasmicQueryData in app dir. Instead, you can use async/await in server components like normal apps.

[efficient_pelican]

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead. i’m getting this error when I make it async

docs mention something like this here, but I’m not sure where to put the @ts-expect-error - it doesn’t like it in the component file (guessing it goes wherever the component is used - but that’s plasmic)

[efficient_pelican]

my component

[efficient_pelican]

oh perhaps I can’t register an async plasmic component?

[efficient_pelican]

i tried a wrapper which removed all warnings - but same error with rendering a promise

[jason]

Hi @efficient_pelican, sorry I misread your original question…

Are we still required to use usePlasmicQueryData when data fetching in plasmic components? or is there some special way to async/await in server components?
I thought you were asking if you need to use usePlasmicQueryData to fetch data that you then pass into Plasmic components, so I suggested using async/await.

But for writing a Plasmic code component, Code components cannot be server components, so you should still use usePlasmicQueryData (or your own data fetching library). Note that all transitive dependencies of a code component also cannot be a server component, so the wrapper won’t help.

So sorry for the confusion

[efficient_pelican]

ok ok thank you

[efficient_pelican]

can descendants of a code component be server components?

Like my Product Page I wrap a code component around (product fetcher) - am i getting any benefit by this?

[jason]

No, descendants may not be server components, since Plasmic components must work in a browser.

[efficient_pelican]

though, are the child components still compressed on server if they’re server compatible? bundle sizes are tiny after using appdir

[jason]

With server components, they are completely omitted from the bundle.

Plasmic components only work on the client, so you can’t omit them, but they can be minified based on your app host.

[efficient_pelican]

if I can’t do async/await, how do I use extractPlasmicQueryData with appdir? It’s saying my whole [[…catchall]]/page.tsx needs to be use client which wouldn’t be ideal

[efficient_pelican]

export default function HydrogenCollection({
  handle,
  children,
  setControlContextData,
}: HydrogenCollectionProps) {
  const { data: collection } = usePlasmicQueryData<Collection>(
    handle,
    async () => {
      return getShopifyData<HydrogenCollectionResponse>(QUERY, {
        handle,
      }).then(r => r.data?.collection)
    }
  )

  // Only run in plasmic studio for product dropdown
  const allCollections = useSelector("allCollections")
  setControlContextData?.({ allCollections })

  return (
    <DataProvider name="collection" data={collection}>
      {children}
    </DataProvider>
  )
}

Here’s an example of my data fetching component

[efficient_pelican]

i realized all my components were doing client side fetching and realized they weren’t in the query cache. Tried adding extractPlasmicQueryData but that needs context it seems

[jason]

Hi, I was actually just discussing this issue with another customer… unfortunately the answer is it doesn’t work right now–extractPlasmicQueryData doesn’t work from a server component, so you can’t prefetch code components using usePlasmicQuery.

I’m looking into solutions for how to make this work. In the mean time, you’ll need to use a pages for this use case

[efficient_pelican]

if i set the catchall page to “use client” is that essentially the same as pages dir?

[efficient_pelican]

we just spend a couple weeks refactoring codebase

[jason]

You can’t set a catchall page in app/ to “use client”–you’d need to move it to pages/ instead.

If you’re free, maybe we can hop on a call and discuss some options?

[efficient_pelican]

i’d love that