Merge pull request #2188 from zeitgeistpm/fix-cms-data-glitch

Improve market metadata overides from glitching on load
zeitgeistpm · Jan 18, 2024 · f4ee5da · f4ee5da
2 parents 3256d03 + 61180a2
commit f4ee5da
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 29 deletions.
diff --git a/lib/hooks/queries/useInfiniteMarkets.ts b/lib/hooks/queries/useInfiniteMarkets.ts
@@ -1,19 +1,24 @@
 import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
-import { IndexerContext, isIndexedSdk, Market } from "@zeitgeistpm/sdk";
-import { MarketOrderByInput, MarketWhereInput } from "@zeitgeistpm/indexer";
-import { getOutcomesForMarkets } from "lib/gql/markets-list/outcomes-for-markets";
-import { getCurrentPrediction } from "lib/util/assets";
+import {
+  MarketOrderByInput,
+  MarketStatus,
+  MarketWhereInput,
+  ScoringRule,
+} from "@zeitgeistpm/indexer";
+import { IndexerContext, Market, isIndexedSdk } from "@zeitgeistpm/sdk";
+import { hiddenMarketIds } from "lib/constants/markets";
 import {
   MarketsListFiltersQuery,
   MarketsOrderBy,
 } from "lib/types/market-filter";
-import { marketsRootQuery } from "./useMarket";
-import { useSdkv2 } from "../useSdkv2";
 import { MarketOutcomes } from "lib/types/markets";
-import { MarketStatus } from "@zeitgeistpm/indexer";
-import { hiddenMarketIds } from "lib/constants/markets";
+import { getCurrentPrediction } from "lib/util/assets";
+import { useSdkv2 } from "../useSdkv2";
+
 import { marketMetaFilter } from "./constants";
-import { ScoringRule } from "@zeitgeistpm/indexer";
+import { marketsRootQuery } from "./useMarket";
+import { marketCmsDatakeyForMarket } from "./cms/useMarketCmsMetadata";
+import { CmsMarketMetadata } from "lib/cms/markets";
 
 export const rootKey = "markets-filtered";
 
@@ -40,6 +45,7 @@ export const useInfiniteMarkets = (
   filters?: MarketsListFiltersQuery,
 ) => {
   const [sdk, id] = useSdkv2();
+  const queryClient = useQueryClient();
 
   const limit = 12;
   const fetcher = async ({
@@ -101,6 +107,14 @@ export const useInfiniteMarkets = (
       order: orderByMap[orderBy] as MarketOrderByInput, //todo: fix this type once sdk updated,
     });
 
+    for (const market of markets) {
+      const cmsData: CmsMarketMetadata | undefined = queryClient.getQueryData(
+        marketCmsDatakeyForMarket(market.marketId),
+      );
+      if (cmsData?.question) market.question = cmsData.question;
+      if (cmsData?.imageUrl) market.img = cmsData.imageUrl;
+    }
+
     const resMarkets: Array<QueryMarketData> = markets.map((market) => {
       const outcomes: MarketOutcomes = market.assets.map((asset, index) => {
         return {
@@ -126,7 +140,6 @@ export const useInfiniteMarkets = (
     };
   };
 
-  const queryClient = useQueryClient();
   const query = useInfiniteQuery({
     queryKey: [id, rootKey, filters, orderBy, withLiquidityOnly],
     queryFn: fetcher,
@@ -149,5 +162,6 @@ export const useInfiniteMarkets = (
     },
     staleTime: 10_000,
   });
+
   return query;
 };
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -97,9 +97,8 @@ export async function getStaticProps() {
 
   for (const market of [...featuredMarkets, ...trendingMarkets]) {
     const cmsData = marketsCmsData.find((m) => m.marketId === market.marketId);
-    if (cmsData?.imageUrl) {
-      market.img = cmsData.imageUrl;
-    }
+    if (cmsData?.question) market.question = cmsData.question;
+    if (cmsData?.imageUrl) market.img = cmsData.imageUrl;
   }
 
   return {

diff --git a/pages/markets/[marketid].tsx b/pages/markets/[marketid].tsx
@@ -133,20 +133,11 @@ export async function getStaticProps({ params }) {
   let resolutionTimestamp: string | undefined;
   if (market) {
     const { timestamp } = await getResolutionTimestamp(client, market.marketId);
-
     resolutionTimestamp = timestamp ?? undefined;
-  }
-
-  if (cmsMetadata?.imageUrl) {
-    market.img = cmsMetadata?.imageUrl;
-  }
-
-  if (cmsMetadata?.question) {
-    market.question = cmsMetadata?.question;
-  }
 
-  if (cmsMetadata?.description) {
-    market.description = cmsMetadata?.description;
+    if (cmsMetadata?.imageUrl) market.img = cmsMetadata?.imageUrl;
+    if (cmsMetadata?.question) market.question = cmsMetadata?.question;
+    if (cmsMetadata?.description) market.description = cmsMetadata?.description;
   }
 
   return {

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ES2020",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -18,16 +22,26 @@
     "useDefineForClassFields": true,
     "baseUrl": "./",
     "incremental": true,
-    "downlevelIteration": true
+    "downlevelIteration": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
   "include": [
     "next-env.d.ts",
     "declarations.d.ts",
     "**/*.ts",
     "**/*.tsx",
     "**/*.jsx",
-    "**/*.js"
+    "**/*.js",
+    ".next/types/**/*.ts"
   ],
   "filesGlobs": [],
-  "exclude": ["node_modules", "cypress", "scripts"]
+  "exclude": [
+    "node_modules",
+    "cypress",
+    "scripts"
+  ]
 }