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.

Filtrar datos en un array usando variables de GraphQL y Next JS.

30 May, 2023 Programación

Tratando de filtrar datos usando variables GraphQL y Next JS. ¿Cómo puedo pasar mi estado a la variable GraphQL “name”?

handleSelectedFilter actualizará el estado del filtro en función de la opción seleccionada. Espero que el valor del estado del filtro se pase a la variable “name”.

Tenga en cuenta que no podemos utilizar hooks de React dentro de la función getStaticProps de Next js, he intentado la gestión del estado, los hooks personalizados, etc., pero no funcionan con Next JS.

Cualquier tipo de ayuda es muy apreciada. Gracias de antemano.

Función export async function getStaticProps() {

const { data, errors } = await client.query({
query: GET_LISTINGS,
variables: {
uri: ‘/lista/’,
name: filter?.city
}
})
return {
props: {
data: data || [],
},
revalidate: 1
}
}

const listings = ({ data }) => {
const [filter, setFilter] = useState({
city: ”,
area: ”,
type: ”,
})

const handleSelectedFilter = e => {
setFilter({ …filter, [e.target.name]: e.target.value })
}
}
export default listings

Esquema de GrpahQL a continuación

query GET_LISTINGS( $name: String) {
listingCategoriesL: listingCategories(where: {name: [$name]}) {
nodes {
id
name
listings {
edges {
node {
id
title
}
}
}
}
}
}

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para pasar el estado desde la función handleSelectedFilter a la variable GraphQL “name”, necesitas actualizar el objeto variables dentro de la función client.query para usar filter?.city en lugar de un valor codificado. De esta manera, el valor de la propiedad city del estado filter se pasará a la variable “name” en la consulta GraphQL.

    Así es cómo el código debería verse:

    export async function getStaticProps() {

 const { data, errors } = await client.query({
    query: GET_LISTINGS,
    variables: {
        uri: '/listing/',
        name: filter?.city
    }
  })
  return {
    props: {
        data: data || [],
    },
    revalidate: 1
  }
}

const listings = ({ data }) => {
  const [filter, setFilter] = useState({
      city: '',
      area: '',
      type: '',
  })

  const handleSelectedFilter = e => {
    setFilter({ ...filter, [e.target.name]: e.target.value })
  }

  return (
    // tu código del componente aquí
  )
}

export default listings

    Nota que también agregué una declaración de retorno a la función listings, ya que necesita devolver algún código JSX para ser renderizado en la página.

Comments are closed.