GRAND Stack Workshop

MATCH (movie:Movie) WHERE toLower(movie.title) CONTAINS toLower($subString) RETURN movie LIMIT $limit;

MATCH (m:Movie)-[:IN_GENRE]->(:Genre)<-[:IN_GENRE]-(movie:Movie)
WHERE m.movieId= $movieIds
WITH m, movie, COUNT(*) AS genreOverlap

  MATCH (m)<-[:RATED]-(:User)-[:RATED]->(movie)
  WITH movie, genreOverlap, COUNT(*) AS userRatedScore
  RETURN movie
  ORDER BY
    (0.9 * genreOverlap) + (0.1 * userRatedScore)
    DESC
  LIMIT 3

Movie {

  recommendations: async ( current, _, context ) => {
    let result = await Neo4j.run( context.driver.session(), queries.RECO, current, Neo4j.mappingNodeN );
    return result;
  }

},

Query: {

  movieById( root, params, context, resolveInfo ) {
    let result = await Neo4j.run( context.driver.session(), queries.GET, params, Neo4j.mappingNodeN );
    return result;
  },

  movieSearch: async ( root, params, context, resolveInfo  ) => {
    let session = context.driver.session();
    let query = "MATCH (movie:Movie) WHERE movie.title CONTAINS $search RETURN movie LIMIT $first;"
    return session.run(query, params)
      .then( result => { return result.records.map(record => { return record.get("movie").properties })})
  },

}

import express from 'express';
import { graphqlExpress, graphiqlExpress } from 'apollo-server-express';
import bodyParser from 'body-parser';

const PORT = 3000;
const server = express();

/**
 * GraphQL endpoint
 */
server.use( '/graphql', bodyParser.json(), graphqlExpress( async ( request ) => {  return {
  // your graphql schema
  schema: schema,
  // some context for the endpoint (here the Neo4j driver)
  context: Neo4j.context( request.headers, process.env )
}}));

/**
 * Create the graphiql endpoint.
 */
server.use( '/graphiql', graphiqlExpress( { endpointURL: '/graphql', query:'' }));

/**
 * Run the server.
 */
server.listen( PORT, () => { console.log( `GraphQL Server is now running on http://localhost:${PORT}/graphql` ) } );

/**
 * Enable CORS + OPTIONS request for the graphql endpoint.
 */
server.use(
  '/graphql',
  ( req, res, next ) => {
    res.header( 'Access-Control-Allow-Credentials', true );
    res.header( 'Access-Control-Allow-Headers', 'content-type, authorization, content-length, x-requested-with, accept, origin' );
    res.header( 'Access-Control-Allow-Methods', 'POST, GET, OPTIONS' );
    res.header( 'Allow', 'POST, GET, OPTIONS' );
    res.header( 'Access-Control-Allow-Origin', '*' );

    if ( req.method === 'OPTIONS' ) {
      res.sendStatus( 200 );
    } else {
      next();
    }
  }
);

import { ApolloClient } from 'apollo-boost';

const client = new ApolloClient({
  uri: 'https://mpjk0plp9.lp.gql.zone/graphql',
});

import React from 'react';
import { render } from 'react-dom';
import { ApolloProvider } from 'react-apollo';

const WrappedApp = (
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>
);

render(WrappedApp, document.getElementById('root'));

import {Component} from "react";
import gql from "graphql-tag";
import { graphql} from "react-apollo";

class MovieList extends Component {

  render() {
    const {data} = this.props;
    if (data.loading) return <div>Loading...</div>;
    if (data.movies.length === 0) return <div>No movies!</div>;

    ...

  }
}

export default graphql(gql`${GRAPHQL_QUERY}`)(MovieList);

import {Component} from "react";
import gql from "graphql-tag";
import { Query } from "react-apollo";

class MovieList extends Component {

  render() {
    <Query query={GRAPHQL_QUERY}>
      {
        ({ loading, data: { movies } }) => {
          if (loading)  return <div>loading....</div>
          if (movies.length === 0) return <div>No movies!</div>;

          ...
        }
      }
    </Query>
  }
}

export default MovieList;