Skip to content
Documentação
Data Fetching Condicional

Data Fetching Condicional

Conditional

Use null ou passe a função como key para obter dados condicionais. Se a função lança ou retorna um valor falsy (um valor que se traduz em falso quando avaliado em um contexto Boolean), SWR não iniciará a requisição.

// fetch condicional
const { data } = useSWR(shouldFetch ? '/api/data' : null, fetcher)
 
// ...or retornar um valor falsy
const { data } = useSWR(() => shouldFetch ? '/api/data' : null, fetcher)
 
// ...or lançar um erro quando user.id não está definido
const { data } = useSWR(() => '/api/data?uid=' + user.id, fetcher)

Dependente

SWR também permite você obter dados que dependem de outros dados. Ele garante o máximo possível de paralelismo (evitando o waterfall), assim como a sequência de requisições quando um pedaço de dados dinâmico é necessário para que a próxima requisição de dados seja feita.

function MyProjects () {
  const { data: user } = useSWR('/api/user')
  const { data: projects } = useSWR(() => '/api/projects?uid=' + user.id)
 
  // Quando passamos uma função, SWR usará o valor de retorno
  // como `key`. Se a função lança ou retorna um valor falsy,
  // SWR saberá que algumas dependências não estão prontas.
  // No caso, `user.id` lança quando `user` não está carregado.
 
  if (!projects) return 'carregando...'
  return 'Você possui ' + projects.length + ' projetos'
}