tRPC•3y ago•

3 replies

How to type a helper function to standardise loading and error states with a useQuery call?

I am trying to standardize handling of error and loading states. I'd like to have one function/component that can handle what to do in those cases, and otherwise passes

data

data

to a function to render whatever is the happy path.

So something like this:

function RenderHelper({useQueryOutput, renderData}) {
  const {data, error, isFetching, isSuccess, isError} = useQueryOutput;
  if (isError) { /* ... render `error` UI */ }
  if (isLoading) { /* ... render loading UI  */}
  if (isSuccess) {
    return renderData(data);
  }
}

const SomeComponent = () => {
  const userQuery = trpc.user.myInfo.useQuery();
  return <RenderHelper useQueryOutput={userQuery} renderData={(data) => {
      return <div>{data.userName}</div>; // structure of `data` should be inferred
    }
  } />
}

function RenderHelper({useQueryOutput, renderData}) {
  const {data, error, isFetching, isSuccess, isError} = useQueryOutput;
  if (isError) { /* ... render `error` UI */ }
  if (isLoading) { /* ... render loading UI  */}
  if (isSuccess) {
    return renderData(data);
  }
}

const SomeComponent = () => {
  const userQuery = trpc.user.myInfo.useQuery();
  return <RenderHelper useQueryOutput={userQuery} renderData={(data) => {
      return <div>{data.userName}</div>; // structure of `data` should be inferred
    }
  } />
}

I'm struggling to type this in a way that the

renderData

renderData

function has the structure of

data

data

inferred by Typescript. I have looked at

AppRouterLike

AppRouterLike

QueryLike

QueryLike

and friends but can't get it to work. Would love some assistance, in the meantime I'll keep bashing my head against it. Here's a not-working example, in which

data

data

is typed as

any

any

and in the

render

render

function TS thinks

data

data

could be

undefined

undefined

export function RenderQuery<T extends ReturnType<QueryLike["useQuery"]>>({
  useQueryResponse,
  render,
}: {
  useQueryResponse: T;
  render: (data: T["data"]) => ReactElement;
}) {
  const { data, error, isFetching, isError, isSuccess } = useQueryResponse;
  if (isFetching) {
    return <LoadingSpinner />;
  }
  if (isError) {
    return (
        <Typography>Sorry, something went wrong.</Typography>
    );
  }
  if (isSuccess) {
    if (data === undefined) {
      throw new Error("How does TS still think data might be undefined in `render`?");
    }
    return render(data);
  }
  throw new Error("Shouldn't be possible to reach this point");
}

export function RenderQuery<T extends ReturnType<QueryLike["useQuery"]>>({
  useQueryResponse,
  render,
}: {
  useQueryResponse: T;
  render: (data: T["data"]) => ReactElement;
}) {
  const { data, error, isFetching, isError, isSuccess } = useQueryResponse;
  if (isFetching) {
    return <LoadingSpinner />;
  }
  if (isError) {
    return (
        <Typography>Sorry, something went wrong.</Typography>
    );
  }
  if (isSuccess) {
    if (data === undefined) {
      throw new Error("How does TS still think data might be undefined in `render`?");
    }
    return render(data);
  }
  throw new Error("Shouldn't be possible to reach this point");
}

Solution

In case it helps anyone, this seems to work

export function RenderQuery<
  T extends QueryLike,
  G extends InferQueryLikeInput<T>,
  P extends InferQueryLikeData<T>,
>({
  useQuery,
  input,
  render,
}: {
  useQuery: T;
  input: G;
  render: (data: P) => ReactElement;
}) {
  const query = useQuery.useQuery(input);
  switch (query.status) {
    case "error":
      return <div>Sorry, something went wrong.</div>
    case "loading":
      return <LoadingSpinner />;
    case "success":
      return render(query.data);
    default:
      const _exhaustivenessCheck: never = query;
      return _exhaustivenessCheck;
  }
}

export function RenderQuery<
  T extends QueryLike,
  G extends InferQueryLikeInput<T>,
  P extends InferQueryLikeData<T>,
>({
  useQuery,
  input,
  render,
}: {
  useQuery: T;
  input: G;
  render: (data: P) => ReactElement;
}) {
  const query = useQuery.useQuery(input);
  switch (query.status) {
    case "error":
      return <div>Sorry, something went wrong.</div>
    case "loading":
      return <LoadingSpinner />;
    case "success":
      return render(query.data);
    default:
      const _exhaustivenessCheck: never = query;
      return _exhaustivenessCheck;
  }
}

Called like

<RenderQuery 
  useQuery={trpc.user.details} 
  input={{userId}} 
  render={(data) => <div>{data.username}</div>} />

<RenderQuery 
  useQuery={trpc.user.details} 
  input={{userId}} 
  render={(data) => <div>{data.username}</div>} />

Jump to solution

How to type a helper function to standardise loading and error states with a useQuery call?

