Data Fetching

Where do we get this data from?

List of Pokemon

 {
  "count": 1118,
  "next": "https://pokeapi.co/api/v2/pokemon?offset=5&limit=5",
  "previous": null,
  "results": [
    {
      "name": "bulbasaur",
      "url": "https://pokeapi.co/api/v2/pokemon/1/"
    },
    {
      "name": "ivysaur",
      "url":"https://pokeapi.co/api/v2/pokemon/2/"
    },
    …
  ]
}

GET https://pokeapi.co/api/v2/pokemon?limit=5

What to use for data fetching?

Configure TanStack Query

npm i @tanstack/react-query

 const queryClient = new QueryClient();
 
function App() {
  /* Provide the client to your App */
  return (
    <QueryClientProvider client={queryClient}>
      <MyComponent />
    </QueryClientProvider>
  );
} const queryClient = new QueryClient();
 
function App() {
  /* Provide the client to your App */
  return (
    <QueryClientProvider client={queryClient}>
      <MyComponent />
    </QueryClientProvider>
  );
}

Using Tanstack Query for data fetching

 const fetcher = async (uri: string): Promise => {
  const response = await fetch(uri);
  if (!response.ok) throw new Error('Could not fetch data!');
 
  return response.json();
};
 
function MyComponent() {
  const { data: user, isLoading, error } = useQuery(['user'], 
    () => fetcher('/user'));
  
  return <p>{user?.name}</p>;
} const fetcher = async (uri: string): Promise => {
  const response = await fetch(uri);
  if (!response.ok) throw new Error('Could not fetch data!');
 
  return response.json();
};
 
function MyComponent() {
  const { data: user, isLoading, error } = useQuery(['user'], 
    () => fetcher('/user'));
  
  return <p>{user?.name}</p>;
}

Clean & simple – also comes with with retry, cache & more functionality

The loading state can also be handled with React's Suspense for Data Fetching API (opt-in).

TanStack Query : npm i @tanstack/react-query

              export async function fetcher<T>(uri: string): Promise<T> {
  const response = await fetch(uri);
  if (!response.ok) throw new Error('Could not fetch data!');

  return response.json();
};

 const queryClient = new QueryClient();
 
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MyComponent />
    </QueryClientProvider>
  );
}

https://pokeapi.co/api/v2/pokemon?limit=5 https://pokeapi.co/api/v2/pokemon/bulbasaur/

Solution

ListPage.tsx

 function List() {
  const { data, isLoading, isError } = useQuery(
    ['pokelist'], 
    () => fetcher<PokemonResultDto>(
      'https://pokeapi.co/api/v2/pokemon?limit=1000'
    )
  );
 
  if (isLoading) return <div>LOADING</div>;
  if (isError) return <div>ERROR while loading data</div>;
 
  return <PokeList pokemons={data.results} />;
} function List() {
  const { data, isLoading, isError } = useQuery(
    ['pokelist'], 
    () => fetcher<PokemonResultDto>(
      'https://pokeapi.co/api/v2/pokemon?limit=1000'
    )
  );
 
  if (isLoading) return <div>LOADING</div>;
  if (isError) return <div>ERROR while loading data</div>;
 
  return <PokeList pokemons={data.results} />;
} function List() {
  const { data, isLoading, isError } = useQuery(
    ['pokelist'], 
    () => fetcher<PokemonResultDto>(
      'https://pokeapi.co/api/v2/pokemon?limit=1000'
    )
  );
 
  if (isLoading) return <div>LOADING</div>;
  if (isError) return <div>ERROR while loading data</div>;
 
  return <PokeList pokemons={data.results} />;
}

DetailPage.tsx

 function DetailPage() {
  const { pokemonName } = useParams<"pokemonName">();
  const uri = `https://pokeapi.co/api/v2/pokemon/${pokemonName}`;
 
  const { data, isLoading, isError } = useQuery(
    ["pokemon", "detail", pokemonName],
    () => fetcher<PokemonDetailDto>(uri)
  );
 
  if (isLoading) return <div>LOADING</div>;
  if (isError) return <div>ERROR while loading data</div>;
 
  return (
    <div>
      <span>{pokemonName}</span>
      <img src={data.sprites.front_shiny} alt={pokemonName} />
    </div>
  );
} function DetailPage() {
  const { pokemonName } = useParams<"pokemonName">();
  const uri = `https://pokeapi.co/api/v2/pokemon/${pokemonName}`;
 
  const { data, isLoading, isError } = useQuery(
    ["pokemon", "detail", pokemonName],
    () => fetcher<PokemonDetailDto>(uri)
  );
 
  if (isLoading) return <div>LOADING</div>;
  if (isError) return <div>ERROR while loading data</div>;
 
  return (
    <div>
      <span>{pokemonName}</span>
      <img src={data.sprites.front_shiny} alt={pokemonName} />
    </div>
  );
}

