GraphQL 360 Logo
GraphQL 360 Logo

Creating Your First Tour

Let's use javascript to create our first tour. We're going to use a super minimal approach. Which means we won't use a heavy weight library like apollo that has all the bells and whistles. Instead we'll use just use a fetch library.

Let's start by installing some dependencies that we're going to need.

Let's also create a .babelrc so we can use some new JS features in our script

To get started let's import isomorphic-unfetch. There is nothing particularly special about this fetch library so if you have another favourite such as axios, feel free to substitute it here.

The important part here is that we can pass a query string and some variables through. It also reads our GRAPHQL360_API_KEY from an environment variable. You only need this api key for creating tours, which we're doing now. Consuming tours for the most part doesn't require a key making it suitable for client side usage.

Next let's go through and create the queries that we're going to want. Firstly to create the tour and then the location(s) and lastly to update the tour with the default location.

As soon as we've done that we can go ahead and wire it up. We're also going to wrap it all in an async function so that we can use async/await to simplify the code a little.

Once we've created the tour we can store the tour id in a variable by unpacking the data structure that is returned. We can then use it to create our locations. In this case I'm referring to equirectangular photos that have already been uploaded. But GraphQL360 also supports uploading the images to our S3 bucket using the uploadImage mutation.

Optionally, before we create the locations we could also upload the images. This is a simple mutation that takes the image and uploads it and then return the URL to the image for further use.

Once we've done this the next step is to go back and update the tour with the start or default location.

Now we have a tour of one location. It should be queryable if we write a query like this:

Alternatively, we can look at the tour through one of the demos, such as the aframe demo.

The final step is to extend this into multiple locations and link them together. Let's go and do this now.

We create a new graphql mutation, allowing us to specify the locationId (parent), the targetLocationId and the sphericalCoords.

Fill in the appropriate details or wire it up with the rest of the script. Don't be afraid to just use the basic values for the spherical coordinates, you can always update this later.

And now we can query to see the links between the locations as well.

And there you have it. The minimum required to create a tour.