I am trying to standardize handling of error and loading states. I'd like to have one function/component that can handle what to do in those cases, and otherwise passes

data

data

to a function to render whatever is the happy path.

So something like this:

function RenderHelper({useQueryOutput, renderData}) {
  const {data, error, isFetching, isSuccess, isError} = useQueryOutput;
  if (isError) { /* ... render `error` UI */ }
  if (isLoading) { /* ... render loading UI  */}
  if (isSuccess) {
    return renderData(data);
  }
}

const SomeComponent = () => {
  const userQuery = trpc.user.myInfo.useQuery();
  return <RenderHelper useQueryOutput={userQuery} renderData={(data) => {
      return <div>{data.userName}</div>; // structure of `data` should be inferred
    }
  } />
}

function RenderHelper({useQueryOutput, renderData}) {
  const {data, error, isFetching, isSuccess, isError} = useQueryOutput;
  if (isError) { /* ... render `error` UI */ }
  if (isLoading) { /* ... render loading UI  */}
  if (isSuccess) {
    return renderData(data);
  }
}

const SomeComponent = () => {
  const userQuery = trpc.user.myInfo.useQuery();
  return <RenderHelper useQueryOutput={userQuery} renderData={(data) => {
      return <div>{data.userName}</div>; // structure of `data` should be inferred
    }
  } />
}

I'm struggling to type this in a way that the

renderData

renderData

function has the structure of

data

data

inferred by Typescript. I have looked at

AppRouterLike

AppRouterLike

QueryLike

QueryLike

and friends but can't get it to work. Would love some assistance, in the meantime I'll keep bashing my head against it. Here's a not-working example, in which

data

data

is typed as

any

any

and in the

render

render

function TS thinks

data

data

could be

undefined

undefined

export function RenderQuery<T extends ReturnType<QueryLike["useQuery"]>>({
  useQueryResponse,
  render,
}: {
  useQueryResponse: T;
  render: (data: T["data"]) => ReactElement;
}) {
  const { data, error, isFetching, isError, isSuccess } = useQueryResponse;
  if (isFetching) {
    return <LoadingSpinner />;
  }
  if (isError) {
    return (
        <Typography>Sorry, something went wrong.</Typography>
    );
  }
  if (isSuccess) {
    if (data === undefined) {
      throw new Error("How does TS still think data might be undefined in `render`?");
    }
    return render(data);
  }
  throw new Error("Shouldn't be possible to reach this point");
}

export function RenderQuery<T extends ReturnType<QueryLike["useQuery"]>>({
  useQueryResponse,
  render,
}: {
  useQueryResponse: T;
  render: (data: T["data"]) => ReactElement;
}) {
  const { data, error, isFetching, isError, isSuccess } = useQueryResponse;
  if (isFetching) {
    return <LoadingSpinner />;
  }
  if (isError) {
    return (
        <Typography>Sorry, something went wrong.</Typography>
    );
  }
  if (isSuccess) {
    if (data === undefined) {
      throw new Error("How does TS still think data might be undefined in `render`?");
    }
    return render(data);
  }
  throw new Error("Shouldn't be possible to reach this point");
}

Solution

In case it helps anyone, this seems to work

export function RenderQuery<
  T extends QueryLike,
  G extends InferQueryLikeInput<T>,
  P extends InferQueryLikeData<T>,
>({
  useQuery,
  input,
  render,
}: {
  useQuery: T;
  input: G;
  render: (data: P) => ReactElement;
}) {
  const query = useQuery.useQuery(input);
  switch (query.status) {
    case "error":
      return <div>Sorry, something went wrong.</div>
    case "loading":
      return <LoadingSpinner />;
    case "success":
      return render(query.data);
    default:
      const _exhaustivenessCheck: never = query;
      return _exhaustivenessCheck;
  }
}

export function RenderQuery<
  T extends QueryLike,
  G extends InferQueryLikeInput<T>,
  P extends InferQueryLikeData<T>,
>({
  useQuery,
  input,
  render,
}: {
  useQuery: T;
  input: G;
  render: (data: P) => ReactElement;
}) {
  const query = useQuery.useQuery(input);
  switch (query.status) {
    case "error":
      return <div>Sorry, something went wrong.</div>
    case "loading":
      return <LoadingSpinner />;
    case "success":
      return render(query.data);
    default:
      const _exhaustivenessCheck: never = query;
      return _exhaustivenessCheck;
  }
}

Called like

<RenderQuery 
  useQuery={trpc.user.details} 
  input={{userId}} 
  render={(data) => <div>{data.username}</div>} />

<RenderQuery 
  useQuery={trpc.user.details} 
  input={{userId}} 
  render={(data) => <div>{data.username}</div>} />

Jump to solution

How to type a helper function to standardise loading and error states with a useQuery call?

Similar Threads

How to type a helper function to standardise loading and error states with a useQuery call?

Similar Threads

Similar Threads

Similar Threads