useMutation

 function AddPokemon() {
  const {
    mutate,
    isLoading: isMutationLoading,
    isError: isMutationerror
  } = useMutation((name: string) =>
    fetcher<PokemonDetailDto>("https://pokeapi.co/api/v2/pokemon?limit=1000", {
      method: "POST",
      body: JSON.stringify({ name }),
    })
  );
 
  return <button onClick={() => mutate("zuehlkemon")} />;
} function AddPokemon() {
  const {
    mutate,
    isLoading: isMutationLoading,
    isError: isMutationerror
  } = useMutation((name: string) =>
    fetcher<PokemonDetailDto>("https://pokeapi.co/api/v2/pokemon?limit=1000", {
      method: "POST",
      body: JSON.stringify({ name }),
    })
  );
 
  return <button onClick={() => mutate("zuehlkemon")} />;
} function AddPokemon() {
  const {
    mutate,
    isLoading: isMutationLoading,
    isError: isMutationerror
  } = useMutation((name: string) =>
    fetcher<PokemonDetailDto>("https://pokeapi.co/api/v2/pokemon?limit=1000", {
      method: "POST",
      body: JSON.stringify({ name }),
    })
  );
 
  return <button onClick={() => mutate("zuehlkemon")} />;
}

notice how there is no query key and no data

useMutation cache update

 const { data, isLoading, isError } = useQuery(['pokemonList'], () =>
  fetcher<PokemonResultDto>('https://pokeapi.co/api/v2/pokemon?limit=1000')
);
const queryClient = useQueryClient();
 
const { mutate } = useMutation(
  (name: string) =>
    fetcher<PokemonDetailDto>('https://pokeapi.co/api/v2/pokemon?limit=1000', {
      method: 'POST',
      body: JSON.stringify({ name }),
    }),
  {
    onSuccess: (mutateResult, mutateParams) => {
      const newPokeList = data 
        ? [...data.results, mutateResult] 
        : [mutateResult];
      queryClient.setQueryData(['pokemonList'], { results: newPokeList });
    },
  }
); const { data, isLoading, isError } = useQuery(['pokemonList'], () =>
  fetcher<PokemonResultDto>('https://pokeapi.co/api/v2/pokemon?limit=1000')
);
const queryClient = useQueryClient();
 
const { mutate } = useMutation(
  (name: string) =>
    fetcher<PokemonDetailDto>('https://pokeapi.co/api/v2/pokemon?limit=1000', {
      method: 'POST',
      body: JSON.stringify({ name }),
    }),
  {
    onSuccess: (mutateResult, mutateParams) => {
      const newPokeList = data 
        ? [...data.results, mutateResult] 
        : [mutateResult];
      queryClient.setQueryData(['pokemonList'], { results: newPokeList });
    },
  }
); const { data, isLoading, isError } = useQuery(['pokemonList'], () =>
  fetcher<PokemonResultDto>('https://pokeapi.co/api/v2/pokemon?limit=1000')
);
const queryClient = useQueryClient();
 
const { mutate } = useMutation(
  (name: string) =>
    fetcher<PokemonDetailDto>('https://pokeapi.co/api/v2/pokemon?limit=1000', {
      method: 'POST',
      body: JSON.stringify({ name }),
    }),
  {
    onSuccess: (mutateResult, mutateParams) => {
      const newPokeList = data 
        ? [...data.results, mutateResult] 
        : [mutateResult];
      queryClient.setQueryData(['pokemonList'], { results: newPokeList });
    },
  }
); const { data, isLoading, isError } = useQuery(['pokemonList'], () =>
  fetcher<PokemonResultDto>('https://pokeapi.co/api/v2/pokemon?limit=1000')
);
const queryClient = useQueryClient();
 
