TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two - PT 6

Andrew.Kaluba · 21.Февраль.2020 20:48:54

QUERYING FOR LISTING DATA

Our GraphQL API is now prepared to have us query the listing field to get information for a certain listing. With that said, we’ll begin working on our React client application and create the listing page for when a user visits the /listing/:id route of our app.

The listing page is to show details for a certain listing as well as provide the capability for a user to book the listing within certain dates. The user is to see details of a listing which consist of the listing image, location, title, host, description. For a viewer that views one of their own listings, they’ll be able to also see the bookings that have been made for the listing.

The component breakdown of the /listing/:id page is as follows:

The UI that encompasses the details of the listing is to be a component labeled <ListingDetails /> .
The <ListingBookings /> component is to show a paginated list of bookings for the listing. The <ListingBookings /> component will only be shown to a user that is viewing their own listing.
The capability to create a booking will be part of the <ListingCreateBooking /> component. When the user selects dates in this component and clicks the Request to Book button, a modal will be shown where the user can confirm their booking and provide payment information. We’ll create this modal at a later point in the course.

Here’s how we’ll want the UI for the page shown in the /listing/:id route to look.

When the query for listing information is in the loading state, the <PageSkeleton /> component (which we’ve created before) will be shown.

LISTING QUERY

To begin, we’ll first create the GraphQL query document for the root-level listing field in our API. We’ll create an index.ts file within a Listing/ folder under the src/lib/graphql/queries/ folder.

client/
  src/
    lib/
      graphql/
        queries/
          // ...
          Listing/
            index.ts
        // ...
    // ...

We’ll export the soon to be created LISTING GraphQL const document in the src/lib/graphql/queries/index.ts file.

client/src/lib/graphql/queries/index.ts

export * from "./Listing";

In the src/lib/graphql/queries/Listing/index.ts file, we’ll set-up the LISTING GraphQL const document. The Listing query function will accept an id argument of the listing that is to be queried, a bookingsPage argument to reference the page the user is viewing for their bookings list, and a limit argument to constitute the amount of booking objects to be shown for a single page.

We’ll query for every possible field within the Listing GraphQL object in our API.

client/src/lib/graphql/queries/Listing/index.ts

import { gql } from "apollo-boost";

export const LISTING = gql`
  query Listing($id: ID!, $bookingsPage: Int!, $limit: Int!) {
    listing(id: $id) {
      id
      title
      description
      image
      host {
        id
        name
        avatar
        hasWallet
      }
      type
      address
      city
      bookings(limit: $limit, page: $bookingsPage) {
        total
        result {
          id
          tenant {
            id
            name
            avatar
          }
          checkIn
          checkOut
        }
      }
      bookingsIndex
      price
      numOfGuests
    }
  }
`;

With the GraphQL listing query defined in our client, we’ll auto-generate the corresponding TypeScript definitions of the variables and data related to our new query.

We’ll first run the codegen:schema script to re-generate the schema.json file in our client app.

npm run codegen:schema

We’ll then run the codegen:generate script to re-generate the TypeScript definitions for our GraphQL queries and mutations.

npm run codegen:generate

MAKING THE LISTING QUERY

We’ll now build the /listing/:id page in our app. The <Listing /> section component is the component that’s shown in the /listing/:id route. Within the <Listing /> component, we’ll make the query for listing information similar to how we made the query for user information in the /user/:id page.

In the src/sections/Listing/index.tsx file, we’ll import the useQuery Hook from React Apollo. We’ll import the LISTING GraphQL document from the src/lib/graphql/queries/ folder. We’ll also import the autogenerated TypeScript definitions for the data and variables for the LISTING GraphQL document.

import React from "react";
import { useQuery } from "@apollo/react-hooks";
import { LISTING } from "../../lib/graphql/queries";
import {
  Listing as ListingData,
  ListingVariables
} from "../../lib/graphql/queries/Listing/__generated__/Listing";

export const Listing = () => {
  return <h2>Listing</h2>;
};

