Apollo OdysseyでGraphQL(のApolloによる実装)を完全に理解したい

git clone https://github.com/apollographql/odyssey-lift-off-part1

📦 odyssey-lift-off-part1
 ┣ 📂 client
 ┃ ┣ 📂 public
 ┃ ┣ 📂 src
 ┃ ┣ 📄 README.md
 ┃ ┣ 📄 package.json
 ┣ 📂 server
 ┃ ┣ 📂 src
 ┃ ┃ ┣ 📄 index.js
 ┃ ┣ 📄 README.md
 ┃ ┣ 📄 package.json
 ┣ 📂 final
 ┃ ┣ 📂 client
 ┃ ┣ 📂 server
 ┗ 📄 README.md

npm install && npm start

npm install && npm start

"""graphql
オブジェクトの説明など
ブロック記法
"""
type SpaceCat {
  "フィールドの説明など"
  name: String!
  # これはコメント
  age: Int
}

"A track is a group of Modules that teaches about a specific topic"
type Track {
  id: ID!
  title: String!
  author: Author!
  thumbnail: String
  length: Int
  modulesCount: Int
}

"Author of a complete Track or a Module"
type Author {
  id: ID!
  name: String!
  photo: String
}

type Query {
  "Get tracks array for homepage grid"
  tracksForHome: [Track!]!
}

import { gql } from 'apollo-server';

const typeDefs = gql`
  type Query {
    "Get tracks array for homepage grid"
    tracksForHome: [Track!]!
  }

  "A track is a group of Modules that teaches about a specific topic"
  type Track {
    id: ID!
    "The track's title"
    title: String!
    "The track's main author"
    author: Author!
    "The track's main illustration to display in track card or track page detail"
    thumbnail: String
    "The track's approximate length to complete, in minutes"
    length: Int
    "The number of modules this track contains"
    modulesCount: Int
  }

  "Author of a complete Track"
  type Author {
    id: ID!
    "Author's first and last name"
    name: String!
    "Author's profile picture url"
    photo: String
  }
`;

export { typeDefs };

import { ApolloServer } from 'apollo-server';
import { typeDefs } from './schema.js';

const server = new ApolloServer({typeDefs});

server.listen().then(() => {
  console.log(`
    🚀  Server is running!
    🔉  Listening on port 4000
    📭  Query at http://localhost:4000
  `);
});

❯ npm start

> catstronauts-server-complete@1.0.0 start
> nodemon src/index

[nodemon] 2.0.6
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node src/index.js`

    🚀  Server is running!
    🔉  Listening on port 4000
    📭  Query at http://localhost:4000

npm install graphql @apollo/client

import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000',
  cache: new InMemoryCache(),
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <GlobalStyles />
    <Pages />
  </ApolloProvider>,
  document.getElementById('root')
);

import React from 'react';
import ReactDOM from 'react-dom';
import GlobalStyles from './styles';
import Pages from './pages';
import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000',
  cache: new InMemoryCache(),
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <GlobalStyles />
    <Pages />
  </ApolloProvider>,
  document.getElementById('root')
);

const TRACKS = gql`
  query getTracks {
    tracksForHome {
      id
      title
      thumbnail
      length
      modulesCount
      author {
        name
        photo
      }
    }
  }
`;

const Tracks = () => {
  const {loading, error, data} = useQuery(TRACKS);

  if (loading) return 'Loading...';

  if (error) return `Error! ${error.message}`;

  return <Layout grid>{JSON.stringify(data)}</Layout>;
};

const Tracks = () => {
  const {loading, error, data} = useQuery(TRACKS);

  if (loading) return 'Loading...';

  if (error) return `Error! ${error.message}`;

- return <Layout grid>{JSON.stringify(data)}</Layout>;
+ return (
+   <Layout grid>
+    {data?.tracksForHome?.map(track => (
+       <TrackCard key={track.id} track={track} />
+     ))}
+   </Layout>
+ );
};

const QueryResult = ({loading, error, data, children}) => {
  if (error) {
    return <p>ERROR: {error.message}</p>;
  }
  if (loading) {
    return (
      <SpinnerContainer>
        <LoadingSpinner data-testid="spinner" size="large" theme="grayscale" />
      </SpinnerContainer>
    );
  }
  if (!data) {
    return <p>Nothing to show...</p>;
  }
  if (data) {
    return children;
  }
};

const Tracks = () => {
  const { loading, error, data } = useQuery(TRACKS);

- if (loading) return 'Loading...';
-
- if (error) return `Error! ${error.message}`;
-
  return (
    <Layout grid>
+     <QueryResult error={error} loading={loading} data={data}>
        {data?.tracksForHome?.map((track) => (
          <TrackCard key={track.id} track={track} />
        ))}
+     </QueryResult>
    </Layout>
  );
};

import { gql, useQuery } from '@apollo/client';
import React from 'react';
import { Layout, QueryResult } from '../components';
import TrackCard from '../containers/track-card';

const TRACKS = gql`
  query TracksForHome {
    tracksForHome {
      id
      length
      modulesCount
      thumbnail
      title
      author {
        name
        id
        photo
      }
    }
  }
`;

/**
 * クエリ（TRACKS）の実行結果をuseQueryで取得して一覧表示する画面
 */
const Tracks = () => {
  const { loading, error, data } = useQuery(TRACKS);

  return (
    <Layout grid>
      <QueryResult error={error} loading={loading} data={data}>
        {data?.tracksForHome?.map((track) => (
          <TrackCard key={track.id} track={track} />
        ))}
      </QueryResult>
    </Layout>
  );
};

export default Tracks;

git clone https://github.com/apollographql/odyssey-lift-off-part2

npm install && npm start

npm install && npm start

GET   /tracks
GET   /track/:id
PATCH /track/:id
GET   /track/:id/modules
GET   /author/:id
GET   /module/:id

[
  {
    "id": "c_0",
    "thumbnail": "https://res.cloudinary.com/dety84pbu/image/upload/v1598465568/nebula_cat_djkt9r.jpg",
    "topic": "Cat-stronomy",
    "authorId": "cat-1",
    "title": "Cat-stronomy, an introduction",
    "description": "Curious to learn what Cat-stronomy is all about? Explore the planetary and celestial alignments and how they have affected our space missions.",
    "numberOfViews": 0,
    "createdAt": "2018-09-10T07:13:53.020Z",
    "length": 2377,
    "modulesCount": 10,
    "modules": ["l_0", "l_1", "l_2", "l_3", "l_4", "l_5", "l_6", "l_7", "l_8", "l_9"]
  },
  {...},
]

type Track {
  id: ID!
  title: String!
  author: Author!
  thumbnail: String
  length: Int
  modulesCount: Int
}

{
  "id": "cat-1",
  "name": "Henri, le Chat Noir",
  "photo": "https://images.unsplash.com/photo-1442291928580-fb5d0856a8f1?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzA0OH0"
}

type Author {
  id: ID!
  name: String!
  photo: String
}

fetch('apiUrl/tracks').then(function (response) {
  // do something with our tracks JSON
});

npm install apollo-datasource-rest

  "main": "src/index.js",
+ "type": "module",

import { RESTDataSource } from 'apollo-datasource-rest';

export class TrackAPI extends RESTDataSource {
  // ...
}

export class TrackAPI extends RESTDataSource {
  constructor() {
    super();
    this.baseURL = 'https://odyssey-lift-off-rest-api.herokuapp.com/';
  }
}

export class TrackAPI extends RESTDataSource {
  constructor() {
    super();
    this.baseURL = 'https://odyssey-lift-off-rest-api.herokuapp.com/';
  }

  getTracksForHome() {
    return this.get('tracks');
  }

  getAuthor(authorId) {
    return this.get(`author/${encodeURIComponent(authorId)}`);
  }
}

type Query {
  tracksForHome: [Track!]!
}

const resolvers = {
  Query: {
    tracksForHome: (parent, args, context, info) => {},
  }
}

const resolvers = {
  Query: {
    // トラックを全件抽出し、一覧ページに表示するデータを格納して戻す
    tracksForHome: (_, __, {dataSources}) => {
      return dataSources.trackAPI.getTracksForHome(); 
    }
  }
};

const resolvers = {
  Query: {
    tracksForHome: (_, __, { dataSources }) => {
      return dataSources.trackAPI.getTracksForHome();
    },
  },
  Track: {
    author: ({ authorId }, _, { dataSources }) => {
      return dataSources.trackAPI.getAuthor(authorId);
    },
  },
};

export { resolvers };

import { resolvers } from './resolvers';

const server = new ApolloServer({
  typeDefs,
  resolvers,
});

const server = new ApolloServer({
  typeDefs,
  resolvers,
  dataSources: () => {
    return {
      trackAPI: new TrackAPI(),
    };
  },
});

{
  "errors": [
    {
      "message": "Cannot query field \"numberOfViews\" on type \"Track\".",
      "extensions": {
        "code": "GRAPHQL_VALIDATION_FAILED",
        "exception": {
          "stacktrace": [
            "GraphQLError: Cannot query field \"numberOfViews\" on type \"Track\".",
            "...省略..."
          ]
        }
      }
    }
  ]
}

git clone https://github.com/apollographql/odyssey-lift-off-part3

npm install && npm start

npm install && npm start

  type Track {
    id: ID!
    "The track's title"
    title: String!
    "The track's main Author"
    author: Author!
    "The track's illustration to display in track card or track page detail"
    thumbnail: String
    "The track's approximate length to complete, in minutes"
    length: Int
    "The number of modules this track contains"
    modulesCount: Int
+   "The track's complete description, can be in Markdown format"
+   description: String
+   "The number of times a track has been viewed"
+   numberOfViews: Int
+   "The track's complete array of Modules"
+   modules: [Module!]!
  }

"A Module is a single unit of teaching. Multiple Modules compose a Track"
type Module {
  id: ID!
  "The Module's title"
  title: String!
  "The Module's length in minutes"
  length: Int
}

missions(to: String, scheduled: Boolean): [Mission!]

  type Query {
    "Query to get tracks array for the homepage grid"
    tracksForHome: [Track!]!
+   "Fetch a specific track, provided a track's ID"
+   track(id: ID!): Track
  }

{
  "id": "c_0",
  "thumbnail": "https://res.cloudinary.com/dety84pbu/image/upload/v1598465568/nebula_cat_djkt9r.jpg",
  "topic": "Cat-stronomy",
  "authorId": "cat-1",
  "title": "Cat-stronomy, an introduction",
  "description": "Curious to learn what Cat-stronomy is all about? Explore the planetary and celestial alignments and how they have affected our space missions.",
  "numberOfViews": 28,
  "numberOfLikes": 0,
  "createdAt": "2018-09-10T07:13:53.020Z",
  "length": 2377,
  "modulesCount": 10,
  "modules": [
    "l_0",
    "l_1",
    "l_2",
    "l_3",
    "l_4",
    "l_5",
    "l_6",
    "l_7",
    "l_8",
    "l_9"
  ]
}

class TrackAPI extends RESTDataSource {
  constructor() {
    super();
    // the Catstronauts catalog is hosted on this server
    this.baseURL = 'https://odyssey-lift-off-rest-api.herokuapp.com/';
  }

  getTracksForHome() {
    return this.get('tracks');
  }

  getAuthor(authorId) {
    return this.get(`author/${authorId}`);
  }

+ getTrack(trackId) {
+   return this.get(`track/${trackId}`);
+ }
}

const resolvers = {
  Query: {
    // returns an array of Tracks that will be used to populate the homepage grid of our web client
    tracksForHome: (_, __, { dataSources }) => {
      return dataSources.trackAPI.getTracksForHome();
    },
+   // get a single track by ID, for the track page
+   track: (_, { id }, { dataSources }) => {
+     return dataSources.trackAPI.getTrack(id);
+   },
  },
  Track: {
    author: ({ authorId }, _, { dataSources }) => {
      return dataSources.trackAPI.getAuthor(authorId);
    },
  },
};

[
  {
    "id": "l_0",
    "title": "Exploring Time and Space",
    "trackId": "c_0",
    "authorId": "cat-1",
    "topic": "Cat-stronomy",
    "length": 258,
    "content": "# Procul spolioque nondum\n## Quis canibus\nLorem markdownum navis ab sibi aurum tantique tantusque quam clamorque radiis e\nnocte tutus. Fatorum nec vaga sinistrae silvis! Virgo nunc anxius strata, vos\nmore murmure! Ait et efflant cultos.\n> Ait at lanigerosve Caenis rigida, in ictus luctu quem. Arbitrium moribundo\n> cuncta. Exsul volucresque natos, aut nimia labitur.\nFlores vidi maxima et Booten, veluti Bybli, bis est? Indigetes huc illa habitant\nilla aequore vera? Esse unum undique, pedem flammaeque dedit bracchia equorum,\nsola deseruit temone: ab vidit, o cultu, errat? Et evanida terrore atra nati\nflorem fluminaque si solitum vulnus murmure? Scopulos atque, et quam fuitque\nmembra nobilitate populi.\n## Quo ramos adiectura\nEgo et et Leuconoe sole, an ceu ira caeli ab altera. Athos clamato amor sic\ncruorem Acheloe tantum solito, vir sonat fronde corpus, abit nocendo amplexus.\nFrondes in cervix communis certe aquarum, in atria, qui suus, quantaque tulit.\nExemplum ardentibus habebat: ac habebit spiritus non pater restituit vide. Oris\nore. Lacerti est lignum non. Est quodque querenda lenita, una Pario, vim inquit\ncingens Eridanus! Hac qui quaecumque tigno.\n## Piceae secunda gratamque haliaeetus proceres adsimulavit Ixiona\nQuas demissaque salutet habent aether, Latios pius Perseus adspicit, eris cruor\ninfelix ventis. Virgo tela solum, colebat ferat.\n- Nepotum nec Luna utilis\n- Pennis odit matres\n- Nec ad ursi est sequatur\n- Auras arbor qui monet relinquit natusque a\n- Diuque ignarus dextroque satyri\nNymphae Bubasides Cyclopum se frigore! Tandem saepe quoque virtute, ut et\nBacchica mensor, mea quae dedit, avidamque.",
    "videoUrl": "https://youtu.be/ImudUVWINXo"
  },
  ...

class TrackAPI extends RESTDataSource {
  constructor() {
    super();
    // the Catstronauts catalog is hosted on this server
    this.baseURL = 'https://odyssey-lift-off-rest-api.herokuapp.com/';
  }

  getTracksForHome() {
    return this.get('tracks');
  }

  getAuthor(authorId) {
    return this.get(`author/${authorId}`);
  }

  getTrack(trackId) {
    return this.get(`track/${trackId}`);
  }

+ getTrackModules(trackId) {
+   return this.get(`track/${trackId}/modules`);
+ }
}

const resolvers = {
  Query: {
    // returns an array of Tracks that will be used to populate the homepage grid of our web client
    tracksForHome: (_, __, { dataSources }) => {
      return dataSources.trackAPI.getTracksForHome();
    },
    // get a single track by ID, for the track page
    track: (_, { id }, { dataSources }) => {
      return dataSources.trackAPI.getTrack(id);
    },
  },
  Track: {
    author: ({ authorId }, _, { dataSources }) => {
      return dataSources.trackAPI.getAuthor(authorId);
    },
+   modules: ({ id }, _, { dataSources }) => {
+     return dataSources.trackAPI.getTrackModules(id);
+   },
  },
};

query GetTrack($trackId: ID!) {
  track(id: $trackId) {
    id
    title
  }
}

query Track($trackId: ID!) {
  track(id: $trackId) {
    id
    title
    author {
      id
      name
      photo
    }
    thumbnail
    length
    modulesCount
    description
    numberOfViews
    modules {
      id
      title
      length
    }
  }
}

  import React, { Fragment } from 'react';
  import { Router } from '@reach/router';
  /** importing our pages */
  import Tracks from './tracks';
+ import { Track } from './track';

  export default function Pages() {
    return (
      <Router primary={false} component={Fragment}>
        <Tracks path="/" />
+       <Track path="/track/:trackId" />
      </Router>
    );
  }

const GET_TRACK = gql`
  query GetTrack($trackId: ID!) {
    track(id: $trackId) {
      id
      title
      author {
        id
        name
        photo
      }
      thumbnail
      length
      modulesCount
      description
      numberOfViews
      modules {
        id
        title
        length
      }
    }
  }
