CIS-2450 Lab #9: GraphQL

Reading: ???

GraphQL is a query language for retrieving data from a graph of data items. Queries have the form of a tree where the root of the tree represents the start node in the graph of where the query begins. For example, the SpaceX GraphQL URL is: https://main--spacex-l4uc6p.apollographos.net/graphql. To get information about the rockets SpaceX uses, one can make a query such as:

{
    rockets(limit: 10) {
        id
        name
        boosters
        description
    }
}

This returns a JSON object containing an array of records (objects) about the rockets SpaceX uses. The limit of 10 puts an upper bound on the number of returned records. If you are querying a large dataset and only want a sample, it is a good idea to include such a limit (if the scheme provides for it).

Part 1: Modifying the App

We will use your work from Lab #8 as a starting point for this lab. We won't need the calendar component so you can either remove it or ignore it.

Install the Apollo GraphQL client using npm.

    npm install @apollo/client graphql

Create a component SpaceX by adding the following to the main application JSX file:

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

const client = new ApolloClient({
  uri: 'https://main--spacex-l4uc6p.apollographos.net/graphql',
  cache: new InMemoryCache(),
});

const QUERY = gql`
  query GetRockets {
    rockets(limit: 10) {
        id
        name
        boosters
        description
    }
  }
`;

const Rockets = () => {
  const { loading, error, data } = useQuery(QUERY);

  if (loading) return <p>Loading...</p>
  if (error) return <p>Error: {error.message}</p>

  return (
    <ul>
      {data.rockets.map(rocket => (
        <li key={rocket.id}>{rocket.name}</li>
      ))}
    </ul>
  );
};

You will also need to modify the JSX returned from the App component to include an invocation of the Rockets component. Be sure to wrap that invocation in an ApolloProvider pseudo-element with the client prop set to {client}.

Verify that you can get your application to show a list of SpaceX's rockets (by name).

Modify the query to ask for the following information about SpaceX's ships:
```
    {
      ships(limit: 10) {
        home_port
        id
        image
        name
      }
    }
  
```
Modify your application so it formats this information as a table. Note that the image is a URL to a picture of the ship (but it might be null), so make it a clickable link in the table.

Part 2: ???

There is no Part 2 for this lab, currently. This part is a placeholder for possible future additions to the lab.

Submission

Create a zip archive of your skeletal project, including the dist folder, and submit that archive to Canvas.