Skip to content

fix(moderation): colisao de query key causava crash intermitente na navegacao - #59

Merged
leo-nardo merged 1 commit into
mainfrom
fix/query-key-collision-section-title
Jul 31, 2026
Merged

leo-nardo merged 1 commit into
mainfrom
fix/query-key-collision-section-title

Conversation

@leo-nardo

Copy link
Copy Markdown
Contributor

Bug reportado

"This page couldn't load" intermitente ao navegar entre abas (nunca num reload direto). Console mostrava React error #31: "Objects are not valid as a React child (found: object with keys {track, sections})".

Causa raiz

moderation/page-content.tsx (useTrackSectionTitle) usava a mesma query key ["learning-track-overview", trackId] que 5 outras telas usam pra guardar o LearningTrackOverview completo — mas aqui o queryFn transformava o resultado pra so uma string (titulo da secao).

React Query cacheia por key. Se o usuario passasse pela moderacao e depois por qualquer uma das outras 5 telas (ou vice-versa) com o cache ainda "fresco", recebia o formato ERRADO sem refazer o fetch. Quando o objeto completo vazava pra onde se esperava uma string, {sectionTitle} tentava renderizar o objeto direto -> crash. Intermitente porque dependia da ordem/timing de navegacao entre abas; sumia com reload porque isso limpa o cache em memoria do React Query.

Fix

Troca a transformacao de dentro do queryFn pra usar a opcao select do React Query — o cache compartilhado sempre guarda o LearningTrackOverview cru (compativel com todo mundo), e cada consumidor transforma o dado do jeito que precisa sem corromper o que os outros esperam.

Test plan

  • npx tsc --noEmit
  • Confirmado por leitura de codigo: as outras 5 telas ja retornavam o objeto cru sob essa key, so a moderacao divergia

Co-Authored-By: Claude Sonnet 5 noreply@anthropic.com

…mente

Causa raiz do "This page couldn't load" / React error #31 que so
acontecia navegando entre abas (nunca num reload direto): a tela de
moderacao usava a MESMA query key ["learning-track-overview", trackId]
que 5 outras telas (trilhas, marcos, cursos, conquista, perfil
publico) usam pra guardar o LearningTrackOverview cru — mas aqui a
queryFn transformava o resultado pra so o titulo da secao (string).

React Query cacheia por key, entao quem chegasse nessa chave depois de
passar pela moderacao (ou vice-versa) podia receber o formato errado
sem refetch (dado ainda fresco). Quando o objeto {track, sections}
vazava pra onde se esperava uma string, {sectionTitle} tentava
renderizar o objeto direto como filho do React -> crash. So acontecia
as vezes (dependia da ordem/timing de navegacao) e sumia com reload
porque isso limpa o cache em memoria.

Fix: usa select do React Query em vez de transformar dentro da
queryFn. Isso guarda o LearningTrackOverview cru no cache
(compativel com todo mundo que usa a mesma key) e so extrai o titulo
pra esse consumidor especifico, sem corromper o cache compartilhado.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@vercel

vercel Bot commented Jul 31, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
legado-dev Ready Ready Preview Jul 31, 2026 6:44pm

@sonarqubecloud

Copy link
Copy Markdown

@leo-nardo
leo-nardo merged commit eade406 into main Jul 31, 2026
5 checks passed
@leo-nardo
leo-nardo deleted the fix/query-key-collision-section-title branch July 31, 2026 18:49

This branch was successfully deployed

1 active deployment
Preview — 4dc446fe Deployed Jul 31, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant