What is important to know in here?

• The project is scaffolded with two separate directories for the client and server code.

A. Client

We're using Apollo client with their recently included useQuery and useMutation hooks to deal with the server side endpoint we will be creating. This project is purely focused on a local environment and would definitely need multiple more steps deploy.

Important pieces to note

• client/src/index

  We're starting with a simple Apollo client setup. Passing in a cache, an empty resolvers export and allowing us to check out the app in Apollo dev tools.

  import React from 'react';
  import ReactDOM from 'react-dom';
  import ApolloClient from 'apollo-client'
  import { InMemoryCache } from 'apollo-cache-inmemory';
  import { ApolloProvider } from '@apollo/react-hooks';
  
  import resolvers from './apollo/resolvers';
  
  import App from './App';
  
  const cache = new InMemoryCache();
  const client = new ApolloClient({
      cache,
      resolvers,
      connectToDevTools: true
  })
  
  // Sets up an initial state for Apollo's local state management
  cache.writeData({
      data: {}
  })
  
  ReactDOM.render(
      <ApolloProvider client={client}>
          <App />
      </ApolloProvider>,
      document.getElementById('root')
  );
  

• NoAuthLanding

  This component is just giving us something to render when starting up the client.

  import React from 'react';
  
  const NoAuthLanding = () => {
      return <h1>Welcome to the workshop!</h1>
  }
  
  export default NoAuthLanding;
  

• routes

  For now, while we have no authentication, we're just setting up a single route to land on (using NoAuthLanding as our home page)

  import React from 'react';
  import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
  
  import NoAuthLanding from '../components/NoAuthLanding';
  
  const Routes = () => {
      return (
          <Router>
              <Switch>
                  <Route
                      exact
                      path="/"
                      render={NoAuthLanding}
                  />
              </Switch>
          </Router>
      )
  }
  
  export default Routes
  

We will be coming back and adding a few things to the client throughout this workshop:

• Authenticated routes and components to handle both cases
• Custom form and dropdown components
• React & Apollo hooks to handle the data passed from our backend and OMDB

B. Server

In our server directory, we have the heaviest starting scaffold. In here we handle setting up an instance of ApolloServer. The server will be pointed at a MongoDB layered behind Prisma and served as a single endpoint. We will be using docker-compose to get a local mongodb and prisma instance running. A few key points of interest would be:

• server/apollo/schema

  We have a pre filled out schema, telling our Grapqhl what to expect for the data we want to store. As we know the ! means the value cannot be null. We will be revisiting this file when we build out our datamodel for prisma.

  const { gql } = require("apollo-server");
  
  const typeDefs = gql`
    type Media {
      id: ID!
      title: String
      year: String
      rated: String
      released: String
      runtime: String
      genre: String
      director: String
      writer: String
      actors: String
      plot: String
      language: String
      country: String
      awards: String
      poster: String
      source: String
      value: String
      metascore: String
      imdbRating: String
      imdbVotes: String
      imdbID: String
      totalSeasons: String
      response: String
    }
    type Playlist {
      owner: User!
      id: ID!
      title: String!
      media: [Media]!
    }
    type User {
      id: ID!
      username: String!
      email: String!
      password: String!
      playlists: [Playlist]
    }
  `;
  
  module.export = typeDefs;
  

• resolvers

  Our resolvers file only has a Query and Mutation type defined. We will be revisiting here to plug into prisma and set up some functions that will be how we deal with the data.

  const resolvers = {
      Query: {},
      Mutation: {}
  }
  
  module.exports = resolvers;
  

• server/index

  We need to set up the Apollo Server instance with our typeDefs (schema) and resolvers.

  require("dotenv").config();
  const { ApolloServer } = require("apollo-server");
  const typeDefs = require("./apollo/schema");
  const resolvers = require("./apollo/resolvers");
  
  const server = new ApolloServer({
      typeDefs,
      resolvers,
  });
  
  server.listen().then(({ url }) => {
      console.log(`Server ready at ${url}`);
  });