Docs de next-query

El panel es una herramienta de desarrollo. Lista los fetch etiquetados de tu app y las query() que se han ejecutado, muestra lo fresca que está cada entrada y revalida cualquiera con un clic. Pruébalo en la demo en vivo.

Móntalo

Ponlo una sola vez en el layout raíz:

app/layout.tsx

tsx

import { NextQuery } from '@angelitolm/next-query'
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <NextQuery position="bottom-left" />
      </body>
    </html>
  )
}

position es 'bottom-right' (por defecto) o 'bottom-left'. Fuera de next dev no renderiza nada.

De dónde salen las entradas

Fetches: el panel lee la caché de fetch de Next en disco, así que lista cada fetch nativo que tenga un tag en next.tags y haya quedado en caché. Un fetch aparece después de ejecutarse una vez.
Queries: cada query() que se ha ejecutado desde que arrancó el servidor de desarrollo.

Un fetch sin tags no aparece en la lista. El panel los cuenta y muestra un aviso al final: "N cached fetches have no tags. Add next: { tags } to see them here."

El lanzador

Un botón redondo con el logo en la esquina. Una burbuja encima cuenta las entradas obsoletas más las que tienen un error. Cuando todo está fresco, en su lugar aparece un punto con degradado. Haz clic para abrir el panel.

La cabecera

Contadores: cuántas entradas hay, cuántas obsoletas y cuántas con error.
Filter by label or tag: filtra por la etiqueta (la URL de un fetch, la clave de una query) y por los tags, por ejemplo products.
Sort: Updated (la más reciente primero, por defecto), Status (errores, luego obsoletas, luego frescas) o Label (una clave padre justo antes de sus hijas).
Revalidate all: revalida cada tag de la lista (el filtro no la reduce), enviados en lotes de 128.
Reload list: vuelve a pedir la lista. No revalida nada.
Cerrar.

Tarjetas

Cada entrada es una tarjeta con:

Una insignia QUERY o FETCH.
Su etiqueta: la URL de un fetch (host y ruta, cortada por el medio si es larga), o la clave JSON de una query.
Una píldora de estado: fresh (de lima a cian), stale o error.
Una barra de frescura que cuenta hacia atrás hasta quedar obsoleta, con una etiqueta como 6S LEFT o STALE 12S. Una entrada sin ventana de revalidate muestra "never stale", porque se conserva hasta que la revalides.
Un botón ↻. En un fetch revalida sus tags más específicos (las hojas); en una query, el tag más profundo de la clave. Su tooltip nombra los tags. Para revalidar todos los productos, haz clic en el chip products del detalle.

Estado revalidado

Justo después de revalidar, los datos todavía no se han vuelto a pedir: Next los pide de nuevo en la siguiente lectura. Hasta que la página los lea otra vez, la entrada muestra el estado stale y una etiqueta "revalidated · refetches on next read". Cuando los datos se leen de nuevo, la entrada vuelve a fresh.

Detalle

Selecciona una tarjeta para ver su detalle:

Un botón Revalidate, igual que el ↻ de la tarjeta.
Para un fetch: URL, Status, Revalidate (la ventana, o never), Updated (cuándo lo guardó Next) y Tags.
Para una query: Status, Revalidate, Updated, Reads / runs y Last run (lo que tardó fn), y Tags.
Tags: cada tag es un chip, y al hacer clic en uno se revalida ese tag. Haz clic en products y se refresca cada entrada que lo lleve.
La respuesta de un fetch, o los datos de una query, como JSON resaltado, hasta los primeros 16 KB, con una marca de truncado si se pasan. Una respuesta que no es JSON se muestra como texto. Copy la copia al portapapeles.

Si el fn de una query lanzó un error, el mensaje aparece encima de los datos.

Una entrada aparece cuando se ha ejecutado

Un fetch o una query aparece cuando se ha ejecutado. Las queries se listan desde que arrancó el servidor de desarrollo, así que tras reiniciar next dev no hay ninguna hasta que vuelvas a visitar las páginas.

Siguiente: Seguridad explica qué expone el panel y qué no.