Query from SpaceX and (horribly) display on screen

apollo-client.ts

@@ -0,0 +1,10 @@
+import { ApolloClient, InMemoryCache } from "@apollo/client";
+
+const API_URL = 'https://api.spacex.land/graphql/';
+
+const client = new ApolloClient({
+  uri: API_URL,
+  cache: new InMemoryCache(),
+});
+
+export default client;

package.json

@@ -9,15 +9,26 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@apollo/client": "^3.7.3",
+    "@chakra-ui/core": "^0.8.0",
+    "@chakra-ui/react": "^2.4.3",
     "@next/font": "13.0.7",
     "@types/node": "18.11.15",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",
     "eslint": "8.29.0",
     "eslint-config-next": "13.0.7",
+    "graphql": "^16.6.0",
     "next": "13.0.7",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "4.9.4"
+  },
+  "devDependencies": {
+    "@emotion/react": "11.10.5",
+    "@emotion/core": "10.x",
+    "@emotion/styled": "^10.x",
+    "emotion-theming": "^10.x",
+    "framer-motion": "^7.10.0"
   }
 }

pages/home.tsx

@@ -0,0 +1,22 @@
+import { Flex, Heading, Text } from '@chakra-ui/core';
+import { Card, CardHeader, CardBody } from '@chakra-ui/react'
+import { launch, launches } from '../types/launch';
+
+
+export default function Home(data: launches) {
+  return (
+    <Flex justifyContent="center" alignItems="center" flexWrap="wrap">
+      {data.launches.map((launch: launch) => (
+        <Card key={launch.id} p={4} width={{ base: '100%', md: '50%' }}>
+          <CardHeader>
+            <Heading>Mission: {launch.mission_name}</Heading>
+          </CardHeader>
+          <CardBody>
+            <Text>Launch site: {launch.launch_site.site_name}</Text>
+            <Text>Rocket type: {launch.rocket.rocket_type}</Text>
+          </CardBody>
+        </Card>
+      ))}
+    </Flex>
+  );
+}

pages/index.ts

@@ -0,0 +1,36 @@
+import gql from 'graphql-tag';
+import client from "../apollo-client";
+import { launches } from '../types/launch';
+import Home from './home';
+
+export async function getStaticProps() {
+  const query = gql`
+  {
+    launches {
+      id
+      launch_site {
+        site_id
+        site_name
+      }
+      rocket {
+        rocket_name
+        rocket_type
+      }
+      mission_name
+    }
+  }  
+  `;
+
+  const { data } = await client.query({ query });
+
+
+  return  {
+    props: {
+      launches: data.launches,
+    },
+  };
+}
+
+export default function HomePage(launches: launches) {
+  return Home(launches);
+}