Getting Started with Meteor, React, and Apollo.

Ryan Glover

@themeteorchef

Who are you?

  • Hi, I'm Ryan. I like to think of myself as the James Brown of computer geeks (oof).

  • Six foot tall.

  • Made of solid gold.

  • I run a site called The Meteor Chef that's focused on teaching folks like you how to build real-world products with Meteor and JavaScript. I've developed a romance with React over the last year and a half and recently, started making eyes at GraphQL (haaay).

What's the point here, slick?

  • Try to feel like sane adults. Yes, really.

  • Understand what Meteor is and how it cuts out a ton of work so we can focus more on our product and less on nerd flex 💪.

  • Understand what GraphQL is, how it works, and why you'd want to use it in your work.

  • Understand what Apollo is and how it helps us to bridge the gap between our GraphQL server and our React-based interface.

  • Walk through a simple (I swear) implementation of GraphQL in Meteor utilizing React and Apollo.

What is Meteor?

  • A JavaScript platform built on top of Node.js that offers one-size-fits-all solutions to common development tasks.

  • Eliminates the need to understand/configure a build system. Automatic support for ES2015/ES6+ out-of-the-box via Babel.

  • Automatically spins up and connects your app to a MongoDB database.

  • Works directly with NPM as well as its own package system, Atmosphere*.

  • Really upsets hardcore nerds with control issues.

What is GraphQL?

  • GraphQL is an additional layer between your interface and your data store (e.g., MongoDB, MySQL, PostgreSQL, etc).

  • It flips our thinking to put an emphasis on the data requirements of our interface first. No more parsing whatever the server sends us.

  • Eliminates multiple HTTP requests by helping us to design responses that send down everything we need from the server in one go. 

  • Specific to Meteor, it enables us to use more than just MongoDB as a database.

{

  customer {

    name

    emailAddress

    purchases {

      date

      item

      price

    }

  }

}

{

  data: {

    customer: {

      name: "Doug Funnie",

      emailAddress: "doug.funnie@bluffington.edu"

    },

    purchases: [{

      date: "February 4th, 2017",

      item: “Kleenex Tissues (150 ct)”,

      price: "$3.75”

    },{

      date: "February 3rd, 2017",

      item: “Hellman’s Mayonaise (64oz)”,

      price: "$17.99”

    }]

  }

}

export const CustomerProfile = ({ data }) => (

  <h4>{ data.customer.name } ({ data.customer.emailAddress })</h4>

  <h5>Customer Purchases</h5>

  <table>

    <thead>

      <tr>

        <th>Date</th>

        <th>Item</th>

        <th>Price</th>

      </tr>

    </thead>

    <tbody>

      {data.purchases.map(({ date, item, price }) => {

        <tr>

          <td>{ date }</td>

          <td>{ item }</td>

          <td>{ price }</td>

        </tr>

      })}

    </tbody>

  </table>

);

What is Apollo?

  • Made by the same team that builds Meteor (Meteor Development Group). Works with any JS app.

  • In normal people terms: the glue between our GraphQL server and our interface.

  • Heavy emphasis on the client library, apollo-client, which helps us to connect to any GraphQL server.

  • Helps us to execute GraphQL queries and mutations from the client.

  • Server library exists along with a set of tools for creating a GraphQL server/schema. A bit abstracted so not recommended for your first pass.

Let's look at some code and figure this out!

https://github.com/themeteorchef/apollo-react-chicago

If you're sufficiently impressed...

Getting Started with Meteor, React, and Apollo

By themeteorchef

Made with Slides.com

Getting Started with Meteor, React, and Apollo

  • 1,231

More from themeteorchef