enhance(openapi-react-weatherbit): improve caching

examples/openapi-react-weatherbit/.gitignore

@@ -22,3 +22,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+src/mesh/sdk.generated.ts

examples/openapi-react-weatherbit/mesh-operations/getDailyForecastByCoordinates.query.graphql

@@ -1,19 +1,12 @@
-query getDailyForecastByCoordinates(
-  $lat: Float!,
-  $lng: Float!,
-  $apiKey: String!
-) {
-  forecastData: getForecastDailyLatLatLonLon(
-    lat: $lat, 
-    lon: $lng,
-  	key: $apiKey){
-    	cityName
-    	countryCode
-    	stateCode
-    	data{
-        datetime
-        minTemp
-        maxTemp
-      }
+query getDailyForecastByCoordinates($lat: Float!, $lng: Float!, $apiKey: String!) {
+  forecastData: getForecastDailyLatequalToLatLonLon(lat: $lat, lon: $lng, key: $apiKey) {
+    cityName
+    countryCode
+    stateCode
+    data {
+      datetime
+      minTemp
+      maxTemp
+    }
   }
 }

examples/openapi-react-weatherbit/package.json

@@ -17,7 +17,8 @@
     "@graphql-mesh/runtime": "0.10.11",
     "@graphql-mesh/openapi": "0.11.5",
     "@graphql-mesh/cache-localforage": "0.4.31",
-    "@graphql-mesh/merger-stitching": "0.7.11",
+    "@graphql-mesh/merger-bare": "0.8.1",
+    "@graphql-mesh/transform-cache": "0.8.11",
     "graphql-subscriptions": "1.1.0",
     "graphql": "15.4.0"
   },
@@ -26,6 +27,7 @@
     "ts-node": "9.0.0"
   },
   "scripts": {
+    "prestart": "yarn generate-sdk",
     "start": "SKIP_PREFLIGHT_CHECK=true react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",

examples/openapi-react-weatherbit/scripts/generateSdk.ts

@@ -10,9 +10,10 @@ async function main() {
   });
   const sdkCode = await generateSdk(mesh.schema, {
     operations: [join(process.cwd(), './mesh-operations/**/*.graphql')],
+    'flatten-types': true,
   });
   mesh.destroy();
-  writeFileSync(join(process.cwd(), './src/mesh/sdk.ts'), sdkCode, 'utf8');
+  writeFileSync(join(process.cwd(), './src/mesh/sdk.generated.ts'), sdkCode, 'utf8');
 }
 
 main().catch(error => {

examples/openapi-react-weatherbit/src/App.tsx

@@ -1,19 +1,21 @@
 import React, { useEffect, useState } from 'react';
 import './App.css';
 import { useMeshSdk } from './mesh/useMeshSdk';
-import { GetDailyForecastByCoordinatesQuery } from './mesh/sdk';
+import { GetDailyForecastByCoordinatesQuery } from './mesh/sdk.generated';
 
 function App() {
   const [forecastData, setForecastData] = useState<GetDailyForecastByCoordinatesQuery['forecastData']>();
 
   const sdk = useMeshSdk();
 
   useEffect(() => {
-      sdk?.getDailyForecastByCoordinates({
+    sdk
+      ?.getDailyForecastByCoordinates({
         lat: 41.01384,
-        lng:  28.94966,
+        lng: 28.94966,
         apiKey: '88dcfb1c31054b3b8841d753f3245da9',
-      }).then(({ forecastData }) => {
+      })
+      .then(({ forecastData }) => {
         setForecastData(forecastData);
       });
   }, [sdk]);
@@ -31,17 +33,16 @@ function App() {
             </tr>
           </thead>
           <tbody>
-          {forecastData?.data?.map(dailyData => (
-            <tr key={dailyData?.datetime}>
-              <td>{dailyData?.datetime}</td>
-              <td>{dailyData?.minTemp}</td>
-              <td>{dailyData?.maxTemp}</td>
-            </tr>
-          ))}
+            {forecastData?.data?.map(dailyData => (
+              <tr key={dailyData?.datetime}>
+                <td>{dailyData?.datetime}</td>
+                <td>{dailyData?.minTemp}</td>
+                <td>{dailyData?.maxTemp}</td>
+              </tr>
+            ))}
           </tbody>
         </table>
-        <ul>
-        </ul>
+        <ul></ul>
       </header>
     </div>
   );

examples/openapi-react-weatherbit/src/mesh/getMeshInstance.ts

@@ -1,9 +1,10 @@
 import { getMesh } from '@graphql-mesh/runtime';
 import OpenAPIHandler from '@graphql-mesh/openapi';
-import StitchingMerger from '@graphql-mesh/merger-stitching';
+import BareMerger from '@graphql-mesh/merger-bare';
 import { MeshPubSub } from '@graphql-mesh/types';
 import { KeyValueCache } from '@graphql-mesh/types';
 import { PubSub } from 'graphql-subscriptions';
+import CacheTransform from '@graphql-mesh/transform-cache';
 
 export function getMeshInstance({ cache }: { cache: KeyValueCache }) {
   const pubsub = new PubSub() as MeshPubSub;
@@ -19,10 +20,25 @@ export function getMeshInstance({ cache }: { cache: KeyValueCache }) {
             source: 'https://www.weatherbit.io/static/swagger.json',
           },
         }),
+        transforms: [
+          new CacheTransform({
+            config: [
+              {
+                field: 'Query.getForecastDailyLatequalToLatLonLon',
+                invalidate: {
+                  ttl: 10 * 60 * 60 * 24, // Cache daily data for 24 hours
+                },
+              },
+            ],
+            cache,
+            pubsub,
+            apiName: 'Weatherbit',
+          }),
+        ],
       },
     ],
     cache,
     pubsub,
-    merger: StitchingMerger,
+    merger: BareMerger, // we can use BareMerger since we don't need a real merger at all
   });
 }

examples/openapi-react-weatherbit/src/mesh/useMeshSdk.ts

@@ -1,6 +1,6 @@
 import { getMeshInstance } from './getMeshInstance';
 import LocalforageCache from '@graphql-mesh/cache-localforage';
-import { getSdk, Sdk } from './sdk';
+import { getSdk, Sdk } from './sdk.generated';
 import { useEffect, useState } from 'react';
 
 export function useMeshSdk() {

examples/openapi-react-weatherbit/tsconfig.json

@@ -13,7 +13,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react",
+    "noFallthroughCasesInSwitch": true
   },
   "include": ["src"]
 }