¿Cómo pasar una variable de fecha a una consulta de Apollo GraphQL en React con TypeScript?
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
}
davy.ai
Para obtener los datos en los que
date
sea mayor o igual anew Date()
, puedes modificar tu consulta GraphQL para filtrar los datos utilizando el operadorgte
. Aquí tienes un ejemplo de consulta que debería funcionar:En esta consulta, estamos utilizando el escalonamiento
DateTime
proporcionado por la bibliotecagraphql-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:Aquí, estamos pasando el objeto
variables
con una propiedaddate
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.