#Cannot await a promise before building config

39 messages · Page 1 of 1 (latest)

primal crown
#

I am trying to await a response to build my config. I am pulling in some data from a backend about some products that I want to use to populate this select statement:

{
  name: 'layout',
  type: 'select',
  required: true,
  options: [...(await getAllProducts())],
},

My getAllProducts function looks something like this:

export async function getAllProducts(): {
  label: string; value: string
} {
  const res = await fetch("my-backend-url.com/api/get-all-products");
  const data = await res.json();
  return data as { label: string; value: string };
}

To test to make sure this works, I'm using the below function as a proof-of-concept:

export const getAllProducts = async (): Promise<{ label: string; value: string }[]> => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve([
        { label: 'Product 1', value: 'product-1' },
        { label: 'Product 2', value: 'product-2' },
        { label: 'Product 3', value: 'product-3' },
      ])
    }, 50)
  })
}

But I'm getting the following error with the proof-of-concept code:

⨯ Internal error: TypeError: Cannot read properties of undefined (reading 'cookiePrefix')
    at getRequestLanguage (./node_modules/.pnpm/@payloadcms+next@3.0.0-beta.11_@types+react@18.2.79_http-status@1.6.2_monaco-editor@0.47.0_ne_jaw7phd7jkcnpwawfivwmgj34a/node_modules/@payloadcms/next/dist/utilities/getRequestLanguage.js:8:46)
    at RootLayout (./node_modules/.pnpm/@payloadcms+next@3.0.0-beta.11_@types+react@18.2.79_http-status@1.6.2_monaco-editor@0.47.0_ne_jaw7phd7jkcnpwawfivwmgj34a/node_modules/@payloadcms/next/dist/layouts/Root/index.js:44:110)
digest: "3908605137"

Any ideas if this works or how to resolve this?

spark ibexBOT
boreal notch
#

@primal crown When should the data be called?

#

You're trying to fetch some data for when Payload is built right?

primal crown
boreal notch
#

@primal crown I believe there a defaultValue on fields that allows for an async call beforeRead

#

Could that be a solution?

primal crown
#

Well the select type requires an options array and that's what I'm trying to fill with some external data. I don't know what the data will be as it could change on our ecommerce platform so I don't know what the default value would be

boreal notch
#

@primal crown Start with an empty array

#

You can use async defaultValue functions to fill fields with data from API requests.

# 
defaultValue:  async({ user, locale }) => {
    return await......
},
#

or maybe its

#

there we go

#

Note: try catch your awaited calls to handle request errors correctly

primal crown
#

Ah I see. Let me try that.

boreal notch
#

Lmk how that works, good luck

#

BTW check the expected return type for that field

#

I think its like

#

{

# 
{label: string, value: unknown}[]
#

or w/e for value

primal crown
#

Hmm for some reason Payload does not like it when I have an empty options array:

[11:21:06] ERROR: There were 1 errors validating your Payload config
[11:21:06] ERROR: 1: Collection "pdp" > Field "value" does not match any of the allowed types

This is the same error with and without the defaultValue field set.

boreal notch
#

hmm

#

@primal crown Just to confirm that the request will work

#

Can we add a default option like

#

{label: 'Select option', value: undefined}

#

or something

#

OH wait

#

lmao

#

@shy reef the legend made a video

#

on this exact topic

#

look for the video near the bottom

#

If you are looking to create a dynamic select field, the following tutorial will walk you through the process of creating a custom select field that fetches its options from an external API.

primal crown
#

Well adding the defaultValue and the example options didn't work as the page crashed with no error 😅 but I totally missed the video, thanks I'll check it out!

#

Thanks for your help in finding it, you're a beast @boreal notch

boreal notch
#

❤️

#

Anytime

#

And shoutout to @shy reef for making it