Use fetch instead of axios

frontend/orval.config.ts

@@ -8,6 +8,9 @@ module.exports = {
       target: "./",
       schemas: "./model",
       client: "react-query",
+      baseUrl: "${process.env.NEXT_PUBLIC_API_BASE_URI}",
+      httpClient: "fetch",
+      urlEncodeParameters: true,
       mock: true,
       prettier: true,
       clean: true,

frontend/package.json

@@ -34,7 +34,6 @@
     "@stripe/stripe-js": "^5.2.0",
     "@tanstack/react-query": "^5.62.11",
     "@tanstack/react-table": "^8.20.6",
-    "axios": "^1.7.9",
     "boring-avatars": "^1.11.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

frontend/pages/_app.tsx

@@ -24,7 +24,6 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
 import cardImage from "../public/img/card.webp"
 import { Fragment, ReactElement, ReactNode, useState } from "react"
 import { setDefaultOptions } from "date-fns"
-import axios from "axios"
 import { NextPage } from "next"
 import { Toaster } from "@/components/ui/sonner"
 
@@ -49,13 +48,6 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
 
   const [queryClient] = useState(() => new QueryClient({}))
 
-  axios.interceptors.request.use((config) => {
-    return {
-      ...config,
-      baseURL: process.env.NEXT_PUBLIC_API_BASE_URI,
-    }
-  })
-
   const router = useRouter()
   const instance = createInstance({
     urlBase: process.env.NEXT_PUBLIC_SITE_BASE_URI || "",

frontend/pages/admin/app-picks/index.tsx

@@ -124,7 +124,7 @@ export default function AppPicks() {
           position: app.position,
         },
         {
-          withCredentials: true,
+          credentials: "include",
         },
       )
 
@@ -199,7 +199,7 @@ export default function AppPicks() {
             recommendation_date: formatISO(date, { representation: "date" }),
           },
           {
-            withCredentials: true,
+            credentials: "include",
           },
         )
 

frontend/pages/admin/quality-moderation/index.tsx

@@ -77,7 +77,7 @@ export default function QualityModerationDashboard() {
           filter: filteredBy,
         },
         {
-          withCredentials: true,
+          credentials: "include",
           signal,
         },
       ),

frontend/pages/admin/roles/index.tsx