const { mutate } = useMutation(
  (name: string) =>
    fetcher<PokemonDetailDto>('https://pokeapi.co/api/v2/pokemon?limit=1000', {
      method: 'POST',
      body: JSON.stringify({ name }),
    }),
  {
    onSuccess: (mutateResult, mutateParams) => {
      const newPokeList = data 
        ? [...data.results, mutateResult] 
        : [mutateResult];
      queryClient.setQueryData(['pokemonList'], { results: newPokeList });
    },
  }
);

You can even go further to use optimistic UI to update the cache prior to the mutation and rollback in the error case.

	const fetcher = async <T>(uri: string): Promise<T> => {
	const response = await fetch(uri);
	if (!response.ok) throw new Error('Could not fetch data!');

	return response.json();
	};

	const { data: user } = useQuery(['user'],
	() => fetcher<User>('/user'));

	interface User {
	firstName: string,
	/* ... */
	}

Essential React

PokeAPI

List of Pokemon

What to use for data fetching?

Some words about types

Exercise

Solution

Mutating resources

useMutation

useMutation cache update

Data Fetching Libraries

Recap

Questions?

	{
	"count": 1118,
	"next": "https://pokeapi.co/api/v2/pokemon?offset=5&limit=5",
	"previous": null,
	"results": [
	{
	"name": "bulbasaur",
	"url": "https://pokeapi.co/api/v2/pokemon/1/"
	},
	{
	"name": "ivysaur",
	"url":"https://pokeapi.co/api/v2/pokemon/2/"
	},
	…
	]
	}

	const queryClient = new QueryClient();

	function App() {
	/* Provide the client to your App */
	return (
	<QueryClientProvider client={queryClient}>
	<MyComponent />
	</QueryClientProvider>
	);
	}

	const fetcher = async (uri: string): Promise => {
	const response = await fetch(uri);
	if (!response.ok) throw new Error('Could not fetch data!');

	return response.json();
	};

	function MyComponent() {
	const { data: user, isLoading, error } = useQuery(['user'],
	() => fetcher('/user'));

	return <p>{user?.name}</p>;
	}

	function List() {
	const { data, isLoading, isError } = useQuery(
	['pokelist'],
	() => fetcher<PokemonResultDto>(
	'https://pokeapi.co/api/v2/pokemon?limit=1000'
	)
	);

	if (isLoading) return <div>LOADING</div>;
	if (isError) return <div>ERROR while loading data</div>;

	return <PokeList pokemons={data.results} />;
	}

	function DetailPage() {
	const { pokemonName } = useParams<"pokemonName">();
	const uri = `https://pokeapi.co/api/v2/pokemon/${pokemonName}`;

	const { data, isLoading, isError } = useQuery(
	["pokemon", "detail", pokemonName],
	() => fetcher<PokemonDetailDto>(uri)
	);

	if (isLoading) return <div>LOADING</div>;
	if (isError) return <div>ERROR while loading data</div>;

	return (
	<div>
	<span>{pokemonName}</span>
	<img src={data.sprites.front_shiny} alt={pokemonName} />
	</div>
	);
	}

	function AddPokemon() {
	const {
	mutate,
	isLoading: isMutationLoading,
	isError: isMutationerror
	} = useMutation((name: string) =>
	fetcher<PokemonDetailDto>("https://pokeapi.co/api/v2/pokemon?limit=1000", {
	method: "POST",
	body: JSON.stringify({ name }),
	})
	);

	return <button onClick={() => mutate("zuehlkemon")} />;
	}

	const { data, isLoading, isError } = useQuery(['pokemonList'], () =>
	fetcher<PokemonResultDto>('https://pokeapi.co/api/v2/pokemon?limit=1000')
	);
	const queryClient = useQueryClient();

	const { mutate } = useMutation(
	(name: string) =>
	fetcher<PokemonDetailDto>('https://pokeapi.co/api/v2/pokemon?limit=1000', {
	method: 'POST',
	body: JSON.stringify({ name }),
	}),
	{
	onSuccess: (mutateResult, mutateParams) => {
	const newPokeList = data
	? [...data.results, mutateResult]
	: [mutateResult];
	queryClient.setQueryData(['pokemonList'], { results: newPokeList });
	},
	}
	);