We’ll run the listing query when the <Listing /> component first mounts with the useQuery Hook and attempt to return the loading , data , and error states of our query result. We’ll also pass in the autogenerated type definitions for the data to be returned from the query and the variables that are expected to be passed in.

import React from "react";
import { useQuery } from "@apollo/react-hooks";
import { LISTING } from "../../lib/graphql/queries";
import {
  Listing as ListingData,
  ListingVariables
} from "../../lib/graphql/queries/Listing/__generated__/Listing";

export const Listing = () => {
  const { loading, data, error } = useQuery<ListingData, ListingVariables>(LISTING);

  return <h2>Listing</h2>;
};

The listing query we make here expects us to pass a few variables such as the id of the listing that is to be queried, the bookingsPage the user is viewing, and the number of bookings to be returned in a page (in other words the limit of our pagination in the bookings list).

The value of the id variable will come from the route that the user accesses. We’ll get the id param from the route from the match prop available in this component since this component is rendered from React Router’s <Route /> component.

We’ll import the RouteComponentProps interface from react-router-dom . We’ll declare the interface for the params in our route as MatchParams which will consist of an id of type string . We’ll access the match prop available in the <Listing /> component and set the id variable of our query as match.params.id .

import React from "react";
import { RouteComponentProps } from "react-router-dom";
import { useQuery } from "@apollo/react-hooks";
import { LISTING } from "../../lib/graphql/queries";
import {
  Listing as ListingData,
  ListingVariables
} from "../../lib/graphql/queries/Listing/__generated__/Listing";

interface MatchParams {
  id: string;
}

export const Listing = ({ match }: RouteComponentProps<MatchParams>) => {
  const { loading, data, error } = useQuery<ListingData, ListingVariables>(LISTING, {
    variables: {
      id: match.params.id
    }
  });

  return <h2>Listing</h2>;
};

React Router has now introduced Hooks! Be sure to check out the React Router Hooks video in Module 15 of the course to highlight how the above can be done with Hooks.

When the <Listing /> component renders for the first time, the page number for the bookings list should be 1 (i.e. should be on the first page of results). To instantiate this value and have it tracked as component state, we’ll import the useState Hook from React. We’ll use the useState Hook at the top of the <Listing /> component function and destruct a bookingsPage state value and a setBookingsPage() function we’ll use to update the bookingsPage state value. We’ll initialize the state bookingsPage value as 1 and declare it as the value of the bookingsPage variable in our query.

import React, { useState } from "react";
import { RouteComponentProps } from "react-router-dom";
import { useQuery } from "@apollo/react-hooks";
import { LISTING } from "../../lib/graphql/queries";
import {
  Listing as ListingData,
  ListingVariables
} from "../../lib/graphql/queries/Listing/__generated__/Listing";

interface MatchParams {
  id: string;
}

export const Listing = ({ match }: RouteComponentProps<MatchParams>) => {
  const [bookingsPage, setBookingsPage] = useState(1);

  const { loading, data, error } = useQuery<ListingData, ListingVariables>(LISTING, {
    variables: {
      id: match.params.id,
      bookingsPage
    }
  });

  return <h2>Listing</h2>;
};

The limit variable in our query is how many bookings we’ll want to be limited for a certain page. We’ll want to have a maximum of three bookings to show for a single page so we’ll define a constant above our <Listing /> component labeled PAGE_LIMIT and provide it a value of 3 . We’ll then declare the value of the limit variable in our query to be PAGE_LIMIT .

import React, { useState } from "react";
import { RouteComponentProps } from "react-router-dom";
import { useQuery } from "@apollo/react-hooks";
import { LISTING } from "../../lib/graphql/queries";
import {
  Listing as ListingData,
  ListingVariables
} from "../../lib/graphql/queries/Listing/__generated__/Listing";

interface MatchParams {
  id: string;
}

const PAGE_LIMIT = 3;

