Add graphql-let for typesafe GraphQL queries.

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": ["graphql-let/babel"]
+}

.gitignore

@@ -33,3 +33,6 @@ yarn-error.log*
 # vercel
 .vercel
 .env.local
+*.graphql.d.ts
+*.graphqls.d.ts
+/.cache

.graphql-let.yml

@@ -0,0 +1,11 @@
+schema: 
+  - https://graphql.contentful.com/content/v1/spaces/${CONTENTFUL_SPACE_ID}:
+      headers:
+        Authorization: "Bearer ${CONTENTFUL_ACCESS_TOKEN}"
+documents:
+  - '**/*.graphql'
+  - '**/*.tsx'
+plugins:
+  - typescript-operations
+  - typescript-react-apollo
+cacheDir: .cache

.prettierignore

@@ -1,4 +1,6 @@
 node_modules/
 .next/
 out/
-package-lock.json
+package-lock.json
+.cache/
+**/*.graphql.d.ts

components/hero.tsx

@@ -5,7 +5,7 @@ import { LinkButton } from './button';
 
 interface HeroProps {
   image: {
-    url: string;
+    url?: string;
   };
   title: string;
   subtext: string;
@@ -20,7 +20,7 @@ function Hero({ image, title, subtext, buttonText, buttonLink }: HeroProps) {
     <div className="relative flex flex-col w-full h-128 xl:h-192">
       {/* Hero image */}
       <Image
-        src={url}
+        src={url} // TODO: fallback for missing urls.
         loader={imageLoader}
         layout="fill"
         objectFit="cover"

next.config.js

@@ -3,4 +3,19 @@ module.exports = {
   images: {
     domains: ['images.ctfassets.net'],
   },
+  webpack(config, options) {
+    config.module.rules.push({
+      test: /\.(tsx|graphql)$/,
+      exclude: /node_modules/,
+      use: [options.defaultLoaders.babel, { loader: 'graphql-let/loader' }],
+    });
+
+    config.module.rules.push({
+      test: /\.ya?ml$/,
+      type: 'json',
+      use: 'yaml-loader',
+    });
+
+    return config;
+  },
 };