chore: Fix client params undefined issue

carbonmark/.generated/carbonmark-api-sdk/client.ts

@@ -22,17 +22,18 @@ export const fetchClient = async <
 >(
   request: RequestConfig<TVariables>
 ): Promise<ResponseConfig<TData>> => {
-  const response = await fetch(
-    `${urls.api.base}${request.url}${request.params ?? ""}`,
-    {
-      method: request.method,
-      body: JSON.stringify(request.data),
-      headers: {
-        "Content-Type": "application/json",
-        ...request.headers,
-      },
-    }
-  );
+  const params = new URLSearchParams(
+    request.params as Record<string, string>
+  ).toString();
+
+  const response = await fetch(`${urls.api.base}${request.url}?${params}`, {
+    method: request.method,
+    body: JSON.stringify(request.data),
+    headers: {
+      "Content-Type": "application/json",
+      ...request.headers,
+    },
+  });
 
   if (!response.ok) {
     const errorData = await response.json();

carbonmark/components/UserTracker/index.tsx

@@ -1,6 +1,7 @@
 import { useGetUsersWalletorhandle } from ".generated/carbonmark-api-sdk/hooks";
 import { useWeb3 } from "@klimadao/lib/utils";
 import { LO } from "lib/luckyOrange";
+import { notNil } from "lib/utils/functional.utils";
 import { FC, useEffect } from "react";
 
 interface Props {
@@ -11,7 +12,9 @@ interface Props {
 export const UserTracker: FC<Props> = (props) => {
   const { address, isConnectionFromCache } = useWeb3();
   const { data: carbonmarkUser, isLoading } = useGetUsersWalletorhandle(
-    address ?? ""
+    address ?? "",
+    {},
+    { shouldFetch: notNil(address) }
   );
   useEffect(() => {
     // Start tracking only if we finished loading carbonmarkUser data

carbonmark/components/pages/Portfolio/Retire/index.tsx

@@ -1,4 +1,3 @@
-import client from ".generated/carbonmark-api-sdk/client";
 import { useGetUsersWalletorhandle } from ".generated/carbonmark-api-sdk/hooks";
 import { useWeb3 } from "@klimadao/lib/utils";
 import { Messages } from "@lingui/core";
@@ -40,7 +39,7 @@ export const Retire: NextPage<RetirePageProps> = (props) => {
   const { data: carbonmarkUser, isLoading } = useGetUsersWalletorhandle(
     address ?? "",
     { network: networkLabel, expiresAfter: "0" },
-    { query: { fetcher: notNil(address) ? client : async () => undefined } }
+    { shouldFetch: notNil(address) }
   );
 
   const [retirementAsset, setRetirementAsset] =

carbonmark/components/pages/Portfolio/index.tsx

@@ -1,4 +1,3 @@
-import client from ".generated/carbonmark-api-sdk/client";
 import { useGetUsersWalletorhandle } from ".generated/carbonmark-api-sdk/hooks";
 import { useWeb3 } from "@klimadao/lib/utils";
 import { t, Trans } from "@lingui/macro";
@@ -33,7 +32,7 @@ export const Portfolio: NextPage = () => {
   } = useGetUsersWalletorhandle(
     address ?? "",
     { network: networkLabel, expiresAfter: "0" },
-    { query: { fetcher: notNil(address) ? client : async () => undefined } }
+    { shouldFetch: notNil(address) }
   );
 
   const [isPending, setIsPending] = useState(false);

carbonmark/components/pages/Retire/FromPortfolio/index.tsx

@@ -4,6 +4,7 @@ import { ButtonPrimary } from "components/Buttons/ButtonPrimary";
 import { SpinnerWithLabel } from "components/SpinnerWithLabel";
 import { Text } from "components/Text";
 import { addProjectsToAssets, AssetWithProject } from "lib/actions";
+import { notNil } from "lib/utils/functional.utils";
 import { isListableToken } from "lib/utils/listings.utils";
 import { FC, useEffect, useState } from "react";
 import { AssetProject } from "./AssetProject";
@@ -15,7 +16,9 @@ export type Props = {
 
 export const RetireFromPortfolio: FC<Props> = (props) => {
   const { data: carbonmarkUser, isLoading } = useGetUsersWalletorhandle(
-    props.address
+    props.address,
+    {},
+    { shouldFetch: notNil(props.address) }
   );
 
   const [isLoadingAssets, setIsLoadingAssets] = useState(false);

carbonmark/components/pages/Retirements/SingleRetirement/BeneficiaryDetails/index.tsx

@@ -5,6 +5,7 @@ import LaunchIcon from "@mui/icons-material/Launch";
 import { ProfileLogo } from "components/pages/Users/ProfileLogo";
 import { Text } from "components/Text";
 import { urls } from "lib/constants";
+import { notNil } from "lib/utils/functional.utils";
 import { FC } from "react";
 import * as styles from "./styles";
 
@@ -15,7 +16,9 @@ type Props = {
 
 export const BeneficiaryDetails: FC<Props> = (props) => {
   const { data: carbonmarkUser } = useGetUsersWalletorhandle(
-    props.beneficiaryAddress
+    props.beneficiaryAddress,
+    {},
+    { shouldFetch: notNil(props.beneficiaryAddress) }
   );
   return (
     <div className={styles.beneficiaryCard}>

carbonmark/components/pages/Users/SellerConnected/index.tsx

@@ -38,10 +38,14 @@ export const SellerConnected: FC<Props> = (props) => {
     data: carbonmarkUser,
     isLoading,
     mutate,
-  } = useGetUsersWalletorhandle(props.userAddress, {
-    network,
-    expiresAfter: address === props.userAddress ? "0" : undefined,
-  });
+  } = useGetUsersWalletorhandle(
+    props.userAddress,
+    {
+      network,
+      expiresAfter: address === props.userAddress ? "0" : undefined,
+    },
+    { shouldFetch: notNil(address) }
+  );
   const [isPending, setIsPending] = useState(false);
   const [showEditProfileModal, setShowEditProfileModal] = useState(false);
   const [showCreateListingModal, setShowCreateListingModal] = useState(false);

carbonmark/components/pages/Users/SellerUnconnected/index.tsx

@@ -7,6 +7,7 @@ import { Text } from "components/Text";
 import { Col, TwoColLayout } from "components/TwoColLayout";
 import { createProjectPurchaseLink } from "lib/createUrls";
 import { getActiveListings, getSortByUpdateListings } from "lib/listingsGetter";
+import { notNil } from "lib/utils/functional.utils";
 import { FC } from "react";
 import { Listing } from "../Listing";
 import { ProfileHeader } from "../ProfileHeader";
@@ -25,7 +26,8 @@ export const SellerUnconnected: FC<Props> = (props) => {
     {
       network: networkLabel,
       expiresAfter: address === props.userAddress ? "0" : undefined,
-    }
+    },
+    { shouldFetch: notNil(address) }
   );
 
   const activeListings = getActiveListings(carbonmarkUser?.listings ?? []);

carbonmark/components/pages/Users/index.tsx

@@ -28,12 +28,10 @@ const Page: NextPage<PageProps> = (props) => {
   return (
     <>
       <PageHead
-        title={t`${
-          props.carbonmarkUser?.handle || concatAddress(props.userAddress)
-        } | Profile | Carbonmark`}
-        mediaTitle={`${
-          props.carbonmarkUser?.handle || concatAddress(props.userAddress)
-        }'s Profile on Carbonmark`}
+        title={t`${props.carbonmarkUser?.handle || concatAddress(props.userAddress)
+          } | Profile | Carbonmark`}
+        mediaTitle={`${props.carbonmarkUser?.handle || concatAddress(props.userAddress)
+          }'s Profile on Carbonmark`}
         metaDescription={t`Create and edit listings, and track your activity with your Carbonmark profile.`}
       />
 

carbonmark/lib/api/client.ts

@@ -1,4 +1,5 @@
 import { urls } from "lib/constants";
+import { pickBy } from "lodash/fp";
 
 export type RequestConfig<TVariables = unknown> = {
   method: "get" | "put" | "patch" | "post" | "delete";
@@ -15,24 +16,31 @@ export type ApiError<TError> = {
   data?: TError;
 };
 
+/** Removes all undefined or null values  */
+const definedParams = pickBy((value) => value !== undefined && value !== null);
+
 export const fetchClient = async <
   TData,
   TError = unknown,
   TVariables = unknown,
 >(
   request: RequestConfig<TVariables>
 ): Promise<ResponseConfig<TData>> => {
-  const response = await fetch(
-    `${urls.api.base}${request.url}${request.params ?? ""}`,
-    {
-      method: request.method,
-      body: JSON.stringify(request.data),
-      headers: {
-        "Content-Type": "application/json",
-        ...request.headers,
-      },
-    }
-  );
+  const params = new URLSearchParams(
+    definedParams(request.params as Record<string, string>) as Record<
+      string,
+      string
+    >
+  ).toString();
+
+  const response = await fetch(`${urls.api.base}${request.url}?${params}`, {
+    method: request.method,
+    body: JSON.stringify(request.data),
+    headers: {
+      "Content-Type": "application/json",
+      ...request.headers,
+    },
+  });
 
   if (!response.ok) {
     const errorData = await response.json();