export const Listing = ({ match }: RouteComponentProps<MatchParams>) => {
  const [bookingsPage, setBookingsPage] = useState(1);

  const { loading, data, error } = useQuery<ListingData, ListingVariables>(LISTING, {
    variables: {
      id: match.params.id,
      bookingsPage,
      limit: PAGE_LIMIT
    }
  });

  return <h2>Listing</h2>;
};

While our listing query is in flight (i.e. the query is in the loading state), we’ll want to show the shared <PageSkeleton /> component we’ve set up before. We’ll import the <PageSkeleton /> component from the src/lib/components/ folder and we’ll say that when the listing query is loading, we’ll want the <PageSkeleton /> component to show. We’ll wrap the rendered <PageSkeleton /> component with Ant Design’s <Content /> component from <Layout /> so we’ll be sure to import the <Layout /> component from Ant Design and destruct <Content /> from it.

import React, { useState } from "react";
import { RouteComponentProps } from "react-router-dom";
import { useQuery } from "@apollo/react-hooks";
import { Layout } from "antd";
import { PageSkeleton } from "../../lib/components";
import { LISTING } from "../../lib/graphql/queries";
import {
  Listing as ListingData,
  ListingVariables
} from "../../lib/graphql/queries/Listing/__generated__/Listing";

interface MatchParams {
  id: string;
}

const { Content } = Layout;
const PAGE_LIMIT = 3;

export const Listing = ({ match }: RouteComponentProps<MatchParams>) => {
  const [bookingsPage, setBookingsPage] = useState(1);

  const { loading, data, error } = useQuery<ListingData, ListingVariables>(LISTING, {
    variables: {
      id: match.params.id,
      bookingsPage,
      limit: PAGE_LIMIT
    }
  });

  if (loading) {
    return (
      <Content className="listings">
        <PageSkeleton />
      </Content>
    );
  }

  return <h2>Listing</h2>;
};

If our listing query was to error, we’ll want to show the <PageSkeleton /> component with an error banner placed above. With that said, we’ll import the shared <ErrorBanner /> component we have in the src/lib/components/ folder and render it in addition to <PageSkeleton /> if our query was to ever error.

We’ll place a description of the error along the lines of "This listing may not exist or we've encountered an error. Please try again soon."

import React, { useState } from "react";
import { RouteComponentProps } from "react-router-dom";
import { useQuery } from "@apollo/react-hooks";
import { Layout } from "antd";
import { ErrorBanner, PageSkeleton } from "../../lib/components";
import { LISTING } from "../../lib/graphql/queries";
import {
  Listing as ListingData,
  ListingVariables
} from "../../lib/graphql/queries/Listing/__generated__/Listing";

interface MatchParams {
  id: string;
}

const { Content } = Layout;
const PAGE_LIMIT = 3;

export const Listing = ({ match }: RouteComponentProps<MatchParams>) => {
  const [bookingsPage, setBookingsPage] = useState(1);

  const { loading, data, error } = useQuery<ListingData, ListingVariables>(LISTING, {
    variables: {
      id: match.params.id,
      bookingsPage,
      limit: PAGE_LIMIT
    }
  });

  if (loading) {
    return (
      <Content className="listings">
        <PageSkeleton />
      </Content>
    );
  }

  if (error) {
    return (
      <Content className="listing">
        <ErrorBanner description="This listing may not exist or we've encountered an error. Please try again soon." />
        <PageSkeleton />
      </Content>
    );
  }

  return <h2>Listing</h2>;
};

If our listing query was to finish loading and no error arises, this would mean our query has resolved and data should now be available. At this point, we’ll get the listing object from data and the bookings object from listing .

import React, { useState } from "react";
import { RouteComponentProps } from "react-router-dom";
import { useQuery } from "@apollo/react-hooks";
import { Layout } from "antd";
import { ErrorBanner, PageSkeleton } from "../../lib/components";
import { LISTING } from "../../lib/graphql/queries";
import {
  Listing as ListingData,
  ListingVariables
} from "../../lib/graphql/queries/Listing/__generated__/Listing";

interface MatchParams {
  id: string;
}

