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.

  • es.davy.ai/
  • Programación /
  • ¿Cómo pasar una variable de fecha a una consulta de Apollo GraphQL en React con TypeScript?

¿Cómo pasar una variable de fecha a una consulta de Apollo GraphQL en React con TypeScript?

16 Jul, 2023 Programación

Estoy tratando de obtener datos basados en un filtro de fecha en la consulta.

OBJETIVO: obtener datos donde la “fecha” sea mayor o igual a “new Date()”.

¿Qué intenté?

const AGQL = gql<code>
        query query($todayDate: DateTime!){
            activities(where:$todayDate) {
                name
                id
                date
            }
        }
</code>;

let { data, loading,error } = useQuery(AGQL,{
        variables:{
            todayDate:{date:{gte:new Date().toISOString()}},
        }
});

Pero esto da un “400 Bad Request”.

La consulta funciona en GraphQL Playground.


<h1>Escribe tu consulta o mutación aquí</h1>

query {
  activities(where:{date:{gte:"2021-12-09T08:05:01.147Z"}}) {
    name
    id
    date
}
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para obtener los datos en los que date sea mayor o igual a new Date(), puedes modificar tu consulta GraphQL para filtrar los datos utilizando el operador gte. Aquí tienes un ejemplo de consulta que debería funcionar:

    const AGQL = gql`
  query ($date: DateTime!) {
    activities(where: { date: { gte: $date } }) {
      name
      id
      date
    }
  }
`;

    En esta consulta, estamos utilizando el escalonamiento DateTime proporcionado por la biblioteca graphql-scalars. También estamos pasando una variable llamada $date que se utilizará para filtrar los datos.

    Para utilizar la consulta con el gancho useQuery en combinación con Apollo Client, puedes pasar las siguientes opciones:

    const { data, loading, error } = useQuery(AGQL, {
  variables: { date: new Date().toISOString() }
});

    Aquí, estamos pasando el objeto variables con una propiedad date que contiene la fecha actual en el formato de cadena ISO. Esto asegurará que la consulta devuelva solo las actividades que tengan una fecha mayor o igual a la fecha actual.

    Con estas modificaciones, tu consulta debería funcionar sin errores.

Comments are closed.