feat: show query devtools in development env only

Author: icyleaf

src/hooks/useGateway.js

@@ -6,6 +6,10 @@ export function useGateway() {
 
   useEffect(() => {
     const baseURL = process.env.ZEALOT_GATEWAY_URL;
+    if (!baseURL) {
+      console.warn("ZEALOT_GATEWAY_URL is not defined");
+      return;
+    }
 
     if (baseURL) {
       try {

src/pages/checkout/index.js

@@ -7,16 +7,6 @@ import { useHistory } from "@docusaurus/router";
 import { usePaddleClient } from "@site/src/hooks/usePaddlePrices";
 import { useGateway } from "@site/src/hooks/useGateway";
 
-export default function CheckoutPage() {
-  return (
-    <Layout title="Checkout">
-      <BrowserOnly fallback={<div>Loading checkout...</div>}>
-        {() => <CheckoutClient />}
-      </BrowserOnly>
-    </Layout>
-  );
-}
-// 客户端渲染的主体组件，避免 SSR 触发 window 报错
 function CheckoutClient() {
   const { i18n } = useDocusaurusContext();
   const history = useHistory();
@@ -97,7 +87,7 @@ function CheckoutClient() {
   return (
     <main className="flex flex-col items-center px-4 py-8 gap-10">
       <div className="checkout-container"></div>
-      {(query.isLoading || !query.data) && <div>Loading your orders...</div>}
+      {(query.isLoading || !query.data) && <div>Preparing checkout ...</div>}
       {query.isError && <div>Error loading your orders.</div>}
 
       {query.data && query.data.orders.length > 0 && (
@@ -116,3 +106,13 @@ function CheckoutClient() {
     </main>
   );
 }
+
+export default function CheckoutPage() {
+  return (
+    <Layout title="Checkout">
+      <BrowserOnly fallback={<div>Loading checkout...</div>}>
+        {() => <CheckoutClient />}
+      </BrowserOnly>
+    </Layout>
+  );
+}

src/theme/Root/index.js

@@ -4,10 +4,11 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 const queryClient = new QueryClient();
 
 export default function Root({ children }) {
+  const env = process.env.ENVIRONMENT || "production";
   return (
     <QueryClientProvider client={queryClient}>
       <>{children}</>
-      <ReactQueryDevtools initialIsOpen={false} />
+      {env === "development" && <ReactQueryDevtools initialIsOpen={false} />}
     </QueryClientProvider>
   );
 }