const { Content } = Layout;
const PAGE_LIMIT = 3;

export const Listing = ({ match }: RouteComponentProps<MatchParams>) => {
  const [bookingsPage, setBookingsPage] = useState(1);

  const { loading, data, error } = useQuery<ListingData, ListingVariables>(LISTING, {
    variables: {
      id: match.params.id,
      bookingsPage,
      limit: PAGE_LIMIT
    }
  });

  if (loading) {
    return (
      <Content className="listings">
        <PageSkeleton />
      </Content>
    );
  }

  if (error) {
    return (
      <Content className="listings">
        <ErrorBanner description="This listing may not exist or we've encountered an error. Please try again soon!" />
        <PageSkeleton />
      </Content>
    );
  }

  const listing = data ? data.listing : null;
  const listingBookings = listing ? listing.bookings : null;

  return <h2>Listing</h2>;
};

With the expected data available when our query resolves successfully, we can begin to build the child components in our UI and surface the information we want. In the next lesson, we’ll build out the child <ListingDetails /> and <ListingBookings /> components and render it in this parent <Listing /> component.

LISTINGDETAILS & LISTINGBOOKINGS

A sample of the mock listingBookings object used in this lesson can be found - here.

With the <Listing /> section component now prepared in making our GraphQL query for listing information, we can begin building the UI we want to show in the <Listing /> component.

`<LISTINGDETAILS />`

We’ll first look to build the <ListingDetails /> component responsible in surfacing listing information to the user viewing the page. We’ll create this <ListingDetails /> component within a folder kept in the components/ folder of the src/sections/Listing/ directory.

client/
  // ...
  src/
    sections/
      // ...
      Listing/
        components/
          ListingDetails/
            index.tsx
        index.ts
      // ...
    // ...
  // ...

Within the src/sections/Listing/components/index.ts file, we’ll export the <ListingDetails /> component we’ll shortly create.

client/src/sections/Listing/components/index.ts

export * from "./ListingDetails";

In the <ListingDetails /> component file, we’ll import a few things we’ll need.

We’ll import the React library.
We’ll import the <Link /> component from React Router.
We’ll import all the components we’ll need from Ant Design - <Avatar /> , <Divider /> , <Icon /> , <Tag /> , and <Typography /> .
We’ll import the autogenerated typescript definitions of the data that is to be returned from the listing query.
We’ll import the iconColor constant we have in the src/lib/utils/ folder of our client project.

import React from "react";
import { Link } from "react-router-dom";
import { Avatar, Divider, Icon, Tag, Typography } from "antd";
import { Listing as ListingData } from "../../../../lib/graphql/queries/Listing/__generated__/Listing";
import { iconColor } from "../../../../lib/utils";

We’ve seen most of these Ant Design components before.

<Avatar /> helps display an avatar image.
<Divider /> is an element that can help divide sections.
<Icon /> gives us the ability to use one of the many Ant Design Icons.
<Typography /> helps allow us to use the Text , Title , and Paragraph elements from Ant Design.
We haven’t used the <Tag /> component before. The <Tag /> component is an element that can help display tags to categorize information or for presentational purposes.

We’re importing the autogenerated Listing data typescript definition of our listing query since we’ll use it to type check the prop we expect this <ListingDetails /> component is to receive. We expect this component to receive the listing object from the data returned from the query since we’ll use it to display the listing information in our UI. As a result, we’ll define the Props interface for the <ListingDetails /> component and state that this component is to receive a listing prop. The type of the listing prop will be the type of the listing object from the GraphQL data returned and we’ll use Typescript’s capability of indexed access types (i.e. lookup types) to achieve this.

import React from "react";
import { Link } from "react-router-dom";
import { Avatar, Divider, Icon, Tag, Typography } from "antd";
import { Listing as ListingData } from "../../../../lib/graphql/queries/Listing/__generated__/Listing";
import { iconColor } from "../../../../lib/utils";

interface Props {
  listing: ListingData["listing"];
}

