wealthfront-data-fetching-blog-post

// https://tanstack.com/query/v4/docs/framework/react/overview
const { data, isLoading, isError } = useQuery({
  queryKey: ['repoData'],
  queryFn: () => {
   return fetch('https://api.github.com/repos/TanStack/query').then((res) => res.json()) 
  },
});

wealthfront-data-fetching-blog-post

interface User {
  name: string;
}

const api = {
  getUser: (userId: number) => {
    return new Promise<User>((resolve) => {
      resolve({
        name: 'Elan',
      });

wealthfront-data-fetching-blog-post

// simplified
function useApiQuery(endpointName, params, options) {
  const { onError, ...restOptions } = options ?? {};

  return useQuery({
    queryKey: [endpointName, ...params],
    queryFn: () => {
      return api[endpointName].apply(null, params);
    },
    onError: (e) => {

wealthfront-data-fetching-blog-post

const { data: queryData } = useQuery({
  queryKey: ['getUser', userId],
  queryFn: () => api.getUser(userId),
  onError: (e) => {
    alertErrorMonitoring(e);
  },
});

// vs

wealthfront-data-fetching-blog-post

interface User {
  name: string;
}

// the fake API SDK from earlier
const api = {
  getUser: (userId: number) => {
    return new Promise<User>((resolve) => {
      resolve({
        name: 'Elan',

wealthfront-data-fetching-blog-post

type UseApiQueryOptions<EndpointName extends ApiEndpointName, Prefetched extends boolean | undefined> = UseQueryOptions<
  ApiResponse<EndpointName>
> & {
  prefetched?: Prefetched;
};

type UseApiQueryData<EndpointName extends ApiEndpointName, Prefetched extends boolean | undefined> = Prefetched extends true
  ? ApiResponse<EndpointName>
  : ApiResponse<EndpointName> | undefined;

wealthfront-data-fetching-blog-post

// simplified
export function AsyncStatus({ 
  children, 
  customErrorState, 
  isError, 
  isLoading, 
  loadingState 
}) {
  if (isLoading) {
    return loadingState;

wealthfront-data-fetching-blog-post

function Component() {
  const { data, isLoading, isError } = useApiQuery('getUser', [userId]);

  function renderContent() {
    // can assume data is populated in this function!
  }

  return (
    <AsyncStatus 
       isLoading={isLoading} 

wealthfront-data-fetching-blog-post

<FetchApiQuery 
  endpointName="getUser" 
  params={[userId]} 
  loadingState={<Spinner />}
>
  {({ data }) => {
    // data is populated in this function!
  }}
</FetchApiQuery>

wealthfront-data-fetching-blog-post

function Component() {
  const { data, isLoading, isError } = useApiQuery('getUser', [userId], { suspense: true });

  // can assume data is populated at the top level!

  return /* ... */
}

function Wrapper() {
  return (