Example using apollo codegen to use dynamic fragments

Author: KATT

__generated__/globalTypes.ts

@@ -18,11 +18,13 @@
     "typescript": "3.4.3"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start:react-scripts": "react-scripts start",
+    "start:codegen-apollo-watch": "yarn codegen --watch",
+    "start": "run-p start:*",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "codegen": "graphql-codegen --config codegen.yml"
+    "codegen": "apollo client:codegen --target typescript --endpoint=https://spacexdata.herokuapp.com/graphql"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -34,10 +36,8 @@
     "not op_mini all"
   ],
   "devDependencies": {
-    "@graphql-codegen/cli": "^1.1.0",
-    "@graphql-codegen/typescript": "1.1.0",
-    "@graphql-codegen/typescript-operations": "1.1.0",
-    "@graphql-codegen/typescript-react-apollo": "1.1.0",
-    "dotenv-cli": "^2.0.0"
+    "apollo": "^2.13.0",
+    "dotenv-cli": "^2.0.0",
+    "npm-run-all": "^4.1.5"
   }
 }

package.json

@@ -1,23 +1,23 @@
 import * as React from 'react';
-import { LaunchListQuery } from '../../generated/graphql';
 import './styles.css';
+import { LaunchListQuery } from './__generated__/LaunchListQuery';
 
 export interface OwnProps {
   handleIdChange: (newId: number) => void;
 }
 
 interface Props extends OwnProps {
-  data: LaunchListQuery;
+  launches: LaunchListQuery['launches'];
 }
 
 const className = 'LaunchList';
 
-const LaunchList: React.FC<Props> = ({ data, handleIdChange }) => (
+const LaunchList: React.FC<Props> = ({ launches, handleIdChange }) => (
   <div className={className}>
     <h3>Launches</h3>
     <ol className={`${className}__list`}>
-      {!!data.launches &&
-        data.launches.map(
+      {!!launches &&
+        launches.map(
           (launch, i) =>
             !!launch && (
               <li

src/components/LaunchList/LaunchList.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
-import { useLaunchListQuery } from '../../generated/graphql';
 import LaunchList, { OwnProps } from './LaunchList';
+import { useQuery } from 'react-apollo-hooks';
+import { QUERY_LAUNCH_LIST } from './query'
+import { LaunchListQuery } from './__generated__/LaunchListQuery';
 
 const LaunchListContainer = (props: OwnProps) => {
-  const { data, error, loading } = useLaunchListQuery();
+  const { data, error, loading } = useQuery<LaunchListQuery>(QUERY_LAUNCH_LIST);
 
   if (loading) {
     return <div>Loading...</div>;
@@ -13,7 +15,7 @@ const LaunchListContainer = (props: OwnProps) => {
     return <div>ERROR</div>;
   }
 
-  return <LaunchList data={data} {...props} />;
+  return <LaunchList launches={data.launches} {...props} />;
 };
 
 export default LaunchListContainer;

src/components/LaunchList/__generated__/LaunchList.ts

@@ -1,7 +1,7 @@
 import gql from 'graphql-tag';
 
 export const QUERY_LAUNCH_LIST = gql`
-  query LaunchList {
+  query LaunchListQuery {
     launches {
       flight_number
       mission_name

src/components/LaunchList/__generated__/LaunchListQuery.ts

@@ -1,37 +1,37 @@
 import * as React from 'react';
-import { LaunchProfileQuery } from '../../generated/graphql';
 import './styles.css';
+import { LaunchProfileQuery } from './__generated__/LaunchProfileQuery';
 
 interface Props {
-  data: LaunchProfileQuery;
+  launch: LaunchProfileQuery['launch'];
 }
 
 const className = 'LaunchProfile';
 
-const LaunchProfile: React.FC<Props> = ({ data }) => {
-  if (!data.launch) {
+const LaunchProfile: React.FC<Props> = ({ launch }) => {
+  if (!launch) {
     return <div>No launch available</div>;
   }
 
   return (
     <div className={className}>
       <div className={`${className}__status`}>
-        <span>Flight {data.launch.flight_number}: </span>
-        {data.launch.launch_success ? (
+        <span>Flight {launch.flight_number}: </span>
+        {launch.launch_success ? (
           <span className={`${className}__success`}>Success</span>
         ) : (
           <span className={`${className}__failed`}>Failed</span>
         )}
       </div>
       <h1 className={`${className}__title`}>
-        {data.launch.mission_name}
-        {data.launch.rocket &&
-          ` (${data.launch.rocket.rocket_name} | ${data.launch.rocket.rocket_type})`}
+        {launch.mission_name}
+        {launch.rocket &&
+          ` (${launch.rocket.rocket_name} | ${launch.rocket.rocket_type})`}
       </h1>
-      <p className={`${className}__description`}>{data.launch.details}</p>
-      {!!data.launch.links && !!data.launch.links.flickr_images && (
+      <p className={`${className}__description`}>{launch.details}</p>
+      {!!launch.links && !!launch.links.flickr_images && (
         <div className={`${className}__image-list`}>
-          {data.launch.links.flickr_images.map(image =>
+          {launch.links.flickr_images.map(image =>
             image ? <img src={image} className={`${className}__image`} key={image} /> : null,
           )}
         </div>

src/components/LaunchList/index.tsx

@@ -1,15 +1,18 @@
 import * as React from 'react';
-import { useLaunchProfileQuery } from '../../generated/graphql';
 import LaunchProfile from './LaunchProfile';
+import { useQuery } from 'react-apollo-hooks';
+import { LaunchProfileQuery, LaunchProfileQueryVariables } from './__generated__/LaunchProfileQuery';
+import { QUERY_LAUNCH_PROFILE } from './query';
 
 interface OwnProps {
   id: number;
 }
 
 const LaunchProfileContainer = ({ id }: OwnProps) => {
-  const { data, error, loading, refetch } = useLaunchProfileQuery({
+  const { data, error, loading, refetch } = useQuery<LaunchProfileQuery, LaunchProfileQueryVariables>(QUERY_LAUNCH_PROFILE, {
     variables: { id: String(id) },
   });
+
   React.useEffect(() => {
     refetch();
   }, [id]);
@@ -26,7 +29,7 @@ const LaunchProfileContainer = ({ id }: OwnProps) => {
     return <div>Select a flight from the panel</div>;
   }
 
-  return <LaunchProfile data={data} />;
+  return <LaunchProfile launch={data.launch} />;
 };
 
 export default LaunchProfileContainer;