@@ -29,8 +29,8 @@ UserModeration.getLayout = function getLayout(page: ReactElement) {
 
 export default function UserModeration() {
   const rolesQuery = useRolesUsersRolesGet({
-    axios: {
-      withCredentials: true,
+    fetch: {
+      credentials: "include",
     },
   })
 
@@ -64,8 +64,8 @@ export default function UserModeration() {
 
 const UserList = ({ role }: { role: string }) => {
   const query = useRoleUsersUsersRolesRoleNameGet(role as RoleName, {
-    axios: {
-      withCredentials: true,
+    fetch: {
+      credentials: "include",
     },
   })
 

frontend/pages/admin/users/[user].tsx

@@ -66,14 +66,14 @@ const ProviderProfileLink = ({
 
 export default function UserAdmin({ userId }) {
   const query = useUserUsersUserIdGet(userId, {
-    axios: {
-      withCredentials: true,
+    fetch: {
+      credentials: "include",
     },
   })
 
   const addRoleQuery = useAddUserRoleUsersUserIdRolePost({
-    axios: {
-      withCredentials: true,
+    fetch: {
+      credentials: "include",
     },
     mutation: {
       onSuccess: () => {
@@ -83,8 +83,8 @@ export default function UserAdmin({ userId }) {
   })
 
   const removeRoleQuery = useDeleteUserRoleUsersUserIdRoleDelete({
-    axios: {
-      withCredentials: true,
+    fetch: {
+      credentials: "include",
     },
     mutation: {
       onSuccess: () => {

frontend/pages/admin/users/index.tsx

@@ -64,8 +64,8 @@ export default function UserModeration() {
       filterString: filterString,
     },
     {
-      axios: {
-        withCredentials: true,
+      fetch: {
+        credentials: "include",
       },
     },
   )

frontend/pages/apps/collection/tag/[tag]/[page].tsx

@@ -9,7 +9,6 @@ import {
   mapAppsIndexToAppstreamListItem,
 } from "src/meilisearch"
 import { getKeywordKeywordGet } from "src/codegen"
-import { AxiosResponse } from "axios"
 
 export default function Tag({
   applications,
@@ -53,7 +52,7 @@ export const getStaticProps: GetStaticProps = async ({ locale, params }) => {
     locale: locale,
     page: params.page as unknown as number,
     per_page: 30,
-  })) as AxiosResponse<MeilisearchResponse<AppsIndex>>
+  })) as { data: MeilisearchResponse<AppsIndex> }
 
   if (applications.data.page > applications.data.totalPages) {
     return {

frontend/pages/apps/manage/[appId]/accept-invite/index.tsx

@@ -32,7 +32,7 @@ export default function AcceptInvitePage({ app }) {
     queryKey: ["invite-status", app.id],
     queryFn: () =>
       getInviteStatusInvitesAppIdGet(app.id, {
-        withCredentials: true,
+        credentials: "include",
       }),
     enabled: !!app.id,
   })
@@ -41,7 +41,7 @@ export default function AcceptInvitePage({ app }) {
     mutationKey: ["accept-invite", app.id],
     mutationFn: () =>
       acceptInviteInvitesAppIdAcceptPost(app.id, {
-        withCredentials: true,
+        credentials: "include",
       }),
     onSuccess: async () => {
       await getUserData(userDispatch)
@@ -52,7 +52,7 @@ export default function AcceptInvitePage({ app }) {
     mutationKey: ["decline-invite", app.id],
     mutationFn: () =>
       declineInviteInvitesAppIdDeclinePost(app.id, {
-        withCredentials: true,
+        credentials: "include",
       }),
     onSuccess: async () => {
       await getUserData(userDispatch)

frontend/pages/apps/manage/[appId]/accept-invite/publisher-agreement/index.tsx

@@ -21,7 +21,7 @@ const PublisherAgreementPage = ({ appId }: Props) => {
     mutationKey: ["accept-invite", appId],
     mutationFn: () =>
       acceptInviteInvitesAppIdAcceptPost(appId, {
-        withCredentials: true,
+        credentials: "include",
       }),
     onSuccess: async () => {
       await getUserData(userDispatch)

frontend/pages/apps/manage/[appId]/index.tsx

@@ -83,7 +83,7 @@ export default function AppManagementPage({
 
   const query = useGetAppVendingSetupVendingappAppIdSetupGet(app.id, {
     query: { enabled: !!app.id },
-    axios: { withCredentials: true },
+    fetch: { credentials: "include" },
   })
 
   const pages = [
@@ -99,7 +99,7 @@ export default function AppManagementPage({
     queryKey: ["invite-status", app.id],
     queryFn: () =>
       getInviteStatusInvitesAppIdGet(app.id, {
-        withCredentials: true,
+        credentials: "include",
       }),
     enabled: !!app.id,
   })

frontend/pages/apps/purchase/[appId].tsx

@@ -36,7 +36,7 @@ export default function AppPurchasePage({
     queryKey: ["appVendingSetup", app.id],
     queryFn: async () => {
       const setup = await getAppVendingSetupVendingappAppIdSetupGet(app.id, {
-        withCredentials: true,
+        credentials: "include",
       })
 
       const decimalValue = setup.data.recommended_donation / 100

frontend/pages/apps/search/index.tsx

@@ -8,6 +8,7 @@ import { useQuery } from "@tanstack/react-query"
 import { fetchSearchQuery } from "src/fetchers"
 import { useMatomo } from "@mitresthen/matomo-tracker-react"
 import { SearchPanel } from "src/components/search/SearchPanel"
+import { AppsIndex, MeilisearchResponseLimited } from "src/meilisearch"
 
 export default function Search({ locale }) {
   const { t } = useTranslation()
@@ -43,17 +44,15 @@ export default function Search({ locale }) {
   const search = useQuery({
     queryKey: ["search", q, selectedFilters],
     queryFn: async () => {
-      return fetchSearchQuery(q as string, locale, selectedFilters).then(
-        (res) => {
-          if (q.length > 0) {
-            trackSiteSearch({
-              keyword: q,
-              count: res.data.estimatedTotalHits,
-            })
-          }
-          return res
-        },
-      )
+      const fetch = await fetchSearchQuery(q as string, locale, selectedFilters)
+      const json = (await fetch.json()) as MeilisearchResponseLimited<AppsIndex>
+      if (q.length > 0) {
+        trackSiteSearch({
+          keyword: q,
+          count: json.estimatedTotalHits,
+        })
+      }
+      return json
     },
   })
 

frontend/pages/payment/[transaction_id].tsx

@@ -26,8 +26,8 @@ export default function TransactionPage({ stripePublicKey }) {
   const query = useGetTransactionByIdWalletTransactionsTxnGet(
     router.query.transaction_id as string,
     {
-      axios: {
-        withCredentials: true,
+      fetch: {
+        credentials: "include",
       },
       query: {
         enabled: !!router.query.transaction_id,
@@ -38,8 +38,8 @@ export default function TransactionPage({ stripePublicKey }) {
   const queryStripe = useGetTxnStripedataWalletTransactionsTxnStripeGet(
     router.query.transaction_id as string,
     {
-      axios: {
-        withCredentials: true,
+      fetch: {
+        credentials: "include",
       },
       query: {
         enabled: !!router.query.transaction_id,

frontend/pages/payment/details/[transaction_id].tsx

@@ -17,8 +17,8 @@ export default function TransactionPage() {
   const query = useGetTransactionByIdWalletTransactionsTxnGet(
     router.query.transaction_id as string,
     {
-      axios: {
-        withCredentials: true,
+      fetch: {
+        credentials: "include",
       },
       query: {
         enabled: !!router.query.transaction_id,

frontend/pages/purchase/index.tsx

@@ -45,11 +45,11 @@ export default function Purchase() {
     }
 
     checkPurchasesPurchasesCheckPurchasesPost(appIDs, {
-      withCredentials: true,
+      credentials: "include",
     })
       .then(() => {
         getUpdateTokenPurchasesGenerateUpdateTokenPost({
-          withCredentials: true,
+          credentials: "include",
         })
           .then((result) =>
             fetch(

frontend/pages/statistics.tsx

@@ -204,7 +204,7 @@ const FailedByGuideline = () => {
     queryKey: ["failed-by-guideline"],
     queryFn: () =>
       getQualityModerationStatsQualityModerationFailedByGuidelineGet({
-        withCredentials: true,
+        credentials: "include",
       }),
     enabled: !!user.info?.permissions.some(
       (a) => a === Permission["quality-moderation"],

frontend/src/asyncs/app.ts

@@ -1,4 +1,3 @@
-import axios, { AxiosResponse } from "axios"
 import { APP_DETAILS } from "../env"
 import { Appstream } from "../types/Appstream"
 
@@ -13,16 +12,14 @@ export async function getAppsInfo(
   const responses = await Promise.allSettled(
     appIds.map(async (id) => ({
       id,
-      response: await axios
-        .get<Appstream>(`${APP_DETAILS(id, locale)}`)
-        .catch(() => {
-          return {
-            data: {
-              id: id,
-              name: id,
-            } as Appstream,
-          } as AxiosResponse<Appstream>
-        }),
+      response: await fetch(`${APP_DETAILS(id, locale)}`).catch(() => {
+        return {
+          data: {
+            id: id,
+            name: id,
+          } as Appstream,
+        }
+      }),
     })),
   )
 

frontend/src/asyncs/login.ts

@@ -3,9 +3,11 @@ import { Dispatch } from "react"
 import { LOGIN_PROVIDERS_URL } from "../env"
 import { APIResponseError } from "../types/API"
 import { UserStateAction } from "../types/Login"
-import { AxiosResponse } from "axios"
 import { UserInfo } from "src/codegen/model/userInfo"
-import { getUserinfoAuthUserinfoGet } from "src/codegen"
+import {
+  getUserinfoAuthUserinfoGet,
+  getUserinfoAuthUserinfoGetResponse,
+} from "src/codegen"
 
 /**
  * Performs the callback POST request to check 3rd party authentication
@@ -63,10 +65,10 @@ export async function getUserData(
   dispatch({ type: "loading" })
 
   // On network error just assume user state is unchanged
-  let res: AxiosResponse<UserInfo, any>
+  let res: getUserinfoAuthUserinfoGetResponse
   try {
     // Gets data for user with current session cookie
-    res = await getUserinfoAuthUserinfoGet({ withCredentials: true })
+    res = await getUserinfoAuthUserinfoGet({ credentials: "include" })
 
     // Assuming a bad status indicates unchanged user state
     // A no content status response indicates the user is not logged in