[SOLVED]: How to prefetch data with the GraphQL DataFetcher at build time? (Next.js)

[john_zambrano]

I noticed a change in behaviour with the built-in GraphQL DataFetcher component in plasmic studio. In version @plasmicapp/loader-nextjs": "^1.0.253 data is fetched at build time only (i.e. not client-side).

Where as in the current latest versions the requests are made dynamically on the client:
@plasmicapp/host": "^1.0.145
@plasmicapp/loader-nextjs": "^1.0.283

Is this the intended behaviour? If so, is it possible to configure the Graphql DataFetcher component to prefetch the data at build time, and cache the response indefinitely so it is never fetched again on the client? (I’m going for the Static Site Generation approach here as the content doesn’t change often).

[john_zambrano]

I followed @chungwu’s advice about logging the output of extractPlasmicQueryData(), which helped.

Are Plasmic sites truly using static site generation?

Hey guys, I’m a bit confused about static site generation… For context: Our site uses the headless API (no codegen), it’s a next.js site on netlify. Are the pages automatically rendered statically by default? Or is it server-side rendering? Yesterday the page I’m building was not able to load external APIs due to a CORS-error that happened because of a server misconfiguration. Instantly the whole page has shown “could not fetch data”. This should not happen with static pages or am i missing …

I found a few errors on my end that was happening within a custom code component that I fixed. This was causing pre-rendering to throw. However there is still one last error left, that I’m having difficulty debugging:
PLASMIC: Encountered error when pre-rendering K: Error: Forbidden

Looks like a network request error. Not sure what component K refers to, though. Strange enough, it’s only happening in a production environment when I deploy to netlify. Also I don’t see any HTTP errors being logged on my CMS backend.

So the issue, most likely, isn’t what I thought it was initially, but still not sure where to look. Any help would be much appreciated

Here is a snippet of my build logs on Netlify:

8:07:24 PM: Plasmic: doing a fresh fetch...
8:07:24 PM: Plasmic: fetched designs for "react-awesome-reveal" (58GpZjZCWTaJ8AUhpCwt2K@3.16.0), "plasmic-nav" (7nJ7UcFmq9UzB6eXfC5z4a@0.17.0), "plasmic-embed-css" (8PtdGodUbexNYgkuyBUcWu@3.15.0), "plasmic-query" (YUiM7yqBWAqsh8KSnrdj7@0.19.0), "plasmic-basic-components" (caTPwKxj5ZrD9LQ7DMdK4Z@3.19.0), "plasmic-tabs" (gLnoj82AzKVVT7qXiqAbHD@1.14.0), "react-slick" (r3ASNrnyvLLLAtDvzUioQ@3.15.0), "Smile Labs Sydney" (vgZhNEdTib9hBhi99Axmfh@19.1.0)
8:07:24 PM: PLASMIC: Encountered error when pre-rendering K: Error: Forbidden
8:07:24 PM: plasmicData {
8:07:24 PM:   entryCompMetas: [
8:07:24 PM:     {
8:07:24 PM:       id: 'fvDKeCBsxT',
8:07:24 PM:       displayName: 'Homepage',
8:07:24 PM:       usedComponents: [Array],
8:07:24 PM:       projectId: 'vgZhNEdTib9hBhi99Axmfh',
8:07:24 PM:       name: 'Homepage',
8:07:24 PM:       renderFile: 'render__fvDKeCBsxT.js',
8:07:24 PM:       skeletonFile: 'comp__fvDKeCBsxT.js',
8:07:24 PM:       cssFile: 'css__fvDKeCBsxT.css',
8:07:24 PM:       path: '/',
8:07:24 PM:       isPage: true,
8:07:24 PM:       entry: 'render__fvDKeCBsxT.js',
8:07:24 PM:       isCode: false,
8:07:24 PM:       isGlobalContextProvider: false,
8:07:24 PM:       pageMetadata: [Object],
8:07:24 PM:       metadata: {},
8:07:24 PM:       params: {}
8:07:24 PM:     }
8:07:24 PM:   ],
8:07:24 PM:   bundle: {
8:07:24 PM:     modules: { browser: [Array], server: [] },
8:07:24 PM:     external: [],
8:07:24 PM:     components: [
8:07:24 PM:       [Object], [Object],
8:07:24 PM:       [Object], [Object],
8:07:24 PM:       [Object], [Object],
8:07:24 PM:       [Object], [Object],
8:07:24 PM:       [Object], [Object],
8:07:24 PM:       [Object], [Object],
8:07:24 PM:       [Object], [Object],
8:07:24 PM:       [Object], [Object]
8:07:24 PM:     ],
8:07:24 PM:     globalGroups: [ [Object] ],
8:07:24 PM:     projects: [
8:07:24 PM:       [Object], [Object],
8:07:24 PM:       [Object], [Object],
8:07:24 PM:       [Object], [Object],
8:07:24 PM:       [Object], [Object]
8:07:24 PM:     ],
8:07:24 PM:     activeSplits: []
8:07:24 PM:   },
8:07:24 PM:   remoteFontUrls: [
8:07:24 PM:     'https://fonts.googleapis.com/css2?family=Inter%3Aital%2Cwght%400%2C300%3B0%2C400%3B0%2C500%3B0%2C600%3B0%2C700%3B0%2C800&family=Epilogue%3Aital%2Cwght%400%2C300%3B0%2C400%3B0%2C500%3B0%2C600%3B0%2C700%3B0%2C800&family=Inconsolata%3Aital%2Cwght%400%2C300%3B0%2C400%3B0%2C500%3B0%2C600%3B0%2C700%3B0%2C800&family=Roboto%3Aital%2Cwght%400%2C300%3B0%2C400%3B0%2C500%3B0%2C700&display=swap'
8:07:24 PM:   ]
8:07:24 PM: }

[john_zambrano]

Ok I found the issue. It was a network error!

I have Cloudflare proxying my CMS backend and it activated bot-fight mode when Netlify was trying to request data from my backend at build-time.

So all good, pls disregard my post The errors were on my end.

[yang]

Nice digging, relieved to see you cracked this!