Expose select Field Options via GraphQL and REST APIs

[jjimenez22991]

It would be highly beneficial if Payload could expose the options configured for select fields through its GraphQL and REST APIs. Is there any way to do this right now?

Use Case

Currently, when using select fields with predefined options (as an array of strings or label-value pairs), these options are only accessible within the admin panel or codebase. This presents a challenge in headless implementations where client-side applications (e.g., React, Next.js) need to dynamically render these options (e.g., in dropdowns or filter components) without duplicating the logic.

Proposed Solution

Extend the GraphQL and REST APIs to expose the options of select fields, potentially in one of the following ways:

• Include them in a schema metadata endpoint or introspection query.
• Provide a dedicated endpoint or query, e.g., /api/[collection]/[field]/options (GET REST) or Collection_fieldName_Options (GraphQL).

Benefits

• Avoids hardcoding select options on the client side.
• Keeps frontend UI components in sync with backend schema definitions.
• Reduces developer overhead and risk of mismatched values.
• Avoid wrong decisions on using a collection for data that needs to be static to avoid overhead on the current application

I've a possible implementation in case doesn't exist anything similar and there's no reason to not to implement it. Of course this is a new endpoint from a client perspective if we want to integrate something inside the core could be good to have something inside the graphql property of the collection to be able to expose the fields or not.

import { GraphQLExtension, Option } from 'payload'
import collections from '@/collections'
import stringTransformationService from '@/utils/string-transformation-service/string-transformation-service'

type ExposedFieldsByCollectionSlug = {
  collectionSlug: string
  exposedFields: string[]
}[]

const exposedFieldsByCollectionSlug: ExposedFieldsByCollectionSlug = [
  // Add the collection slugs and their exposed fields here
  {
    // Example exposed field for faqs-question-option remove this when the first "real" collection exposed is added
    collectionSlug: 'example-collection-slug',
    exposedFields: ['exampleCollectionField'],
  },
]

export const generateCollectionOptionsQueries: GraphQLExtension = (
  GraphQL,
  _payload,
) => {
  const queryEndpoints: Record<string, unknown> = {}

  // Expose all select options from collections as GraphQL queries
  for (const collection of collections) {
    if (
      !collection.fields ||
      !exposedFieldsByCollectionSlug.some(
        (exposedCollection) =>
          exposedCollection.collectionSlug === collection.slug,
      )
    ) {
      continue
    }

    const exposedFieldNames =
      exposedFieldsByCollectionSlug.find(
        (exposedCollection) =>
          exposedCollection.collectionSlug === collection.slug,
      )?.exposedFields ?? []

    for (const field of collection.fields) {
      if (
        field.type === 'select' &&
        field.options &&
        exposedFieldNames.includes(field.name)
      ) {
        const options = field.options.map((option: Option) => option)

        const collectionName =
          stringTransformationService.fromKebabCaseToUpperCamelCase(
            collection.slug,
          )

        const fieldName =
          stringTransformationService.fromLowerCamelCaseToUpperCamelCase(
            field.name,
          )

        const queryName = `${collectionName}${fieldName}Options`

        // Create a query endpoint for each collection and field
        queryEndpoints[queryName] = {
          type: new GraphQL.GraphQLList(
            new GraphQL.GraphQLObjectType({
              name: queryName,
              fields: {
                label: { type: GraphQL.GraphQLString },
                value: { type: GraphQL.GraphQLString },
              },
            }),
          ),
          resolve: () => {
            return options
          },
        }
      }
    }
  }

  return queryEndpoints
}