The Creative Network Session 5 — GraphQL schema V1

Previous sessions

1. Introduction session
2. Setting up redux
3. Home Page with React
4. Setting up GraphQL

Last night we continued to work on the first version of our GraphQL schema. Video here:

We started setting up the tools of GraphQL such as Apollo in session 4. This session our goal was to having a working schema enough to query data from our React component from Home Page, which looks like this:

As you can see from the image, every Card looking object is suppose to be a single post, containing name, description, tags and other pieces of information. We decided to name this a Topic in our schema, and we can query the GraphQL for all or single Topic object with its related data.

Code is relative simple, and we ended up having a schema looking like this

type Topic {
  id: String
  title: String
  description: String
  thumbnail: String
  tags: [Tag]
}

type Tag {
  id: String
  name: String
}

type Query {
  allTopics: [Topic]
}

schema {
  query: Query
}

This would allow us to query our server side with queries such as this:

{
  allTopics {
    id
    title
    description
    thumbnail
    tags {
      id
      name
    }
  }
}

And result would look like this

Now that we have a working version of the GraphQL schema for the home page, we realize that it would be difficult to continue building the schema, because we are not sure what kind of content and data structure the client side would need. So we decided now is a good time to go back to our React client.

We are also planning to deploy the server side code to Heroku so everyone can play around, stay tuned!