`;

  export const Track = ({ trackId }) => {
+   const { loading, error, data } = useQuery(GET_TRACK, {
+     variables: { trackId },
+   });

    return <Layout></Layout>;
  };

  import React from 'react';
  import { gql, useQuery } from '@apollo/client';
  import { Layout, QueryResult } from '../components';
+ import TrackDetail from '../components/track-detail';

  const GET_TRACK = gql`
    query GetTrack($trackId: ID!) {
      track(id: $trackId) {
        id
        title
        author {
          id
          name
          photo
        }
        thumbnail
        length
        modulesCount
        description
        numberOfViews
        modules {
          id
          title
          length
        }
      }
    }
  `;

  export const Track = ({ trackId }) => {
    const { loading, error, data } = useQuery(GET_TRACK, {
      variables: { trackId },
    });

-   return <Layout></Layout>;
+   return (
+     <Layout>
+       <QueryResult error={error} loading={loading} data={data}>
+         <TrackDetail track={data?.track} />
+       </QueryResult>
+     </Layout>
+   );
  };

+ import { Link } from '@reach/router';

  // ...

- const CardContainer = styled('div')({
+ const CardContainer = styled(Link)({
    borderRadius: 6,
    color: colors.text,
    backgroundSize: 'cover',
    backgroundColor: 'white',
    // ...

  const TrackCard = ({ track }) => {
-   const { title, thumbnail, author, length, modulesCount } = track;
+   const { title, thumbnail, author, length, modulesCount, id } = track;

    return (
-     <CardContainer>
+     <CardContainer to={`/track/${id}`}>
        <CardContent>

git clone https://github.com/apollographql/odyssey-lift-off-part4

npm install && npm start

npm install && npm start

type Mutation {
  addSpacecat(name: String!): Spacecat
}