kwon770 / apollo-movieweb

FrontSide, Movie Web built with React, Apollo and GraphQL

Frontend, Movie Web built with React, Apollo, GraphQL

The Web connected to MovieQl-Server
The Web made by Apollo

$ yarn add styled-components
$ yarn add react-router-dom
$ yarn add apollo-boost
$ yarn add @apollo-react-hooks
$ yarn add graphql

What i learn

ApolloClient setting & Resolvers & Mutation Usage

• uri: To connect backend-side
• resolvers: Resolve/Send serveral thing from client (like field)

import ApolloClient from "apollo-boost";

const client = new ApolloClient({
  uri: "http://localhost:4000/",
  resolvers: {
    // The field name must be same with api (type in db)
    Movie: {},
    // This Mutaion is same with backend-Mutation
    Mutation: {}
    }
  }
});

Query usage from front

• Using gql``/ to write query
• Using useQuery(query, variables) to send query
• query getMovie($id: Int!) {} => query for Apollo
• movie(id: $id){} => query for graphql

import { gql } from "apollo-boost";

const GET_MOVIE = gql`
    query getMovie($id: Int!) {
        movie(id: $id) {
        id
        }
    }
`;

const { loading, data } = useQuery(GET_MOVIE, {
    variables: { id: parseInt(id) }

useParams()

• Get string from url (https://localhost:4000/#/155 => "155")

import { useParams } from "react-router-dom";

export default = () => {
    const { id } = useParams();

    ~
}

<a href/> & Link

• <a href> kill app, you must use <Link />

import { Link } from "react-router-dom";

// https://localhost:4000 => https://localhost:4000/#/${id}
<Link to={`/${id}`}> 
    ~
</Link>

Optional Chaining (JS Grammer)

// {data && data.movie && data.movie.medium_cover_image}
<Poster bg={data?.movie?.medium_cover_image}></Poster>

Using Local-State

• Using Local-State(data) with Backend-State(data)
• @client make query only send to client-side (telegraph ql)
• To use Local-State from different page, you must get id by query => Apollo distinguish by id

// Apollo.js

const client = new ApolloClient({
  uri: "http://localhost:4000/",
  resolvers: {
    
    // isLiked is apply on Local-State 
    Movie: {
      isLiked: () => false
    },

    // cache: local cache of Apollo 
    // cache.writeData: Write data on 'local'
    Mutation: {
      togglelikeMovie: (_, { id, isLiked }, { cache }) => {
        cache.writeData({
          id: `Movie:${id}`,
          data: {
            isLiked: !isLiked
          }
        });
      }
    }
  }
});

// Home.js

const GET_MOVIES = gql`
  {
    movies {
      id
      medium_cover_image
      isLiked @client
    }
  }
`;

// Detail.js

const GET_MOVIE = gql`
  query getMovie($id: Int!) {
    movie(id: $id) {
      id
      title
      medium_cover_image
      description_intro
      isLiked @client
    }
  }
`;