fix(use-dataloader): fix cache array key with false value (#1258)

* fix(use-dataloader): fix case where cache array key with false value was ignored

* test(use-dataloader): add test for null value in cache key

Author: ModuloM

.changeset/use-dataloader-20230324.md

@@ -0,0 +1,5 @@
+---
+'@scaleway/use-dataloader': patch
+---
+
+Fix case where cache array key with false value was ignored.

packages/use-dataloader/src/__tests__/helpers.test.ts

@@ -12,22 +12,23 @@ describe('marshalQueryKey', () => {
 
   test('should accept primitive array', () => {
     const date = new Date('2021')
-    expect(marshalQueryKey(['defaultKey', 3, null, date, true])).toStrictEqual(
-      'defaultKey.3.2021-01-01T00:00:00.000Z.true',
-    )
+    expect(
+      marshalQueryKey(['defaultKey', 3, null, false, date, true]),
+    ).toStrictEqual('defaultKey.3.false.2021-01-01T00:00:00.000Z.true')
 
     expect(
       marshalQueryKey(
         [
           'default key',
           ['number', 3],
           ['null', null],
+          ['false', false],
           ['date', date],
           ['boolean', true],
         ].flat(),
       ),
     ).toStrictEqual(
-      'default key.number.3.null.date.2021-01-01T00:00:00.000Z.boolean.true',
+      'default key.number.3.null.false.false.date.2021-01-01T00:00:00.000Z.boolean.true',
     )
   })
 

packages/use-dataloader/src/__tests__/useDataLoader.test.tsx

@@ -675,18 +675,23 @@ describe('useDataLoader', () => {
 
   test('should use cached data', async () => {
     const fakePromise = jest.fn(initialProps.method)
+    const testDate = new Date()
     const { result } = renderHook(
       props => [
         useDataLoader(props.key, props.method, props.config),
         useDataLoader(props.key, props.method, {
           ...props.config,
           enabled: false,
         }),
+        // eslint-disable-next-line no-sparse-arrays
+        useDataLoader(['test-13', , testDate], props.method, props.config),
+        useDataLoader(['test-13', null, testDate], props.method, props.config),
       ],
       {
         initialProps: {
           ...initialProps,
-          key: 'test-13',
+          // eslint-disable-next-line no-sparse-arrays
+          key: ['test-13', false, testDate],
           method: fakePromise,
         },
         wrapper,
@@ -710,7 +715,10 @@ describe('useDataLoader', () => {
 
     await waitFor(() => expect(result.current[1]?.isSuccess).toBe(true))
     expect(result.current[1]?.isSuccess).toBe(true)
-    expect(fakePromise).toBeCalledTimes(2)
+
+    await waitFor(() => expect(result.current[2]?.isSuccess).toBe(true))
+    expect(result.current[2]?.data).toBe(true)
+    expect(fakePromise).toBeCalledTimes(3)
   })
 
   test('should be reloaded from dataloader context', async () => {

packages/use-dataloader/src/helpers.ts

@@ -8,7 +8,9 @@ import type { KeyType } from './types'
 export const marshalQueryKey = (queryKey: KeyType) =>
   Array.isArray(queryKey)
     ? queryKey
-        .filter(Boolean)
+        // For now, we treat null values as if they were undefined
+        // because we can't stringified them and JSON.stringify is not performant
+        .filter(value => value !== undefined && value !== null)
         .map(subKey => {
           if (subKey instanceof Date) {
             return subKey.toISOString()