React/Vue2 Apollo boilerplate

Important This repo doesn't (yet) work!

Please try vue2-apollo-scaphold instead!

Experimental

Fork this boilerplate code to get started with GraphQL, and Apollo with either:

• React : localhost:3001/react.html
• Vue2 : localhost:3001/vue2.html

Quickstart:

1. Go to Scaphold.io (https://scaphold.io).

2. Create an account and dataset.

3. Change the URL in the API manager (config.js) in the boilerplate to point to your unique Scaphold.io API URL.

4. Install dependencies: npm install

5. Run with: npm start

Deployment:

Note: For development, you only need to run npm start

1. Run npm run build to transpile ES6 code from the src/ directory to JavaScript in the lib/ directory.

2. Set the environment variable process.env.NODE_ENV = 'production' to let server.js know to run the code in the lib/ directory.

scaphold.io

• scaphold.io quickstart
• scaphold.io slack channel

Status

• React working
• Vue 2 Work in progress (WIP)

React

Works out of the box. Source code can be found in src/js/react folder

Vue2

Not quite working yet. Src code can be found in src/js/vue folder. We have not tried to port the Description or Hero components as they are static and not interesting.

The main points of interest are the vue-apollo integrations and GraphQL queries.

Vue 2

• vue 2 API
• vue 2 guide

vue-material

• repo and docs
• vue-material getting started

vue-router

• vue-router

GraphQL

• GraphQL first: how to build modern apps
• redux dev tools - debug queries in chrome
• GraphiQL

Apollo GraphQL client

• put GraphQL data in your UI
• Apollo mutate API
• Apollo observable query
• vue-apollo mutations
• graphql subscriptions
• introducing vue apollo blog post

Extra tools

• optics analytics

The vue-apollo author recommends defining the apollo queries directly on the component using the special apollo key:

  // Apollo GraphQL
  apollo: {
    // Local state 'posts' data will be updated
    // by the GraphQL query result
    posts: {
      // GraphQL query
      query: postsQuery,
      // Will update the 'loading' attribute
      // +1 when a new query is loading
      // -1 when a query is completed
      loadingKey: 'loading',
    },
  },

Here is a good mutation example:

export default {
  // Attribute
  props: {
    // Post id passed down to this component
    postId: {
      type: Number,
      required: true,
    },
  },
  methods: {
    upvote() {
      // Mutation
      this.$apollo.mutate({
        mutation: upvoteMutation,
        variables: {
          postId: this.postId,
        },
      }).then(data => {
        console.log('Done upvoting.');
      });
    },
  },
};

Please refactor the current Vue2 components to follow best practices and work correctly!

Also have a look at: vue-apollo: hello world example

Apollo GraphQL mutations

All the GraphQL queries can be found in queries.js under src/vue/components/App

The mutation queries can be found in mutations.js which use the GraphQL mutation queries defined in queries.js.

• createUser
• LoginWithData

LoginWithData

Takes an object with username and password, then attempts to login via GraphQL API on scaphold.io.

createUser

Creates a new user (ie. Registration). We can then use this user account to login. Takes an object with username and password

App component

Folder: src/vue/components/App

In App.vue we have a method createUser() which I'm not sure how it fits in... but this is the method used to make a mutation on the GraphQL backend at scaphold.io to actually create a User object in the data store RethinkDB.

methods: {
  createUser() {
    this.$apollo.mutate(mutations.createUser({
      username: this.username,
      password: this.password
    }))

subscribe to user

There is also a subscribeToUser method used to subscribe to new users (via RethinkDB changefeed)

"RethinkDB pushes JSON to your apps in realtime."

Currently it polls every 60000 milliseconds (ie. every minute: pollInterval: 60000)

subscribeToUser(id) {
  const observable = client.watchQuery({
    query: userQuery,
    fragments: createFragment(FragmentDoc),
    pollInterval: 60000,
    forceFetch: true,
    variables: {
      id,
    },
  })

  const subscription = observable.subscribe({
    next(result) {
      // error handling
      ...

      // save in local storage
      localStorage.setItem('currentUsername', result.data.getUser.username);

      // update component state
      that.user = result.data.getUser,
      that.loading = false,

      // redirect to home
      router.push({name: 'home'});
    }
  })
}

Register user component

You need to first register in order to login!

Contains the following data, bound to the form dialog.

{
  showModal: false, // show modal or not
  registerEmail: undefined, // user email
  registerPassword: undefined, // user password
  errors: undefined // registration error
}

Login user component

Contains an apollo mutation method to perform a loginWithData

  methods: {
    login(ctx) {
      return this.$apollo.mutate(mutations.LoginWithData(ctx))
    },
    ...
  }

The method loginUser executes login, passing username and password. On login success (ie. no errors in returned data), it stores token and id in localStorage then redirects to home.

loginUser() {
  this.login({
    username: this.loginEmail,
    password: this.loginPassword
  }).then(({ data }) => {
    if (!data.errors) {
      localStorage.setItem('token', data.loginUser.token);
      localStorage.setItem('userId', data.loginUser.id);
      router.push({name: 'home'});

License

For you pleasure ;)