fix(apiOptions): strip undefined values from options in queryKey

Author: TkDodo

static/app/utils/api/apiOptions.spec.tsx

@@ -54,6 +54,21 @@ describe('apiOptions', () => {
     ]);
   });
 
+  it('should strip undefined values from options in queryKey', () => {
+    const options = apiOptions.as<unknown>()('/api-tokens/$tokenId/', {
+      staleTime: 0,
+      path: {tokenId: '123'},
+      query: {cursor: 'abc'},
+      method: undefined,
+    });
+
+    expect(options.queryKey).toEqual([
+      {infinite: false, version: 'v2'},
+      '/api-tokens/123/',
+      {query: {cursor: 'abc'}},
+    ]);
+  });
+
   it('should stringify number path params', () => {
     const options = apiOptions.as<unknown>()('/api-tokens/$tokenId/', {
       staleTime: 0,

static/app/utils/api/apiOptions.ts

@@ -23,8 +23,8 @@ type PathParamOptions<TApiPath extends string> =
     ? {path?: never}
     : {path: Record<ExtractPathParams<TApiPath>, string | number> | SkipToken};
 
-function hasDefinedValues(obj: Record<string, unknown>): boolean {
-  return Object.values(obj).some(v => v !== undefined);
+function stripUndefinedValues(obj: Record<string, unknown>): Record<string, unknown> {
+  return Object.fromEntries(Object.entries(obj).filter(([, v]) => v !== undefined));
 }
 
 const selectJson = <TData>(data: ApiResponse<TData>) => data.json;
@@ -47,11 +47,13 @@ function _apiOptions<
     : [Options & PathParamOptions<TApiPath>]
 ) {
   const url = getApiUrl(path, ...([{path: pathParams}] as OptionalPathParams<TApiPath>));
+  const strippedOptions = stripUndefinedValues(options);
 
   return queryOptions({
-    queryKey: hasDefinedValues(options)
-      ? ([{infinite: false, version: 'v2'}, url, options] as ApiQueryKey)
-      : ([{infinite: false, version: 'v2'}, url] as ApiQueryKey),
+    queryKey:
+      Object.keys(strippedOptions).length > 0
+        ? ([{infinite: false, version: 'v2'}, url, strippedOptions] as ApiQueryKey)
+        : ([{infinite: false, version: 'v2'}, url] as ApiQueryKey),
     queryFn: pathParams === skipToken ? skipToken : apiFetch<TActualData>,
     enabled: pathParams !== skipToken,
     staleTime,
@@ -80,11 +82,13 @@ function _apiOptionsInfinite<
     : [Options & PathParamOptions<TApiPath>]
 ) {
   const url = getApiUrl(path, ...([{path: pathParams}] as OptionalPathParams<TApiPath>));
+  const strippedOptions = stripUndefinedValues(options);
 
   return infiniteQueryOptions({
-    queryKey: hasDefinedValues(options)
-      ? ([{infinite: true, version: 'v2'}, url, options] as InfiniteApiQueryKey)
-      : ([{infinite: true, version: 'v2'}, url] as InfiniteApiQueryKey),
+    queryKey:
+      Object.keys(strippedOptions).length > 0
+        ? ([{infinite: true, version: 'v2'}, url, strippedOptions] as InfiniteApiQueryKey)
+        : ([{infinite: true, version: 'v2'}, url] as InfiniteApiQueryKey),
     queryFn: pathParams === skipToken ? skipToken : apiFetchInfinite<TActualData>,
     getPreviousPageParam: parsePageParam('previous'),
     getNextPageParam: parsePageParam('next'),