We can then begin building the UI for the <ListingDetails /> component. First, we’ll destruct the <Paragraph /> and <Title /> components from <Typography /> . We’ll construct the function for the <ListingDetails /> component and state that it expects a listing prop. At the beginning of our component function, we’ll destruct all the properties we’ll need from the listing prop - title , description , image , type , address , city , numOfGuests , and host .

import React from "react";
import { Link } from "react-router-dom";
import { Avatar, Divider, Icon, Tag, Typography } from "antd";
import { Listing as ListingData } from "../../../../lib/graphql/queries/Listing/__generated__/Listing";
import { iconColor } from "../../../../lib/utils";

interface Props {
  listing: ListingData["listing"];
}

const { Paragraph, Title } = Typography;

export const ListingDetails = ({ listing }: Props) => {
  const { title, description, image, type, address, city, numOfGuests, host } = listing;
};

We’ll now build the template of the <ListingDetails /> component. The template will have:

A <div /> element with a background-image style applied to it that is to display the listing image.
A <Paragraph /> section to display the listing city , address , and title .
A section to display the host avatar and name .
Finally, we’ll have a section to highlight the listing type , the numOfGuests the listing can have, and the description of the listing.

We’ll be sure to use the iconColor constant we have imported to color the one <Icon /> element we have in <ListingDetails /> .

For the section that displays host information, we’ll wrap the section with React Router’s <Link /> component and make it have a target path of /user/${host.id} - which will be the user page of the host.

With all this implemented, the <ListingDetails /> component file will look like the following:

client/src/sections/Listing/components/ListingDetails/index.tsx

import React from "react";
import { Link } from "react-router-dom";
import { Avatar, Divider, Icon, Tag, Typography } from "antd";
import { Listing as ListingData } from "../../../../lib/graphql/queries/Listing/__generated__/Listing";
import { iconColor } from "../../../../lib/utils";

interface Props {
  listing: ListingData["listing"];
}

const { Paragraph, Title } = Typography;

export const ListingDetails = ({ listing }: Props) => {
  const { title, description, image, type, address, city, numOfGuests, host } = listing;

  return (
    <div className="listing-details">
      <div
        style={{ backgroundImage: `url(${image})` }}
        className="listing-details__image"
      />

      <div className="listing-details__information">
        <Paragraph type="secondary" ellipsis className="listing-details__city-address">
          <Link to={`/listings/${city}`}>
            <Icon type="environment" style={{ color: iconColor }} /> {city}
          </Link>
          <Divider type="vertical" />
          {address}
        </Paragraph>
        <Title level={3} className="listing-details__title">
          {title}
        </Title>
      </div>

      <Divider />

      <div className="listing-details__section">
        <Link to={`/user/${host.id}`}>
          <Avatar src={host.avatar} size={64} />
          <Title level={2} className="listing-details__host-name">
            {host.name}
          </Title>
        </Link>
      </div>

      <Divider />

      <div className="listing-details__section">
        <Title level={4}>About this space</Title>
        <div className="listing-details__about-items">
          <Tag color="magenta">{type}</Tag>
          <Tag color="magenta">{numOfGuests} Guests</Tag>
        </div>
        <Paragraph ellipsis={{ rows: 3, expandable: true }}>{description}</Paragraph>
      </div>
    </div>
  );
};

The markup and actual styling of how we build our UI isn’t the important takeaway here. You’re welcome to build the presentation UI as you please and this is the setting/styling we’ve come up with. The key takeaway is how we receive the necessary data from the parent component and display it in <ListingDetails /> .

Let’s now render the <ListingDetails /> component in the <Listing /> component. In the <Listing /> section component file, we’ll import the child <ListingDetails /> component from the adjacent components/ folder.

import { ListingDetails } from "./components";

We’ll also import the <Col /> and <Row /> components from Ant Design with which we’ll use to help structure how our child components will appear in <Listing /> .

client/src/sections/Listing/index.tsx

import { Col, Layout, Row } from "antd";

