Alvi•6mo ago

paginated query with status

i want to use paginated query with status so it doesn't throw on backend error

6 Replies

Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!

erquhart•5mo ago

Can you say a little more? The usePaginatedQuery() hook does provide status (docs) but I'm not sure that's what you're looking for

AlviOP•5mo ago

i want a useQueryWithStatus equivalent for pagijated query, where if an error is thrown in the query function the client paginated hook doesn’t throw but it returns an error object

djbalin•5mo ago

I am really interested in this as well. I just used query streams and they are wonderful @lee for merging a paginated query. However, I get the error Uncaught Error: Cannot union empty array of streams if the streams are empty, and it's not straightforward to handle this in the frontend. For now I put this check below in my query, but that's not a nice solution going forward:

   if (submissionStreams.length === 0) {
      return {
        page: [] as AdminProfileSubmissionEnriched[],
        isDone: true,
        continueCursor: "null",
      };
    }

   if (submissionStreams.length === 0) {
      return {
        page: [] as AdminProfileSubmissionEnriched[],
        isDone: true,
        continueCursor: "null",
      };
    }

usePaginatedQueryWithStatus would be aaaawesome!

lee•5mo ago

you can use new EmptyStream(order, fields) or new SingletonStream(null, order, fields, field.map(() => null), []) to represent a stream with no elements. (the reason mergedStreams can't do that automatically is it doesn't know the order).

Timothy Kasasa•3mo ago

Not sure if there is a solution elsewhere but I used the react's error-boundary to solve this

class ErrorBoundary extends React.Component<
  { children: React.ReactNode },
  { hasError: boolean; error: Error | null }
> {
  constructor(props: { children: React.ReactNode }) {
    super(props);
    this.state = { hasError: false, error: null };
  }
  static getDerivedStateFromError(error: Error) {
    return { hasError: true, error };
  }
  render() {
    if (this.state.hasError) {
      return (
        <Box sx={{ width: "100%", p: 2 }}>
          <Alert severity="error">{parseConvexError(this.state.error)}</Alert>
        </Box>
      );
    }
    return this.props.children;
  }
}

class ErrorBoundary extends React.Component<
  { children: React.ReactNode },
  { hasError: boolean; error: Error | null }
> {
  constructor(props: { children: React.ReactNode }) {
    super(props);
    this.state = { hasError: false, error: null };
  }
  static getDerivedStateFromError(error: Error) {
    return { hasError: true, error };
  }
  render() {
    if (this.state.hasError) {
      return (
        <Box sx={{ width: "100%", p: 2 }}>
          <Alert severity="error">{parseConvexError(this.state.error)}</Alert>
        </Box>
      );
    }
    return this.props.children;
  }
}

Then just wrap you component that contains the paginated query

const TablePaginatedWithErrorBoundary = (props: TableProps) => {
  return (
    <ErrorBoundary>
      <TablePaginated {...props} />
    </ErrorBoundary>
  );
};

export default TablePaginatedWithErrorBoundary;

const TablePaginatedWithErrorBoundary = (props: TableProps) => {
  return (
    <ErrorBoundary>
      <TablePaginated {...props} />
    </ErrorBoundary>
  );
};

export default TablePaginatedWithErrorBoundary;

paginated query with status

Did you find this page helpful?