date parameter with react-query

[jamalsoueidan]

It's generating the key differently?

What are the steps to reproduce this issue?

const query = getUserShiftGetAllQueryOptions(params.userId || "", {
    start: start ? new Date(start) : startOfMonth(new Date()),
    end: end ? new Date(end) : endOfMonth(new Date()),
  });

const response = await queryClient.ensureQueryData(query);

The key is saved correctly

["/user/6430921cdb5803a932771598/shifts",{"end":"2023-05-08T00:00:00.000Z","start":"2023-04-24T00:00:00.000Z"}]

But when trying to generate the key again:

   getUserShiftGetAllQueryKey(
      userId || "",
      {
         start: start ? new Date(start) : startOfMonth(new Date()),
         end: end ? new Date(end) : endOfMonth(new Date())
     }
  );

["/user/6430921cdb5803a932771598/shifts",{"end":"Mon May 08 2023 02:00:00 GMT+0200 (Central European Summer Time)","start":"Mon Apr 24 2023 02:00:00 GMT+0200 (Central European Summer Time) "}]

[NimmLor]

It appears that the QueryKey functions simply call the date's 'toString' method, resulting in this long output?

A quick workaround on your end would be to call the toISOString() method of the date object.

However, I'm not aware that orval produces these QueryKey in such a way that it takes date objects in the first place; should you simply supply a string?

getUserShiftGetAllQueryKey(
  userId || "",
  {
     start: start ? new Date(start).toISOString() : startOfMonth(new Date()).toISOString(),
     end: end ? new Date(end).toISOString() : endOfMonth(new Date()).toISOString()
  }
)

Can you paste the code generated by orval?

[jamalsoueidan]

Thank you @NimmLor for your reply.

I know this would work, but then the types is wrong, since the params is start => Date, and end => Date.

getUserShiftGetAllQueryKey(userId || "", {
        start: start.toJSON(),
        end: end.toJSON(),
      } as never),

[NimmLor]

Please add the relevant generated function code from orval and the openapi spec. I don't know how to reproduce this given your issue description?

[jamalsoueidan]

https://github.com/jamalsoueidan/booking-api/blob/main/docs/openapi.yaml https://github.com/jamalsoueidan/booking-api/blob/main/orval.config.js

I'm using useDate: true.

[jamalsoueidan]

export const getUserShiftGetAllQueryKey = (
  userId: string,
  params: UserShiftGetAllParams
) => [`/user/${userId}/shifts`, ...(params ? [params] : [])] as const;

/**
 * Generated by orval v6.14.3 🍺
 * Do not edit manually.
 * Booking Shopify Api
 * OpenAPI spec version: 1.0.0
 */

export type UserShiftGetAllParams = {
  /**
   * start of the date
   */
  start: Date;
  /**
   * end of the date
   */
  end: Date;
};

[jamalsoueidan]

This is from react-query devtool.