Build Example Mock Data to Test a GraphQL Server

To help us get started, we'll begin by introducing a mock data array of rental listings in this lesson. This will help us get started before we begin to address more appropriate data persistence.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Introducing mock listings
#

📝 The mock listings array used in this lesson can be found - here.
📝 This lesson's quiz can be found - here.
🗒️ Solutions for This lesson's quiz can be found - here.

Let's add a little functionality to our current minimal server. To get us started, we're going to introduce a mock array of data that we'll be able to use and manipulate before we talk about and address more appropriate data persistence.

We'll introduce this mock array in a listings.ts file within our src/ folder.

server/
  // ...
  src/
    index.ts
    listings.ts
  // ...

The mock data we hope to introduce is a collection of rental listings where each listing will have a listing title, image, address, price, rating, number of beds, number of baths, and permissible number of guests. Our mock array is to have three distinct listing objects. This is purely fake data, with fake addresses, and copyright-free to use images.

We'll create and export a const labeled listings that is to be this mock array, in the src/listings.ts file.

export const listings = [
  {
    id: "001",
    title: "Clean and fully furnished apartment. 5 min away from CN Tower",
    image:
      "https://res.cloudinary.com/tiny-house/image/upload/v1560641352/mock/Toronto/toronto-listing-1_exv0tf.jpg",
    address: "3210 Scotchmere Dr W, Toronto, ON, CA",
    price: 10000,
    numOfGuests: 2,
    numOfBeds: 1,
    numOfBaths: 2,
    rating: 5
  },
  {
    id: "002",
    title: "Luxurious home with private pool",
    image:
      "https://res.cloudinary.com/tiny-house/image/upload/v1560645376/mock/Los%20Angeles/los-angeles-listing-1_aikhx7.jpg",
    address: "100 Hollywood Hills Dr, Los Angeles, California",
    price: 15000,
    numOfGuests: 2,
    numOfBeds: 1,
    numOfBaths: 1,
    rating: 4
  },
  {
    id: "003",
    title: "Single bedroom located in the heart of downtown San Fransisco",
    image:
      "https://res.cloudinary.com/tiny-house/image/upload/v1560646219/mock/San%20Fransisco/san-fransisco-listing-1_qzntl4.jpg",
    address: "200 Sunnyside Rd, San Fransisco, California",
    price: 25000,
    numOfGuests: 3,
    numOfBeds: 2,
    numOfBaths: 2,
    rating: 3
  }
];

This lesson preview is part of the The newline Guide to Building Your First GraphQL Server with Node and TypeScript course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to The newline Guide to Building Your First GraphQL Server with Node and TypeScript, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course The newline Guide to Building Your First GraphQL Server with Node and TypeScript

  • [00:00 - 00:15] Let's add a little functionality to our current minimal server. To get us started, we're going to introduce a mock array of data that we'll use at manipulate before we start to talk and address more appropriate data persistence.

    [00:16 - 00:36] We'll introduce this mock array in a listings.ts file within our source folder. The mock data we hope to introduce is a collection of rental listings where each listing will have a listing title, image, address, price, etc.

    [00:37 - 00:51] We're going to provide this mock data array as part of the lesson documentation , so we're simply going to paste it in here for now. This mock array contains three distinct listing objects.

    [00:52 - 01:12] Each listing object has a unique identifier, a title, an image, an address, price, number of guests allowed, the number of beds, the number of baths, this listing accommodates, as well as a rating out of five. This is purely fake data with fake addresses and copyright free to use images.

    [01:13 - 01:44] When we hover over the listings variable, we can see that TypeScript expects to infer the type of our array, and this is because we've initialized this array with some data. It expects it to be an array denoted by the square brackets at the very end of objects that contain these properties, ID, title, image, address, are all expected to be strings, price, and everything to the bottom to late rating are expected to be numbers.

    [01:45 - 02:00] What if we now actually change the value of one particular field, let's say title for the very first one, and change it to be a different data type, like a number. If we now hover over the listings array, we see something else happening.

    [02:01 - 02:29] What we see is two objects being specified as types and a unique pipe symbol between these two objects and then the arrays syntax at the very end. This pipe symbol denotes creating a union type in TypeScript and essentially states that for this particular array, each object could either be of the first type, this particular object that has title as a number, or could be this object which title is a string.

    [02:30 - 02:32] And this makes sense. We're not restricting this array to be anything.

    [02:33 - 02:44] So TypeScript is basically inferring what this array could be. Could we ensure that the objects we declare in disarray all conform to a single shape?

    [02:45 - 02:58] For example, can we specify and ensure that that title field is going to be a string? And if we were to pass in a number, for example, TypeScript should warn us and the compiler should eventually fail.

    [02:59 - 03:08] We could do this. We could do this by creating an explicit type that describes the shape of our entire listings array.

    [03:09 - 03:18] But first we're going to look into describing the shape of a single object. In TypeScript, there's two ways or two common ways we can achieve this.

    [03:19 - 03:37] We could use a type alias declaration or we could use an interface. Both can be used with minor differences between them syntax wise as well as other more finite differences.

    [03:38 - 03:57] We'll be discussing these differences at a later point in time, but for now we 'll resort to using an interface since the TypeScript team has historically used interfaces to describe the shape of objects. We'll expect each listing object to have a certain number of fields.

    [03:58 - 04:32] ID, title, image, address, price, number of guests, number of baths, or beds first, number of baths, and rating. Just like how we've basically specified types for variables before, we can explicitly define the types of each field within the listing interface.

    [04:33 - 04:57] For example, we want to say ID is going to be of the string type and so would title, image, and address. Price would be of the number type and so would be everything below number of guests, number of beds, number of baths, and finally rating.

    [04:58 - 05:17] With our listing interface defined, we can now assign this type interface to variables and objects we can create in our app. For example, we can have very well created an object and said that this object should be of type listing.

    [05:18 - 05:35] By doing so, we now actually have to initialize this object with the properties that this interface expects, an ID, a title, an image, and so on. We're not creating an object here though, we're creating an array called listings, and we want to sort of type define this listing's array.

    [05:36 - 05:57] To do so, we'll simply say that this is listing, and then we'll use the square brackets here to denote that this is an array type. This square bracket is sort of the more common way and typescript of defining array types, and the information we have just before the square brackets sort of denotes the items within the array.

    [05:58 - 06:11] So in this case, we're saying that this is an array in which each item in the array should conform to the listing interface type. We very well could have said this is an array of strings, an array of numbers, and so on.

    [06:12 - 06:27] But in this case, we're saying that this is an array of listings. The other approach of defining an array type in typescript is using the array generic, and passing in the type of each item as a type variable.

    [06:28 - 06:46] The typescript documentation actually shows both approaches, but our recommended ESLint package that we're using actually prefers the prior approach. We also do, so we'll actually go back to specifying that this is simply enlist ing and then using the square brackets to denote that it's an array type.

    [06:47 - 07:00] We're also going to spend a decent amount of time discussing what generics are, so what's actually happening here would be better understood as we get to that point. But for now, we'll just stick with the prior approach of defining an array type .