loading...
Cover image for Use real data for your examples
GraphCMS

Use real data for your examples

notrab profile image Jamie Barton Updated on ・3 min read

Are you someone who likes building examples to experiment and showcase new features, frameworks or libraries? Maybe you're new to GraphQL and want to explore how schemas work without creating all of the data nodes yourself. GraphCMS Project Templates are here for you. ❤️

Whether you're building an example application with React, Vue, Angular, Svelte or something else, you can sign up for a free GraphCMS account and start using the Content API to enhance your examples.

Below we'll see how to get setup with a GraphCMS project template and a peak at some sample data!

Get started

Once you sign into GraphCMS, you'll be taken the project list and it's here you should click "Create new project".

Create a new project card

Next you'll want to create your new project "From Template".

GraphCMS from template button

Next, you'll be able to pick from our collection of templates. In this example I'll go ahead and start a project from the "Travel Site" template.

GraphCMS template picker

Finally, now you can give your project a name, description and select a region where your data is stored. Btw, We have a globally distributed Smart Edge Cache when using the Content API.

What's more important at this stage is that if you want some sample content, make sure toggle "Include template content"!

Include template content

Once you click "Create", you'll be taken to the GraphCMS Dashboard. From here you can navigate to the Schema and Content editors to explore the template in full!

In my example I selected the "Travel Site", so inside my schema editor, I have Destination, Hotel and Review models. These all contain multiple fields and even relations between each other.

GraphCMS Content Editor

This is great if I want to showcase some new UI with real data, and all that's left to do is run a query to get the content. Let's see how easy this is with GraphQL.

query {
  destinations {
    name
    location
    image {
      url
    }
    hotels {
      name
      description
      rooms
      amenities
      phone
      website
      reviews {
        attribution
        content {
          markdown
        }
        createdAt
      }
    }
  }
}

We can run this query inside GraphCMS too!

Here is a snippet of the response we get:

{
  "data": {
    "destinations": [
      {
        "name": "Tikehau Island",
        "location": "French Polynesia",
        "image": {
          "url": "https://media.graphcms.com/i45c9M5QWWN5i4W0TyX3"
        },
        "hotels": [
          {
            "name": "Tikehau Pearl Beach Resort",
            "description": "Tikehau Pearl Beach Resort Tuamotu Atoll, French Polynesia ratings, photos, prices, expert advice, traveler reviews and tips, and more information from Condé Nast Traveler.",
            "rooms": 0,
            "amenities": [],
            "phone": "+689 40-96-23-00",
            "website": null,
            "reviews": [
              {
                "createdAt": "2019-02-21T13:09:23.850Z",
                "attribution": "",
                "content": {
                  "markdown": "\n"
                }
              }
            ]
          }
        ]
      },
      {
        "name": "Dreamland Beach",
        "location": "Bali",
        "image": {
          "url": "https://media.graphcms.com/GklC6ZnUSL6K39hVXVzT"
        },
        "hotels": [
          {
            "name": "The Mulia & Mulia Villas",
            "description": "The Mulia & Mulia Villas ratings, photos, prices, expert advice, traveler reviews and tips, and more information from Condé Nast Traveler.",
            "rooms": 219,
            "amenities": [
              "Beach",
              "Spa",
              "Family-Friendly",
              "Kids' Programs",
              "Bar",
              "WiFi",
              "Gym",
              "Pool"
            ],
            "phone": "",
            "website": null,
            "reviews": [
              {
                "createdAt": "2019-02-21T13:09:27.626Z",
                "attribution": "CONDÉ NAST TRAVELER",
                "content": {
                  "markdown": "The 219-room seaside Mulia & Mulia Villas in the southeastern tourist enclave of Nusa Dua is one of our readers' favorite resorts in Asia for a reason: The Indian Ocean is just steps away. The 20-room spa is well-equipped to cure whatever ails you, from a Finnish wood sauna to a steam room, not to mention Bali's first (and presently, only) Ice Fountain room, set to 30 degrees Fahrenheit. Within the spa, there are also both hot and cold water pools for you to alternate between—and the shock to your system is one way to get that circulation going, if you'd rather not hit the fitness center. Alternately, spend a leisurely Sunday afternoon over brunch at Soleil, a Mediterranean spot infused with Vietnamese, Indonesian, and Thai flavors, where you can indulge in a generous spread of meats, grilled seafood, and an epic dessert buffet.\n"
                }
              }
            ]
          }
        ]
      },
    ]
  }
}

Now imagine what we could do with this data! 🚀 Please comment below if you already or plan to use our project templates to explore GraphQL.

Posted on Jan 15 by:

notrab profile

Jamie Barton

@notrab

Husband. Dad. Full Stack Developer.

GraphCMS

GraphCMS is the GraphQL native Headless CMS. With a powerful GraphQL API for developers, and a seamless editor experience for content creators

Discussion

markdown guide