Skip to content

Instantly share code, notes, and snippets.

@jth0024
Created May 17, 2022 15:17
Show Gist options
  • Save jth0024/51cc8604f1825f6f5a42f98afb70bb9e to your computer and use it in GitHub Desktop.
Save jth0024/51cc8604f1825f6f5a42f98afb70bb9e to your computer and use it in GitHub Desktop.
A "component hook" that is designed for dependency injection
import { useCallback } from 'react';
import { useQuery } from 'react-query';
import type { CharactersApi } from '../apis';
interface UseCharacterListDeps {
charactersApi: CharactersApi,
}
export function useCharacterList(deps: UseCharacterListDeps) {
const { charactersApi } = deps
const charactersQuery = useQuery('characters', () => charactersApi.list());
const { data: characters, error, loading, refetch } = charactersQuery;
const data = {
loading,
characters,
}
const handlers = {
onRefresh: refetch,
}
return [data, handlers]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment