feat: bundle graphql data in with source code

fluidity-money · May 21, 2024 · 90c611c · 90c611c
1 parent 83f0364
commit 90c611c
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 12 deletions.
diff --git a/web/src/app/PopulateQueryCache.tsx b/web/src/app/PopulateQueryCache.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { useEffect } from "react";
+import { queryClient } from "@/context";
+import { AllDataQuery } from "@/gql/graphql";
+
+/**
+ * This component is used to populate the query cache with the data fetched from the server.
+ * To use this fetch the data from the server in a server component and pass it to this component.
+ */
+export default function PopulateQueryCache({
+  data,
+  featuresData,
+}: {
+  data: AllDataQuery;
+  featuresData: any;
+}) {
+  useEffect(() => {
+    // using the same query key as in useGraphql.tsx
+    queryClient.setQueryData(["graphql"], data);
+  }, [data]);
+
+  useEffect(() => {
+    // using the same query key as in useFeatureFlag.tsx
+    queryClient.setQueryData(["featureFlags"], featuresData);
+  }, [featuresData]);
+
+  return null;
+}
diff --git a/web/src/app/faucet/page.tsx b/web/src/app/faucet/page.tsx
@@ -27,6 +27,7 @@ const FaucetPage = () => {
     abi: faucet.abi,
     // @ts-expect-error
     functionName: "isMember",
+    // @ts-expect-error
     args: [address as Hash],
   });
 
@@ -38,7 +39,7 @@ const FaucetPage = () => {
       return;
     }
 
-    const hash = await writeContract({
+    const hash = writeContract({
       address: faucetAddress,
       abi: faucet.abi,
       functionName: "claimAmount",
@@ -58,7 +59,12 @@ const FaucetPage = () => {
         <h1 className={"w-full text-xs"}>Faucet</h1>
         <p>Request a random amount of test tokens ($FLY stakers only)</p>
         <img src="https://static.long.so/fly-stakers.jpg" />
-        <Button className={"w-full"} variant={"secondary"} onClick={onClick} disabled={!isStaker}>
+        <Button
+          className={"w-full"}
+          variant={"secondary"}
+          onClick={onClick}
+          disabled={!isStaker}
+        >
           Request
         </Button>
       </div>

diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
@@ -10,6 +10,11 @@ import { NavigationMenu } from "@/app/_layout/NavigationMenu";
 import { Inter } from "next/font/google";
 import { cn } from "@/lib/utils";
 import { FeatureFlagConfig } from "@/app/_layout/FeatureFlagConfig";
+import { useQueryClient } from "@tanstack/react-query";
+import request from "graphql-request";
+import { graphqlEndpoint } from "@/config/graphqlEndpoint";
+import { graphqlQuery } from "@/hooks/useGraphql";
+import PopulateQueryCache from "@/app/PopulateQueryCache";
 
 const title = "Long Tail AMM";
 
@@ -29,7 +34,7 @@ export const metadata: Metadata = {
     siteId: "",
     creator: "@superpositionso",
     creatorId: "",
-    images: [image]
+    images: [image],
   },
   openGraph: {
     title: "Long Tail AMM",
@@ -50,15 +55,27 @@ const inter = Inter({
   weight: ["400", "500"],
 });
 
-export default function RootLayout({
+export const dynamic = "force-static";
+
+export default async function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   const gitHash = process.env.GIT_HASH;
+
+  // make server-side requests for pre-fetching data
+  const data = await request(graphqlEndpoint, graphqlQuery);
+
+  const featuresDataRequest = await fetch(
+    "https://features.long.so/features.json",
+  );
+  const featuresData = await featuresDataRequest.json();
+
   return (
     <html lang="en">
       <Provider>
+        <PopulateQueryCache data={data} featuresData={featuresData} />
         <body
           className={cn("flex min-h-screen flex-col bg-white", inter.className)}
         >

diff --git a/web/src/app/stake/AllPools.tsx b/web/src/app/stake/AllPools.tsx
@@ -71,9 +71,16 @@ export const AllPoolsFragment = graphql(`
         }
       }
     }
-    liquidityOverTime {
+    tvlOverTime {
       daily
     }
+    liquidityOverTime {
+      daily {
+        fusdc {
+          valueScaled
+        }
+      }
+    }
     liquidityIncentives {
       valueUsd
     }

diff --git a/web/src/context/index.tsx b/web/src/context/index.tsx
@@ -10,7 +10,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { State, WagmiProvider } from "wagmi";
 
 // Setup queryClient
-const queryClient = new QueryClient();
+export const queryClient = new QueryClient();
 
 if (!projectId) throw new Error("Project ID is not defined");
 

diff --git a/web/src/gql/gql.ts b/web/src/gql/gql.ts
@@ -14,7 +14,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  */
 const documents = {
     "\n  fragment SwapFormFragment on SeawaterPool {\n    address\n    earnedFeesAPRFUSDC\n    earnedFeesAPRToken1\n    token {\n      address\n      decimals\n      name\n      symbol\n    }\n  }\n": types.SwapFormFragmentFragmentDoc,
-    "\n  fragment AllPoolsFragment on SeawaterPool {\n    address\n    token {\n      name\n    }\n    volumeOverTime {\n      daily {\n        fusdc {\n          valueScaled\n        }\n      }\n    }\n    tvlOverTime {\n      daily\n    }\n    liquidityIncentives {\n      valueUsd\n    }\n    superIncentives {\n      valueUsd\n    }\n  }\n": types.AllPoolsFragmentFragmentDoc,
+    "\n  fragment AllPoolsFragment on SeawaterPool {\n    address\n    token {\n      name\n    }\n    volumeOverTime {\n      daily {\n        fusdc {\n          valueScaled\n        }\n      }\n    }\n    tvlOverTime {\n      daily\n    }\n    liquidityOverTime {\n      daily {\n        fusdc {\n          valueScaled\n        }\n      }\n    }\n    liquidityIncentives {\n      valueUsd\n    }\n    superIncentives {\n      valueUsd\n    }\n  }\n": types.AllPoolsFragmentFragmentDoc,
     "\n  fragment SelectPrimeAssetFragment on SeawaterPool {\n    address\n    volumeOverTime {\n      daily {\n        fusdc {\n          valueUsd\n        }\n      }\n    }\n    token {\n      name\n      symbol\n      address\n    }\n  }\n": types.SelectPrimeAssetFragmentFragmentDoc,
     "\n  fragment ManagePoolFragment on SeawaterPool {\n    address\n    id\n    token {\n      symbol\n      name\n    }\n    liquidityIncentives {\n      valueScaled # TODO: we want a percentage here\n    }\n    superIncentives {\n      valueScaled # TODO: we want a percentage here\n    }\n    utilityIncentives {\n      amountGivenOut\n      maximumAmount\n    }\n    earnedFeesAPRFUSDC\n  }\n": types.ManagePoolFragmentFragmentDoc,
     "\n  fragment SwapExploreFragment on SeawaterPool {\n    token {\n      name\n      symbol\n      address\n    }\n    price\n  }\n": types.SwapExploreFragmentFragmentDoc,
@@ -44,7 +44,7 @@ export function graphql(source: "\n  fragment SwapFormFragment on SeawaterPool {
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment AllPoolsFragment on SeawaterPool {\n    address\n    token {\n      name\n    }\n    volumeOverTime {\n      daily {\n        fusdc {\n          valueScaled\n        }\n      }\n    }\n    tvlOverTime {\n      daily\n    }\n    liquidityIncentives {\n      valueUsd\n    }\n    superIncentives {\n      valueUsd\n    }\n  }\n"): (typeof documents)["\n  fragment AllPoolsFragment on SeawaterPool {\n    address\n    token {\n      name\n    }\n    volumeOverTime {\n      daily {\n        fusdc {\n          valueScaled\n        }\n      }\n    }\n    tvlOverTime {\n      daily\n    }\n    liquidityIncentives {\n      valueUsd\n    }\n    superIncentives {\n      valueUsd\n    }\n  }\n"];
+export function graphql(source: "\n  fragment AllPoolsFragment on SeawaterPool {\n    address\n    token {\n      name\n    }\n    volumeOverTime {\n      daily {\n        fusdc {\n          valueScaled\n        }\n      }\n    }\n    tvlOverTime {\n      daily\n    }\n    liquidityOverTime {\n      daily {\n        fusdc {\n          valueScaled\n        }\n      }\n    }\n    liquidityIncentives {\n      valueUsd\n    }\n    superIncentives {\n      valueUsd\n    }\n  }\n"): (typeof documents)["\n  fragment AllPoolsFragment on SeawaterPool {\n    address\n    token {\n      name\n    }\n    volumeOverTime {\n      daily {\n        fusdc {\n          valueScaled\n        }\n      }\n    }\n    tvlOverTime {\n      daily\n    }\n    liquidityOverTime {\n      daily {\n        fusdc {\n          valueScaled\n        }\n      }\n    }\n    liquidityIncentives {\n      valueUsd\n    }\n    superIncentives {\n      valueUsd\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */