added fragment

Author: mwarger

api/src/resolvers/resolvers.ts

@@ -11,7 +11,7 @@ const resolvers: {
 } = {
   Query: {
     // TODO: what possible resolvers exist?
-    hello: () => 'world',
+    hello: () => 'hello',
 
     nowPlaying(_parent, _args, context, _info) {
       return context.dataSources.movieDataSource.nowPlaying();

app/src/components/slider/MoviePoster.tsx

@@ -1,12 +1,13 @@
 import React, { useContext } from 'react';
 import cx from 'classnames';
 import { CarouselContext } from './CarouselContext';
+import { MovieFragmentFragment } from '../../generated/graphql';
 
 import './MoviePoster.scss';
 import FavoriteIcon from '@material-ui/icons/Favorite';
 
 type MoviePosterProps = {
-  movie: any; // TODO: use the fragment type
+  movie: MovieFragmentFragment; // TODO: use the fragment type
 };
 
 export function MoviePoster(props: MoviePosterProps) {

app/src/generated/graphql.tsx

@@ -99,18 +99,23 @@ export type ToggleFavoriteMutation = (
   )> }
 );
 
+export type MovieFragmentFragment = (
+  { __typename?: 'Movie' }
+  & Pick<Movie, 'id' | 'title' | 'overview' | 'poster_path' | 'backdrop_path' | 'favorite' | 'popularity'>
+  & { cast?: Maybe<Array<(
+    { __typename?: 'Credit' }
+    & Pick<Credit, 'name'>
+  )>> }
+);
+
 export type NowPlayingQueryVariables = Exact<{ [key: string]: never; }>;
 
 
 export type NowPlayingQuery = (
   { __typename?: 'Query' }
   & { nowPlaying?: Maybe<Array<(
     { __typename?: 'Movie' }
-    & Pick<Movie, 'id' | 'title' | 'overview' | 'poster_path' | 'backdrop_path' | 'favorite' | 'popularity'>
-    & { cast?: Maybe<Array<(
-      { __typename?: 'Credit' }
-      & Pick<Credit, 'name'>
-    )>> }
+    & MovieFragmentFragment
   )>> }
 );
 
@@ -121,15 +126,24 @@ export type PopularQuery = (
   { __typename?: 'Query' }
   & { popular?: Maybe<Array<(
     { __typename?: 'Movie' }
-    & Pick<Movie, 'id' | 'title' | 'overview' | 'poster_path' | 'backdrop_path' | 'favorite' | 'popularity'>
-    & { cast?: Maybe<Array<(
-      { __typename?: 'Credit' }
-      & Pick<Credit, 'name'>
-    )>> }
+    & MovieFragmentFragment
   )>> }
 );
 
-
+export const MovieFragmentFragmentDoc = gql`
+    fragment MovieFragment on Movie {
+  id
+  title
+  overview
+  poster_path
+  backdrop_path
+  favorite
+  popularity
+  cast {
+    name
+  }
+}
+    `;
 export const MovieByIdDocument = gql`
     query movieById($id: ID!) {
   movieById(id: $id) {
@@ -211,19 +225,10 @@ export type ToggleFavoriteMutationOptions = Apollo.BaseMutationOptions<ToggleFav
 export const NowPlayingDocument = gql`
     query nowPlaying {
   nowPlaying {
-    id
-    title
-    overview
-    poster_path
-    backdrop_path
-    favorite
-    popularity
-    cast {
-      name
-    }
+    ...MovieFragment
   }
 }
-    `;
+    ${MovieFragmentFragmentDoc}`;
 
 /**
  * __useNowPlayingQuery__
@@ -254,19 +259,10 @@ export type NowPlayingQueryResult = Apollo.QueryResult<NowPlayingQuery, NowPlayi
 export const PopularDocument = gql`
     query popular {
   popular {
-    id
-    title
-    overview
-    poster_path
-    backdrop_path
-    favorite
-    popularity
-    cast {
-      name
-    }
+    ...MovieFragment
   }
 }
-    `;
+    ${MovieFragmentFragmentDoc}`;
 
 /**
  * __usePopularQuery__

app/src/pages/graphql.ts

@@ -1,37 +1,35 @@
 import { gql } from '@apollo/client';
 
 // TODO: create fragment for movie object
+export const MOVIE_FRAGMENT = gql`
+  fragment MovieFragment on Movie {
+    id
+    title
+    overview
+    poster_path
+    backdrop_path
+    favorite
+    popularity
+    cast {
+      name
+    }
+  }
+`;
 
 export const NOW_PLAYING = gql`
   query nowPlaying {
     nowPlaying {
-      id
-      title
-      overview
-      poster_path
-      backdrop_path
-      favorite
-      popularity
-      cast {
-        name
-      }
+      ...MovieFragment
     }
   }
+  ${MOVIE_FRAGMENT}
 `;
 
 export const POPULAR = gql`
   query popular {
     popular {
-      id
-      title
-      overview
-      poster_path
-      backdrop_path
-      favorite
-      popularity
-      cast {
-        name
-      }
+      ...MovieFragment
     }
   }
+  ${MOVIE_FRAGMENT}
 `;