Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error When Using useQuery with Protobuf Timestamp in @connectrpc/connect-query: "Do not know how to serialize a BigInt" #504

Closed
Miracle575 opened this issue Jan 15, 2025 · 2 comments

Comments

@Miracle575
Copy link

When utilizing the useQuery function from the @connectrpc/connect-query package, passing a value that includes Google's Protobuf Timestamp type results in an error: Do not know how to serialize a BigInt.

Is this issue caused by the fact that the Timestamp is being used as a queryKey by connect-query and passed to the useQuery function of TanStack Query, leading to this serialization problem?

I am using the bufbuild/protobuf tool to compile my proto files. The definition of google.protobuf.timestamp in bufbuild is as follows:

// @generated from message google.protobuf.Timestamp
export type Timestamp = Message<"google.protobuf.Timestamp"> & {
  /**
   * Represents seconds of UTC time since Unix epoch
   * 1970-01-01T00:00:00Z. Must be from 0001-01-01T00:00:00Z to
   * 9999-12-31T23:59:59Z inclusive.
   *
   * @generated from field: int64 seconds = 1;
   */
  seconds: bigint;

  /**
   * Non-negative fractions of a second at nanosecond resolution. Negative
   * second values with fractions must still have non-negative nanos values
   * that count forward in time. Must be from 0 to 999,999,999
   * inclusive.
   *
   * @generated from field: int32 nanos = 2;
   */
  nanos: number;
};

@connectrpc/connect-query v1.4.2

demo:

import React from 'react';
import { useQuery } from '@connectrpc/connect-query';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';

const fetchData = async () => {
  // Your data fetching logic here
};

const MyComponent = () => {
  const timestamp = new Timestamp();
  timestamp.setSeconds(Math.floor(Date.now() / 1000));
  timestamp.setNanos((Date.now() % 1000) * 1e6);

  const { data, error } = useQuery(myAPI, { timestamp });

  .....
};

export default MyComponent;

Thank you for your assistance!

@timostamm
Copy link
Member

With Connect-Query v1, you can use the defaultOptions from @connectrpc/connect-query and pass them to the query client to solve this problem. The options provide a queryKeyHashFn that can handle BigInt. See the documentation here.

@Miracle575
Copy link
Author

Thank you very much for your answer

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants