Using @plasmicapp/query example from docs is throwing an error

Issues
1

I’m trying to follow this example to fetch data statically by using the @plasmicapp/query library. However, when the page component renders, the exception below is thrown. Any thoughts?

image.png
image.png1472×1550 228 KB

2

Page component:

export default function PlasmicLoaderPage(props) {
  const { plasmicData, queryCache } = props;
  if (!plasmicData || plasmicData.entryCompMetas.length === 0) {
    return <Error statusCode={404} />;
  }
  return (
    <PlasmicRootProvider
      prefetchedData={plasmicData}
      prefetchedQueryData={queryCache}
    >
      <PlasmicComponent component={plasmicData.entryCompMetas[0].name} />
    </PlasmicRootProvider>
  );
}
3

console.log(plasmicData)

{
  entryCompMetas: [
    {
      id: 'UcxPKQtVoz',
      usedComponents: [Array],
      projectId: 'bYayJtHmmiQfwgPMNLQs6b',
      name: 'Homepage',
      renderFile: 'render__UcxPKQtVoz.js',
      skeletonFile: 'comp__UcxPKQtVoz.js',
      cssFile: 'css__UcxPKQtVoz.css',
      path: '/',
      isPage: true,
      entry: 'render__UcxPKQtVoz.js',
      isCode: false,
      pageMetadata: [Object]
    }
  ],
  bundle: {
    modules: { browser: [Array], server: [] },
    external: [ 'next/head', 'react', 'react-dom' ],
    components: [ [Object], [Object] ],
    globalGroups: [ [Object] ],
    projects: [ [Object] ]
  },
  remoteFontUrls: [
    '<https://fonts.googleapis.com/css2?family=Inter%3Aital%2Cwght%400%2C400%3B0%2C600%3B0%2C700%3B0%2C900&family=Inconsolata%3Aital%2Cwght%400%2C400%3B0%2C600%3B0%2C700%3B0%2C900&display=swap>'
  ]
}
4

console.log(queryCache)

{
  '/hello': [
    {
      availableForSale: true,
      createdAt: 1643919826,
      nacelleEntryId: 'aWQ6Ly9TSE9QSUZZL2dldHRlY2gtaWUvZGVmYXVsdC9QUk9EVUNULzc1ODA4Njc3NTYyOTAvZW4tVVM=',
      sourceEntryId: '7580867756290',
      indexedAt: 1644267804,
      metafields: [Array],
      productType: '',
      tags: [Array],
      updatedAt: 1643943684,
      vendor: 'teenage engineering',
      variants: [Array],
      content: [Object]
    },
    {
      availableForSale: true,
      createdAt: 1643921141,
      nacelleEntryId: 'aWQ6Ly9TSE9QSUZZL2dldHRlY2gtaWUvZGVmYXVsdC9QUk9EVUNULzc1ODA4ODI2MzI5NjIvZW4tVVM=',
      sourceEntryId: '7580882632962',
      indexedAt: 1644267807,
      metafields: [Array],
      productType: 'Speakers',
      tags: [Array],
      updatedAt: 1643951756,
      vendor: 'teenage engineering',
      variants: [Array],
      content: [Object]
    },
    {
      availableForSale: true,
      createdAt: 1643921281,
      nacelleEntryId: 'aWQ6Ly9TSE9QSUZZL2dldHRlY2gtaWUvZGVmYXVsdC9QUk9EVUNULzc1ODA4ODQ4OTM5NTQvZW4tVVM=',
      sourceEntryId: '7580884893954',
      indexedAt: 1644267804,
      metafields: [Array],
      productType: '',
      tags: [Array],
      updatedAt: 1643943685,
      vendor: 'teenage engineering',
      variants: [Array],
      content: [Object]
    },
    {
      availableForSale: true,
      createdAt: 1643939746,
      nacelleEntryId: 'aWQ6Ly9TSE9QSUZZL2dldHRlY2gtaWUvZGVmYXVsdC9QUk9EVUNULzc1ODExNTk1NTUzMzAvZW4tVVM=',
      sourceEntryId: '7581159555330',
      indexedAt: 1644267804,
      metafields: [Array],
      productType: '',
      tags: [Array],
      updatedAt: 1643943685,
      vendor: 'Test Store',
      variants: [Array],
      content: [Object]
    },
    {
      availableForSale: true,
      createdAt: 1643939806,
      nacelleEntryId: 'aWQ6Ly9TSE9QSUZZL2dldHRlY2gtaWUvZGVmYXVsdC9QUk9EVUNULzc1ODExNTk5NDg1NDYvZW4tVVM=',
      sourceEntryId: '7581159948546',
      indexedAt: 1644267804,
      metafields: [Array],
      productType: '',
      tags: [Array],
      updatedAt: 1643943685,
      vendor: 'Test Store',
      variants: [Array],
      content: [Object]
    }
  ]
}
5

Fixed by adding the loader={PLASMIC} prop to the PlasmicRootProvider component. That is not in the documentation, so I’m sure if that was expected.

6

oops! will fix the documentation :grimacing: