Tengo una entrada de búsqueda en mi componente <Layout> . La UX que me gustaría es que cuando comience a escribir en el cuadro, cambie la URL a /search/?=whatever y use la página de búsqueda para mostrar mis resultados. Tengo esto funcionando principalmente, pero hay un problema persistente en el que faltan algunos caracteres, generalmente el tercero o el cuarto, a medida que las cosas pasan de la página original a la página de búsqueda. El código está todo en https://github.com/coderanger/buddy.farm/ si eso ayuda. Podría ser más una pregunta genérica de React, pero el corazón del problema parece ser navegar () forzando mi enfoque de entrada fuera del campo de texto mientras las cosas se procesan o algo así.
Así que terminé resolviendo esto con tres rondas de cambios. Primero fueron las correcciones de efectos mencionadas anteriormente por Andrew Gillis, esos eran solo errores directos. La segunda fue sacar el índice de búsqueda de los datos de la página de Gatsby (anteriormente era una consulta estática en la página) y colocarlo en su propio archivo JSON. Gracias a esta publicación de blog por explicar exactamente cómo, pero la versión corta es usar un gancho createPages para ejecutar la misma consulta de GraphQL y escribirla en public/search.json , y luego escribir algunas cosas normales de React para cargar esos datos cuando el montajes de página con un spinner de carga y todo eso. Y luego, en tercer lugar, utilicé un contexto global para continuar registrando las entradas del usuario a través del evento onChange después de que se inició un navigate() y luego restaurarlo una vez que se monta la página.