Is there a way to refetch with useLoaderData in remix?

Viewed 1113

I'm learning remix and I'd have some functions in my loader that I call in my default route with useLoaderData like so :

export const loader = async () => {
  const pokemon = await getRandomPokemon();
  const types = await getAllPokemonTypes();
  return [pokemon, types.results];
};

export default function App() {
  const [pokemon, types] = useLoaderData();
...
}

I'd like to add a button to reload data (since I want a new random pokemon in this case) everytime I click on it

1 Answers

Use a remix Form (or HTML form):

<Form method="get">
  <button type="submit">Reload</button>
</Form> 

Submitting this form will execute the loader function.

Related