fix: supports null values in query strings (#5241)

Fixes issue where null values were not being handled properly from client/server --------- Co-authored-by: Jarrod Flesch <jarrodmflesch@gmail.com>
payloadcms · Jul 25, 2024 · c57591b · c57591b
1 parent 9750bc2
commit c57591b
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 22 deletions.
diff --git a/packages/payload/src/admin/components/forms/field-types/Relationship/index.tsx b/packages/payload/src/admin/components/forms/field-types/Relationship/index.tsx
@@ -139,7 +139,7 @@ const Relationship: React.FC<Props> = (props) => {
       })
 
       if (!errorLoading) {
-        relationsToFetch.reduce(async (priorRelation, relation) => {
+        await relationsToFetch.reduce(async (priorRelation, relation) => {
           const relationFilterOption = filterOptionsResult?.[relation]
           let lastLoadedPageToUse
           if (search !== searchArg) {
@@ -197,12 +197,17 @@ const Relationship: React.FC<Props> = (props) => {
               query.where.and.push(relationFilterOption)
             }
 
-            const response = await fetch(`${serverURL}${api}/${relation}?${qs.stringify(query)}`, {
-              credentials: 'include',
-              headers: {
-                'Accept-Language': i18n.language,
+            const response = await fetch(
+              `${serverURL}${api}/${relation}?${qs.stringify(query, {
+                strictNullHandling: true,
+              })}`,
+              {
+                credentials: 'include',
+                headers: {
+                  'Accept-Language': i18n.language,
+                },
               },
-            })
+            )
 
             if (response.ok) {
               const data: PaginatedDocs<unknown> = await response.json()
@@ -269,7 +274,7 @@ const Relationship: React.FC<Props> = (props) => {
   )
 
   const updateSearch = useDebouncedCallback((searchArg: string, valueArg: Value | Value[]) => {
-    getResults({ search: searchArg, sort: true, value: valueArg })
+    void getResults({ search: searchArg, sort: true, value: valueArg })
     setSearch(searchArg)
   }, 300)
 
@@ -280,7 +285,7 @@ const Relationship: React.FC<Props> = (props) => {
         updateSearch(searchArg, valueArg, searchArg !== '')
       }
     },
-    [search, updateSearch],
+    [initialLoadedPageState, search, updateSearch],
   )
 
   // ///////////////////////////////////
@@ -294,15 +299,14 @@ const Relationship: React.FC<Props> = (props) => {
       value,
     })
 
-    Object.entries(relationMap).reduce(async (priorRelation, [relation, ids]) => {
+    void Object.entries(relationMap).reduce(async (priorRelation, [relation, ids]) => {
       await priorRelation
 
       const idsToLoad = ids.filter((id) => {
-        return !options.find(
-          (optionGroup) =>
-            optionGroup?.options?.find(
-              (option) => option.value === id && option.relationTo === relation,
-            ),
+        return !options.find((optionGroup) =>
+          optionGroup?.options?.find(
+            (option) => option.value === id && option.relationTo === relation,
+          ),
         )
       })
 
@@ -320,12 +324,17 @@ const Relationship: React.FC<Props> = (props) => {
         }
 
         if (!errorLoading) {
-          const response = await fetch(`${serverURL}${api}/${relation}?${qs.stringify(query)}`, {
-            credentials: 'include',
-            headers: {
-              'Accept-Language': i18n.language,
+          const response = await fetch(
+            `${serverURL}${api}/${relation}?${qs.stringify(query, {
+              strictNullHandling: true,
+            })}`,
+            {
+              credentials: 'include',
+              headers: {
+                'Accept-Language': i18n.language,
+              },
             },
-          })
+          )
 
           const collection = collections.find((coll) => coll.slug === relation)
           let docs = []
@@ -507,7 +516,7 @@ const Relationship: React.FC<Props> = (props) => {
             onMenuOpen={() => {
               if (!hasLoadedFirstPage) {
                 setIsLoading(true)
-                getResults({
+                void getResults({
                   onSuccess: () => {
                     setHasLoadedFirstPage(true)
                     setIsLoading(false)
@@ -517,7 +526,7 @@ const Relationship: React.FC<Props> = (props) => {
               }
             }}
             onMenuScrollToBottom={() => {
-              getResults({
+              void getResults({
                 lastFullyLoadedRelation,
                 search,
                 sort: false,

diff --git a/packages/payload/src/express/middleware/index.ts b/packages/payload/src/express/middleware/index.ts
@@ -45,7 +45,7 @@ const middleware = (payload: Payload): any => {
     i18nMiddleware(payload.config.i18n),
     identifyAPI('REST'),
     methodOverride('X-HTTP-Method-Override'),
-    qsMiddleware({ arrayLimit: 1000, depth: 10 }),
+    qsMiddleware({ arrayLimit: 1000, depth: 10, strictNullHandling: true }),
     bodyParser.urlencoded({ extended: true }),
     compression(payload.config.express.compression),
     localizationMiddleware,