Cannot await a promise before building config

ratiu52 years ago

11

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

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 };
}

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)
  })
}

⨯ 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"

• 

  notchr2 years ago

  @684895713863139339

  When should the data be called?

  
  
  

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

• 

  ratiu52 years ago

  I'm fairly certain it's when Payload is building the routes and components and such. That way I have the data to populate the select component

• 

  notchr2 years ago

  @684895713863139339

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

  
  
  

  Could that be a solution?

• 

  ratiu52 years ago

  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

• 

  notchr2 years ago

  @684895713863139339

  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

• 

  ratiu52 years ago

  Ah I see. Let me try that.

• 

  notchr2 years ago

  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

• 

  ratiu52 years ago

  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.

• 

  notchr2 years ago

  hmm

  
  
  @684895713863139339

  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

  
  
  @854377910689202256

  the legend made a video

  
  
  

  on this exact topic

  
  
  https://payloadcms.com/docs/fields/select
  
  

  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.
• 

  ratiu52 years ago

  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

  @1049775120559898725
• 

  notchr2 years ago

  ❤️

  
  
  

  Anytime

  
  
  

  And shoutout to

  @854377910689202256

  for making it