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,6 +1,6 @@
 import * as React from 'react';
-import { LaunchProfileQuery } from '../../generated/graphql';
 import './styles.css';
+import { LaunchProfileQuery } from './__generated__/LaunchProfileQuery';
 
 interface Props {
   data: LaunchProfileQuery;

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]);