[+] Graphql

README.md

@@ -53,6 +53,7 @@ In next screenshot, try figuring out the variable types by their **COLOR** (find
 - ![#EBEA8B](https://placehold.it/15/EBEA8B/000000?text=+) `#EBEA8B` Read Only Variables
 - ![#A8F79A](https://placehold.it/15/A8F79A/000000?text=+) `#A8F79A` Static
 - ![#ECF6FF](https://placehold.it/15/ECF6FF/000000?text=+) `#ECF6FF` Functions, Strings
+- ![#A3B5C3](https://placehold.it/15/A3B5C3/000000?text=+) `#A3B5C3` Functions, Strings
 - ![#282c34](https://placehold.it/15/282c34/000000?text=+) `#282c34` Background
 
 ## Configuration

demo/Dockerfile

@@ -0,0 +1,12 @@
+FROM node:10
+
+RUN mkdir -p /app
+WORKDIR /app
+
+COPY package.json .
+RUN yarn install
+COPY . .
+
+EXPOSE 4000
+
+CMD ["yarn", "start"]

demo/Menu.jsx

@@ -0,0 +1,110 @@
+// #region  Imports
+import { content, navBar } from '@config';
+import { media, mixins, theme } from '@styles';
+import { Link } from 'gatsby';
+import PropTypes from 'prop-types';
+import React from 'react';
+import styled from 'styled-components';
+// #endregion
+
+// #region  Styling
+const { colors, fontSizes, fonts } = theme;
+
+const MenuContainer = styled.div`
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  height: 100vh;
+  z-index: 1;
+  outline: 0;
+  transition: ${theme.transition};
+  transform: translateX(${props => (props.menuOpen ? 0 : 100)}vw);
+  visibility: ${({ menuOpen }) => (menuOpen ? 'visible' : 'hidden')};
+  display: none;
+  ${media.tablet`display: block;`};
+`;
+const Sidebar = styled.div`
+  ${mixins.flexCenter};
+  flex-direction: column;
+  background-color: ${colors.backgroundLight};
+  padding: 50px;
+  width: 50vw;
+  height: 100%;
+  right: 0;
+  margin-left: auto;
+  font-family: ${fonts.SFMono};
+  box-shadow: -10px 0px 30px -15px ${colors.backgroundDarken};
+  ${media.thone`padding: 25px;`};
+  ${media.tiny`padding: 10px;`};
+`;
+const NavLinks = styled.nav`
+  ${mixins.flexBetween};
+  width: 100%;
+  flex-direction: column;
+  text-align: center;
+`;
+const NavList = styled.ol`
+  width: 100%;
+`;
+const NavListItem = styled.li`
+  margin: 0 auto 20px;
+  font-size: ${fontSizes.large};
+  counter-increment: item 1;
+  ${media.thone`
+    margin: 0 auto 10px;
+    font-size: ${fontSizes.medium};
+  `};
+  ${media.tiny`font-size: ${fontSizes.smallish};`};
+  &:before {
+    display: block;
+    content: '0' counter(item) '.';
+    color: ${colors.primary};
+    font-size: ${fontSizes.small};
+    margin-bottom: 5px;
+  }
+`;
+const NavLink = styled(Link)`
+  ${mixins.link};
+  padding: 3px 20px 20px;
+  width: 100%;
+`;
+// #endregion
+
+const Menu = ({ menuOpen, toggleMenu }) => {
+  const handleMenuClick = e => {
+    const target = e.target;
+    const isLink = target.hasAttribute('href');
+    const isNotMenu = target.classList && target.classList[0].includes('MenuContainer');
+
+    (isLink || isNotMenu) && toggleMenu();
+  };
+
+  return (
+    <MenuContainer
+      menuOpen={menuOpen}
+      onClick={handleMenuClick}
+      aria-hidden={!menuOpen}
+      tabIndex={menuOpen ? 1 : -1}
+    >
+      <Sidebar>
+        <NavLinks>
+          <NavList>
+            {navBar.map(name => (
+              <NavListItem key={name}>
+                <NavLink to={`/#${content[name].id}`}>{name}</NavLink>
+              </NavListItem>
+            ))}
+          </NavList>
+        </NavLinks>
+      </Sidebar>
+    </MenuContainer>
+  );
+};
+
+Menu.propTypes = {
+  menuOpen: PropTypes.bool.isRequired,
+  toggleMenu: PropTypes.func.isRequired
+};
+
+export default Menu;

demo/schema.graphql

@@ -0,0 +1,44 @@
+type User {
+  id: ID!
+  name: String
+  friends: [User] @relation(name: "FRIENDS", direction: "BOTH")
+  reviews: [Review] @relation(name: "WROTE", direction: "OUT")
+  avgStars: Float
+    @cypher(statement: "MATCH (this)-[:WROTE]->(r:Review) RETURN toFloat(avg(r.stars))")
+  numReviews: Int @cypher(statement: "MATCH (this)-[:WROTE]->(r:Review) RETURN COUNT(r)")
+  recommendations(first: Int = 3): [Business]
+    @cypher(
+      statement: "MATCH (this)-[:WROTE]->(r:Review)-[:REVIEWS]->(:Business)<-[:REVIEWS]-(:Review)<-[:WROTE]-(:User)-[:WROTE]->(:Review)-[:REVIEWS]->(rec:Business) WHERE NOT EXISTS( (this)-[:WROTE]->(:Review)-[:REVIEWS]->(rec) )WITH rec, COUNT(*) AS num ORDER BY num DESC LIMIT $first RETURN rec"
+    )
+}
+
+type Business {
+  id: ID!
+  name: String
+  address: String
+  city: String
+  state: String
+  avgStars: Float
+    @cypher(statement: "MATCH (this)<-[:REVIEWS]-(r:Review) RETURN coalesce(avg(r.stars),0.0)")
+  reviews: [Review] @relation(name: "REVIEWS", direction: "IN")
+  categories: [Category] @relation(name: "IN_CATEGORY", direction: "OUT")
+}
+
+type Review {
+  id: ID!
+  stars: Int
+  text: String
+  date: Date
+  business: Business @relation(name: "REVIEWS", direction: "OUT")
+  user: User @relation(name: "WROTE", direction: "IN")
+}
+
+type Category {
+  name: ID!
+  businesses: [Business] @relation(name: "IN_CATEGORY", direction: "IN")
+}
+
+type Query {
+  usersBySubstring(substring: String): [User]
+    @cypher(statement: "MATCH (u:User) WHERE u.name CONTAINS $substring RETURN u")
+}

package.json

@@ -37,9 +37,9 @@
     ]
   },
   "devDependencies": {
-    "auto-changelog": "^1.11.0",
-    "nodemon": "^1.18.10",
-    "release-it": "^7.6.3"
+    "auto-changelog": "^1.16.2",
+    "nodemon": "^1.19.4",
+    "release-it": "^12.4.3"
   },
   "auto-changelog": {
     "output": "CHANGELOG.md",