es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo crear un widget personalizado de netlifyCMS que pueda manejar una consulta?

22 Jul, 2023 Programación

Entonces quiero tener un widget de selección donde las opciones se basen en algunos datos dinámicos que debo consultar. Sin embargo, parece que los widgets personalizados se rompen al importar useStaticQuery.

Lo siguiente me da “sin widget de control en el CMS”. Funciona bien sin la importación de useStaticQuery.

import React from 'react';

import { useStaticQuery, graphql } from "gatsby"

export class CustomControl extends React.Component {

render() {
  return (
    <div>
      ...
    </div>
  )
};
}

export const CustomPreview = (props) => {
return (
  <div></div>
);
}

En general, ¿hay una mejor manera/práctica de crear un widget personalizado que pueda manejar valores dinámicos?

Actualización:

He probado el widget de relación sin suerte. Tengo datos existentes en una colección pero no puedo acceder a ellos desde el widget. ¿Alguien tiene una versión funcional de la que pueda partir?

La colección que se supone que es los “datos”:

label: Team
name: team
folder: 'src/pages/team' 
create: true
fields:
  - {label: 'Name', name: 'name', widget: string}

y el widget de relación:

label: 'Relation widget'
name: 'relationWidget'
widget: 'relation'
collection: 'team'
searchFields: ['name']
valueField: 'name'
displayFields: ['name']
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución para crear un widget Select con valores dinámicos

    Para crear un widget Select con opciones basadas en datos dinámicos que necesitan ser consultados, puedes utilizar el hook useStaticQuery proporcionado por Gatsby. Sin embargo, ten en cuenta que importar useStaticQuery puede causar problemas con los widgets personalizados.

    Aquí tienes un ejemplo de un componente CustomControl (widget Select) y CustomPreview (widget de vista previa) que utiliza useStaticQuery para obtener valores dinámicos:

    import React from 'react';
import { useStaticQuery, graphql } from "gatsby";

export class CustomControl extends React.Component {
  render() {
    const data = useStaticQuery(graphql`
      query {
        allDynamicData {
          nodes {
            value
          }
        }
      }
    `);

    // Transforma los datos de GraphQL en opciones para el menú Select
    const options = data.allDynamicData.nodes.map(node => ({
      label: node.value,
      value: node.value,
    }));

    return (
      <div>
        <select value="{this.props.value}" onchange="{this.props.onChange}">
          {options.map(option => (
            <option key="{option.value}" value="{option.value}">
              {option.label}
            </option>
          ))}
        </select>
      </div>
    );
  }
}

export const CustomPreview = (props) => {
  return (
    <div>{props.value}</div>
  );
}

    Ten en cuenta que estamos utilizando una consulta de GraphQL para obtener los datos dinámicos y transformarlos en opciones para el menú Select. Puedes modificar la consulta para obtener los datos que necesitas.

    En cuanto a las mejores prácticas para crear widgets personalizados que puedan manejar valores dinámicos, depende de tu caso de uso. La solución anterior es un enfoque que funciona con Gatsby y Netlify CMS. Otro enfoque es utilizar el widget relation, como se muestra en la pregunta actualizada. Sin embargo, parece que el OP tuvo problemas para acceder a los datos existentes en una colección. Aquí tienes un ejemplo de cómo utilizar el widget relation con una colección existente:

    # La colección que se supone que es la "data"
- label: Equipo
  name: equipo
  folder: 'src/pages/team'
  create: true
  fields:
    - {label: 'Nombre', name: 'nombre', widget: string}

# El widget de relación
- label: 'Widget de relación'
  name: 'relationWidget'
  widget: 'relation'
  collection: 'equipo'
  searchFields: ['nombre']
  valueField: 'nombre'
  displayFields: ['nombre']

    El widget relation te permite seleccionar un elemento de una colección existente y almacenar su valor como referencia. Puede ser útil si tienes una gran cantidad de datos existentes que necesitan ser referenciados en otras colecciones. Sin embargo, si solo tienes una pequeña cantidad de datos dinámicos que necesitan ser consultados, la solución anterior utilizando useStaticQuery puede ser más simple y flexible.

Comments are closed.