We’ll construct an element labeled listingDetailsElement that is to be the <ListingDetails /> component if listing information from GraphQL data is available. Otherwise, listingDetailsElement will be null .

// ...

export const Listing = ({ match }: RouteComponentProps<MatchParams>) => {
  const [bookingsPage, setBookingsPage] = useState(1);

  const { loading, data, error } = useQuery<ListingData, ListingVariables>(LISTING, {
    variables: {
      id: match.params.id,
      bookingsPage,
      limit: PAGE_LIMIT
    }
  });

  // ...

  const listing = data ? data.listing : null;
  const listingBookings = listing ? listing.bookings : null;

  const listingDetailsElement = listing ? <ListingDetails listing={listing} /> : null;

  return <h2>Listing</h2>;
};

We’ll have the return() statement of the <Listing /> component return the <Content /> component as a wrapper. Within, we’ll use the <Row /> element from Ant Design to constitute that we’re to display a row of columns and apply some gutter spacing. We’ll construct a column that’ll take the entire width in extra-small viewports and a little more than half the width from large viewports (and upwards), and display the listingDetailsElement .

// ...

export const Listing = ({ match }: RouteComponentProps<MatchParams>) => {
  const [bookingsPage, setBookingsPage] = useState(1);

  const { loading, data, error } = useQuery<ListingData, ListingVariables>(LISTING, {
    variables: {
      id: match.params.id,
      bookingsPage,
      limit: PAGE_LIMIT
    }
  });

  // ...

  const listing = data ? data.listing : null;
  const listingBookings = listing ? listing.bookings : null;

  const listingDetailsElement = listing ? <ListingDetails listing={listing} /> : null;

  return (
    <Content className="listings">
      <Row gutter={24} type="flex" justify="space-between">
        <Col xs={24} lg={14}>
          {listingDetailsElement}
        </Col>
      </Row>
    </Content>
  );
};

Ant Design’s grid column structure work with 24 columns. By specifying an xs value of 24 for a column, we’ll want the element within to take the entire width of the viewport (i.e. all the columns). By specifying a lg value of 14 for a column, we say we want the listingDetailsElement to take a little more than half the viewport spacing.

With our server and client Webpack server running, let’s launch our app in the browser and navigate to a valid /listing/:id route.

http://localhost:3000/listing/5d378db94e84753160e08b48
# id of mock listing is 5d378db94e84753160e08b48

We’ll see the <ListingDetails /> component which presents information about the listing image, the city the listing is located in, its address, the title, the host information, and so on.

If we try to navigate to a certain /listing/:id route in which the listing id is invalid (i.e. doesn’t really exist), the query would fail and we’re notified of this in our UI.

Great!

`<LISTINGBOOKINGS />`

Since this section involves copying code over from the <UserBookings /> component and making changes after, it might be easier to follow along by watching the lesson video for this section first.

With the listing details prepared and shown in the /listing/:id page, we’ll now set up the small component that’s responsible for displaying a paginated list of bookings that exist within a listing. The bookings section to be shown in the /listing/:id page will be very similar to the bookings or listings section shown in the /user/:id page. As a result, we won’t spend as much time building the paginated list of bookings but look to replicate what was done in the /user/:id page.

First, we’ll create a ListingBookings/ folder that is to have an index.tsx file in the src/sections/Listing/components/ folder.

client/
  // ...
  src/
    sections/
      // ...
      Listing/
        components/
          ListingBookings/
            index.tsx
          // ...
        index.ts
      // ...
    // ...
  // ...

In the src/sections/Listing/components/index.ts file, we’ll have the soon to be created <ListingBookings /> component exported from the adjacent ListingBookings/ folder.

client/src/sections/Listing/components/index.ts

export * from "./ListingBookings";

In the src/sections/Listing/components/ListingBookings/index.tsx file, we’ll copy over the contents of the <UserBookings /> component (from the src/sections/User/components/UserBookings/index.tsx file) and make the necessary changes.

We’ll import some other components we’ll need from Ant Design such as the <Avatar /> and <Divider /> components.