Halo World

[GraphQL] GraphQL 클라이언트 만들어보기

_Yeony — Sun, 13 Feb 2022 22:38:12 +0900

본 포스팅은 Inflearn 얄코님 강의를 수강하며 복습용으로 작성하였습니다.

https://www.inflearn.com/course/%EC%96%84%ED%8C%8D%ED%95%9C-graphql-apollo/dashboard

[무료] 얄팍한 GraphQL과 Apollo - 인프런 | 강의

⚡ 짧고 굵은 전체 90분 강좌! 사이트의 코드들을 복붙하며 빠르게 GraphQL을 배우고 아폴로 사용법을 익히세요., - 강의 소개 | 인프런...

www.inflearn.com

React와 Apollo Client

실습을 위한

- 백앤드 서버 : https://gitlab.com/yalco/yalco-inflearn-graphql-apollo/-/tree/master/1-3-graphql-exp

- 클라이언트 서버 : https://gitlab.com/yalco/yalco-inflearn-graphql-apollo/-/tree/master/4-1-react-before-apollo

1. 아폴로 클라이언트 적용

아폴로 클라이언트 모듈 설치

npm install @apollo/client graphql

설치한 모듈 import

//app.js

// ...
import { ApolloProvider } from '@apollo/client';
import { ApolloClient, InMemoryCache } from '@apollo/client'
// ...


// ...
  const client = new ApolloClient({
    uri: 'http://localhost:4000',
    cache: new InMemoryCache()
  });
  // ...

client : GraphQL 서버와 정보를 주고받을 ApolloClient 객체 (axios 같은 역할)
url : GraphQL 서버 주소
cache : InMemoryCache를 통한 캐시 관리

//app.js

//   ...
  return (
    <div className="App">
     //랜더링 하는 부분의 안쪽을 ApolloClient로 감싸줌
      <ApolloProvider client={client}>
        <header className="App-header">
          <h1>Company Management</h1>
          <nav>
            <ul>
              {NavMenus()}
            </ul>
          </nav>
        </header>
        <main>
          {mainComp[menu]}
        </main>
      </ApolloProvider>
    </div>
  );
//   ...

2. GraphQL 서버로부터 목록 받아와 표시하기

//roles.js

// ...
import { useState } from 'react';
import { useQuery, gql } from '@apollo/client';
// ...

// ...
const GET_ROLES = gql`  //아래 내용을 바탕으로 graphQL에 보낼 요청 객체를 만듦
  query GetRoles {
    roles {
      id
    }
  }
`;
// ...

랜더링될 컨텐츠 id를 저장한 state 지정

//role.js

function Roles() {
    // ...
      const [contentId, setContentId] = useState('');
    // ...

}

서버로부터 데이터를 받아와서 띄워주기 위한 메소드 작성

// ...
  function AsideItems () {
    const roleIcons = {
      developer: ' ',
      designer: ' ',
      planner: ' '
    }
    const { loading, error, data } = useQuery(GET_ROLES);	//위에서 선언한 GraphQL 쿼리 이용
    
    //로딩과 에러 설정
    if (loading) return <p className="loading">Loading...</p>
    if (error) return <p className="error">Error :(</p>
    
    return (
      <ul>
        {data.roles.map(({id}) => {
          return (
            <li key={id} className={'roleItem ' +  (contentId === 'id' ? 'on' : '')}
            onClick={() => {setContentId(id)}}>
              <span>{contentId === id ? ' ' : '⬛'}</span>
              {roleIcons[id]} {id}
            </li>
          )
        })}
      </ul>
    );
  }
// ...

3. GraphQL 서버로부터 id로 컨텐츠 받아와 표시하기

//roles.js

// ...
const GET_ROLE = gql`
  query GetRole($id: ID!) {	//특정 Id에 대한 role정보 가져오는 graphQL 쿼리문
    role(id: $id) {
      id
      requirement
      members {
        id
        last_name
        serve_years
      }
      equipments {
        id
      }
      softwares {
        id
      }
    }
  }
`;
// ...

//role.js

  function MainContents () {

//위에서 설정한 id로 특정 role 정보를 가져오는 쿼리 사용
    // id는 contentId state를 전달
    const { loading, error, data } = useQuery(GET_ROLE, {
      variables: {id: contentId}
    })

    if (loading) return <p className="loading">Loading...</p>
    if (error) return <p className="error">Error :(</p>
    if (contentId === '') return (<div className="roleWrapper">Select Role</div>)

    return (
      <div className="roleWrapper">
        <h2>{data.role.id}</h2>
        <div className="requirement"><span>{data.role.requirement}</span> required</div>
        <h3>Members</h3>
        //가져온 정보 렌더링 해주기
        <ul>
          {data.role.members.map((member) => {
            return (<li>{member.last_name}</li>)
          })}
        </ul>
        <h3>Equipments</h3>
        <ul>
          {data.role.equipments.map((equipment) => {
            return (<li>{equipment.id}</li>)
          })}
        </ul>
        <h3>Softwares</h3>
          {data.role.softwares.map((software) => {
            return (<li>{software.id}</li>)
          })}
        <ul>
        </ul>
      </div>
    );
  }

Query와 Mutation을 사용하여 웹페이지 만들기

모듈 로드

//teams.js

// ...
import { useState } from 'react';
import { useQuery, useMutation, gql } from '@apollo/client'
// ...

상태를 저장할 state 준비

//teams.js

// ...
  const [contentId, setContentId] = useState(0)
  const [inputs, setInputs] = useState({
    manager: '',
    office: '',
    extension_number: '',
    mascot: '',
    cleaning_duty: '',
    project: ''
  })
// ...

1. 팀 목록 받아오기

쿼리 작성

//teams.js

// ...
const GET_TEAMS = gql`
  query GetTeams {
    teams {	//team 스키마에 저장된 id, manager
        id
        manager
        members {	//member 스키마에 저장된 특정 값을 받아옴
          id
          first_name
          last_name
          role
        }
      }
  }
`;
// ...

아래처럼 useQeury를 이용해 해당 쿼리를 실행시킬 수 있다.

const { loading, error, data, refetch } = useQuery(GET_TEAMS);

실행되면 data에 받아온 데이터가 들어오게 되며, 데이터에 접근해 렌더링 시켜줄 수 있다.

return (
      <ul>
        {data.teams.map(({id, manager, members}) => {
          return (
            <li key={id}>
              <span className="teamItemTitle" onClick={() => {setContentId(id)}}>
                Team {id} : {manager}'s
              </span>
              <ul className="teamMembers">
                {members.map(({id, first_name, last_name, role}) => {
                  return (
                    <li key={id}>
                      {roleIcons[role]} {first_name} {last_name}
                    </li>
                  )
                })}
              </ul>
            </li>
          )
        })}
      </ul>
    )

2. Mutation 사용

항목 삭제하기

// ...
const DELETE_TEAM = gql`
  mutation DeleteTeam($id: ID!) {
    deleteTeam(id: $id) {
      id
    }
  }
`
// ...
  function execDeleteTeam () {
    if (window.confirm('이 항목을 삭제하시겠습니까?')) {
      deleteTeam({variables: {id: contentId}})
    }
  }
  
  //작성한 delete 쿼리를 이용해 useMutation으로 쿼리 날림
  //쿼리가 실행된 후에는 deleteTeamCompleted 함수를 실행하도록 함
  const [deleteTeam] = useMutation(
  DELETE_TEAM, { onCompleted: deleteTeamCompleted })
  
  function deleteTeamCompleted (data) {
    console.log(data.deleteTeam)
    alert(`${data.deleteTeam.id} 항목이 삭제되었습니다.`)
    setContentId(0)
  }
    // ...

delete 버튼에 execDeleteTeam를 적용하여 실행

// ...
    <button onClick={execDeleteTeam}>Delete</button>
// ...

3. Fetch 사용

항목을 삭제/삽입/수정한 후 리스트를 갱신하기위해서 refetch를 이용할 수 잇다.

// ...
//함수 밖에서 refetch를 넣을 refetchTeams 변수 선언
let refetchTeams


// ...
//useQuery의 매개변수 중 refetch를 위에서 선언한 refetchTeams 변수에 넣어준다.
const { loading, error, data, refetch } = useQuery(GET_TEAMS);
refetchTeams = refetch
// ...
//항목 삭제이후 부분에서 refetchTeams()를 호출해줌으로써 refetch 실행할 수 있다.
alert(`${data.deleteTeam.id} 항목이 삭제되었습니다.`)
refetchTeams()
// ...

수정/삽입에 대한 추가적인 쿼리는 아래 사이트에서 참조
https://www.yalco.kr/@graphql-apollo/4-2/

Fragment 사용하기

Fragment

여러 쿼리에 사용될 수 있는, 재사용 가능한 필드셋 (반복되는 쿼리를 재사용하여 중복을 줄임)
중복을 줄임으로써 전체 코드를 간소화
서버단에서는 유니언, 인터베이스로 쿼리 중복을 간소화했다면 클라이언트에서는 fragment로 간소화
https://graphql-kr.github.io/learn/queries/

예를 들어, 아래와 같은 쿼리는

const GET_PEOPLE = gql`
  query GetPeople {
  people {
    id
    first_name
    last_name
    sex
    blood_type
    }
  }
`;

const GET_PERSON = gql`
  query GetPerson($id: ID!) {
    person(id: $id) {
      id
      first_name
      last_name
      sex
      blood_type
      serve_years
      role
      team
      from
      tools {
        __typename
        ... on Software {
          id
        }
        ... on Equipment {
          id
          count
        }
      }
    }
  }
`;

아래처럼 재사용되는 요소들을 fragment로 분리하여 중복을 제거할 수 있다.

const Names = gql`
  fragment names on People {
    first_name
    last_name
  }
`
const HealthInfo = gql`
  fragment healthInfo on People {
    sex
    blood_type
  }
`
const WorkInfo = gql`
  fragment workInfo on People {
    serve_years
    role
    team
    from
  }
`
const GET_PEOPLE = gql`
  query GetPeople {
  people {
    id
    ...names
    ...healthInfo
    }
  }
  ${Names}
  ${HealthInfo}
`;

fragment는 선언시 'fragment'로 선언하면 된다.

[GraphQL] GraphQL 서버 깊이 파보기 (2)

_Yeony — Sun, 13 Feb 2022 16:36:21 +0900

본 포스팅은 Inflearn 얄코님 강의를 수강하며 복습용으로 작성하였습니다.

https://www.inflearn.com/course/%EC%96%84%ED%8C%8D%ED%95%9C-graphql-apollo/dashboard

[무료] 얄팍한 GraphQL과 Apollo - 인프런 | 강의

⚡ 짧고 굵은 전체 90분 강좌! 사이트의 코드들을 복붙하며 빠르게 GraphQL을 배우고 아폴로 사용법을 익히세요., - 강의 소개 | 인프런...

www.inflearn.com

유니언과 인터페이스

이전 예제에서는 각각의 배열이 특정 스칼라 타입이나 특정 커스텀 데이터 타입을 반환했지만,
Union타입은 타입 여럿을 한 배열에 반환이 가능함

1. Equipment와 Supply를 함께 반환하기

given 데이터 타입 정의

//given.js 
//equipment와 supply를 함께 반환할 데이터 타입

const { gql } = require('apollo-server')
const dbWorks = require('../dbWorks.js')
const typeDefs = gql`
    union Given = Equipment | Supply   //Given 타입에 Equipment 또는 Supply를 받을 수 있음
`
const resolvers = {
    Query: {
    	//한 배열에 equipment와 supply를 둘다 넣어서 반환
        givens: (parent, args) => {
            return [
                ...dbWorks.getEquipments(args),
                ...dbWorks.getSupplies(args)
            ]
        }
    },
    Given: {
        __resolveType(given, context, info) {
        //해당 부분의 결과로 쿼리시 __typename 지정됨
            if (given.used_by) {
                return 'Equipment'
            }
            if (given.team) {
                return 'Supply'
            }
            return null
        }
    }
}
module.exports = {
    typeDefs: typeDefs,
    resolvers: resolvers
}

정의한 resolver를 루트 쿼리에 추가

//_queries.js

const typeDefs = gql`
    type Query {
        // ...
        givens: [Given]
    }
`

index.js에 given 모듈 추가

//index.js

// ...
const givens = require('./typedefs-resolvers/givens')
// ...
const typeDefs = [
    // ...
    givens.typeDefs
]
// ...
const resolvers = [
    // ...
    givens.resolvers
]
// ...

playground에서 테스트
givens 쿼리의 결과로 equipment와 supply 모두 반환

query {
  givens {
    __typename  //해당 데이터가 equipment인지 supply인지 나타내주기 위해 사용
    ... on Equipment {  //해당 데이터가 equipment인 경우 반환할 항목
      id
      used_by
      count
      new_or_used
    }
    ... on Supply {  //해당 데이터가 supply인 경우 반환할 항목
      id
      team
    }
  }
}

2. 인터페이스

유사한 객체 타입을 만들기 위한 공통 필드 타입
추상 타입 - 다른 타입에 implement 되기 위한 타입
Java의 인터페이스와 비슷한 역할

//공통으로 갖고있는 필드 : id, user_by

type Equipment {
    id: ID!
    used_by: Role!
    count: Int
    new_or_used: NewOrUsed!
}
...
type Software {
    id: ID!
    used_by: Role!
    developed_by: String!
    description: String
}

공통 필드를 갖고있는 tools.js (인터페이스) 정의

//tools.js

const { gql } = require('apollo-server')
const typeDefs = gql`
    interface Tool {   //interface 정의
        id: ID!
        used_by: Role!
    }
`
const resolvers = {
    Tool: {
        __resolveType(tool, context, info) {
        //들어온 데이터가 어떤 타입인지 구분
            if (tool.developed_by) {
                return 'Software'
            }
            if (tool.new_or_used) {
                return 'Equipment'
            }
            return null
        }
    }
}
module.exports = {
    typeDefs: typeDefs,
    resolvers: resolvers
}

//Tool을 implement한 Equipment
type Equipment implements Tool {
    id: ID!
    used_by: Role!
    count: Int
    new_or_used: NewOrUsed!
}

//Tool을 implement한 Software
type Software implements Tool {
    id: ID!
    used_by: Role!
    developed_by: String!
    description: String
}

index.js에 tools import

//index.js

// ...
const tools = require('./typedefs-resolvers/tools')
// ...
const typeDefs = [
    // ...
    tools.typeDefs
]
// ...
const resolvers = [
    // ...
    tools.resolvers
]
// ...

People 쿼리에 적용

//peopls.js 정의

const { gql } = require('apollo-server')
const dbWorks = require('../dbWorks.js')
const typeDefs = gql`
    type People {
        id: ID!
        first_name: String!
        last_name: String!
        sex: Sex!
        blood_type: BloodType!
        serve_years: Int!
        role: Role!
        team: ID!
        from: String!
        tools: [Tool]  //tool 인터페이스 타입
        givens: [Given] // given 유니언 타입
    }
`
const resolvers = {
    Query: {
        people: (parent, args) => dbWorks.getPeople(args),
        person: (parent, args) => dbWorks.getPeople(args)[0]
    }
}
module.exports = {
    typeDefs: typeDefs,
    resolvers: resolvers
}

//_queries.js 루트 쿼리에 추가

const typeDefs = gql`
    type Query {
        people: [People],
        // ...
    }
`

//index.js에 모듈 추가

// ...
const people = require('./typedefs-resolvers/people')
// ...
const typeDefs = [
    // ...
    people.typeDefs
]
// ...
const resolvers = [
    // ...
    people.resolvers
]
// ...

playground에 쿼리 테스트

query {
  people {
    id
    first_name
    last_name
    givens {	//given 타입 쿼리 
        __typename
    	... on Equipment {
      	id
      	used_by
      	count
      	new_or_used
    	}
    	... on Supply {
      	id
      	team
    	}
  	}	
    tools {	//tools interface 타입에 대한 쿼리 
      __typename
      ... on Equipment {
        id
        used_by
        count
        new_or_used
      }
      ... on Software {
        id
        used_by
        description
        developed_by
      }
    }
  }
}

+ 추가

Interface 타입과 Union 타입은 공통 필드를 갖고 있는지 없는지에 차이가 있음
Interface 타입을 구현한 객체는 Interface에 정의된 모든 필드를 갖고 있어야 함.

또한, 인터페이스 타입은 쿼리시 공통 부분으로 쿼리가 가능하다.
예를 들어, Equipment와 Software이 공통으로 갖고있는 id, used_by를 사용해 특정 쿼리를 만들 수 있음
참고 : https://devport.tistory.com/21

인자와 인풋타입

People 데이터 조건들로 필터 넣어 받아오기

//_queries.js


    type Query {
        ...
        peopleFiltered(
            team: Int, 
            sex: Sex, 
            blood_type: BloodType, 
            from: String
        ): [People]
        ...
    }

__queries.js에서 정의한 대로 인자들을 받아와서 args로 인자들을 넘겨줄 수 있음
받아서 처리하는 곳에서 sql 등 쿼리문을 사용하여 args를 기반으로한 where절 구현

//people.js

Query: {
    // ...
    peopleFiltered: (parent, args) => dbWorks.getPeople(args),
  }

playground에서 쿼리 호출

query {
  peopleFiltered (
    team: 1	//1 팀에 속하고
    blood_type: B	//b형인
    from: "Texas"	//Texas 출신만 쿼리
  ) {
    id
    first_name
    last_name
    sex
    blood_type
    serve_years
    role
    team
    from
  }
}

데이터를 페이지로 나누어 받아오기

paging 처리 방식

    //__queries.js
    
    type Query {
        ...
        peoplePaginated(
            page: Int!,
            per_page: Int!
        ): [People]
        ...
    }

//people.js

    Query: {
        // ...
        peoplePaginated: (parent, args) => dbWorks.getPeople(args), //내부에서 별도로 페이징 쿼리 진행
        // ...
    }

playground에서 쿼리 테스트

query {
//첫 페이지를 받아오고, 한 페이지당 7개의 결과를 받아와라
peoplePaginated(page: 1, per_page: 7) {	
    id
    first_name
    last_name
    sex
    blood_type
    serve_years
    role
    team
    from
  }
}

별칭으로 데이터 받아오기

한 요청으로 데이터를 받아오는 경우, 데이터를 특정 기준으로 분리해서 받아오고 싶을 때 유용

query {
  badGuys: peopleFiltered(sex: male, blood_type: B) {
    first_name
    last_name
    sex
    blood_type
  }
  newYorkers: peopleFiltered(from: "New York") {
    first_name
    last_name
    from
  }
}

인풋 타입

mutation에 들어가는 인자들이 많아지는 경우, 이를 보다 깔끔하게 하기 위해 인자들을 묶어서 실어보내는 방식

//people.js

const typeDefs = gql`
    ....
    //실제 정보를 입력할 때 요구되는 필드들
    input PostPersonInput {
        first_name: String!
        last_name: String!
        sex: Sex!
        blood_type: BloodType!
        serve_years: Int!
        role: Role!
        team: ID!
        from: String!
    }
`
const resolvers = {
    // ...
    Mutation: {
        postPerson: (parent, args) => dbWorks.postPerson(args),
    }
}

//_mutation.js

type Mutation {
  //mutation의 postPerson 명령 실행시 들어가는 인자 정의 - 깔끔하게 묶어서 전달할 수 있음!
    postPerson(input: PostPersonInput): People!
    ...
}

playground 쿼리 테스트

mutation {
//인자로 input을 전달
//이전에 정의한 postPersonInput 형식으로 서버에 데이터 전송
  postPerson(input: {	
    first_name: "Hanna"
    last_name: "Kim"
    sex: female
    blood_type: O
    serve_years: 3
    role: developer
    team: 1
    from: "Pusan"
  }) {
    id
    first_name
    last_name
    sex
    blood_type
    role
    team
    from
  }
}

* Apollo 서버를 사용해 graphQL로 백앤드단을 구현하는 방법 간단 연습 끝

추가 정보는 아래 공식 사이트에서 튜토리얼로 배워볼 수 있음

https://www.apollographql.com/docs/apollo-server/#:~:text=Apollo+Server+is+an+open,use+data+from+any+source.

[GraphQL] GraphQL 서버 깊이 파보기 (1)

_Yeony — Sun, 13 Feb 2022 15:39:41 +0900

본 포스팅은 Inflearn 얄코님 강의를 수강하며 복습용으로 작성하였습니다.

https://www.inflearn.com/course/%EC%96%84%ED%8C%8D%ED%95%9C-graphql-apollo/dashboard

[무료] 얄팍한 GraphQL과 Apollo - 인프런 | 강의

⚡ 짧고 굵은 전체 90분 강좌! 사이트의 코드들을 복붙하며 빠르게 GraphQL을 배우고 아폴로 사용법을 익히세요., - 강의 소개 | 인프런...

www.inflearn.com

서버 구성요소 모듈화

이전 강의에서 살펴본 typeDefs와 Resolver는 모두 index.js 한 파일에 작성을 한 형태였는데,

각각을 모듈별로 쪼개어 파일을 구성하여 사용할 수 있다.

https://www.apollographql.com/docs/apollo-server/api/apollo-server/

아폴로 서버 문서를 보면, 배열 형태로 typeDefs와 Resolvers를 구성할 수 있도록 되어있다.

typeDefs : 단일 변수 또는 배열로 지정 가능
resolvers : 단일 Object 또는 Merge된 배열로 가능
각각의 파일에 query 및 mutation 루트 타입 정의

//typedefs-resolvers/_queries.js

// ...
const typeDefs = gql`
    type Query {
        equipments: [Equipment]
    }
`
// ...

//typedefs-resolvers/_mutations.js

// ...
const typeDefs = gql`
    type Mutation {
      deleteEquipment(id: String): Equipment
    }
`
// ...

equipments 데이터의 typeDefs와 resolver 별도 정의

//typedefs-resolvers/equipments.js

// ...
const typeDefs = gql`
    type Equipment {
        id: String
        used_by: String
        count: Int
        new_or_used: String
    }
`
const resolvers = {
    Query: {
        equipments: (parent, args) => dbWorks.getEquipments(args),
    },
    Mutation: {
        deleteEquipment: (parent, args) => dbWorks.deleteItem('equipments', args),
    }
}
// ...

index.js에서 각각의 파일들을 import 해준 후, typeDefs와 resolvers 선언 시 배열로 넣어주어 모듈화 가능

//typedefs-resolvers/index.js

// ...
const queries = require('./typedefs-resolvers/_queries')
const mutations = require('./typedefs-resolvers/_mutations')
const equipments = require('./typedefs-resolvers/equipments'
// ...
const typeDefs = [
    queries,
    mutations,
    equipments.typeDefs,
]
const resolvers = [
    equipments.resolvers
]
// ...

추가로 supply 라는 새로운 모듈을 추가 한다면, Equipment와 동일하게 해당 typeDef와 resolver를 supplies.js 라는 파일에 정의하고, query와 mutation 파일에 해당 쿼리를 정의해주는 방식으로 추가 가능하다.
https://www.yalco.kr/@graphql-apollo/3-1/

GraphQL의 기본 타입들

1. 스칼라 타입

GraphQL 내장 자료형

    type EquipmentAdv {
        id: ID!
        used_by: String!
        count: Int!
        use_rate: Float
        is_new: Boolean!
    }

ID : 기본적으로는 String이나, 고유 식별자 역할임을 나타냄
String : UTF-8 문자열
Int : 부호가 있는 32비트 정수
Float : 부호가 있는 부동소수점 값
Boolean : 참/거짓
! 은 Non null을 의미하며, null인 경우 서버 내부에서 오류 반환

//equipment.js 내부에 equipmentAdvs를 위한 resolver 정의
//user_rate, is_new를 해당하는 스칼라 타입으로 변환
const resolvers = {
    Query: {
        // ...
        equipmentAdvs: (parent, args) => dbWorks.getEquipments(args)
            .map((equipment) => {
                if (equipment.used_by === 'developer') {
                    equipment.use_rate = Math.random().toFixed(2)
                }
                equipment.is_new = equipment.new_or_used === 'new'
                return equipment
            }),
    },
    // ...
}

//_queries.js
    type Query {
        ...
        equipmentAdvs: [EquipmentAdv]
        ...
    }

playground에서 테스트

query {
    equipmentAdvs {
        id
        used_by
        count
        use_rate
        is_new
    }
}

2. 열거 타입

Enum 타입의 데이터인 경우 enum 타입을 생성하여 데이터 타입을 지정해 줄 수 있다.
객체에 데이터가 Enum 타입에 정의되어 있지 않은 타입으로 지정되는 경우 Error가 발생한다.

//_enums.js  enum 예제
//Role 타입으로 설정된 데이터는 developer, desiner, planner로만,
//NewOrUsed 타입으로 설정된 데이터는 new, used 두 가지 값만 가능하다.

const { gql } = require('apollo-server')
const typeDefs = gql`
    enum Role {
        developer
        designer
        planner
    }
    enum NewOrUsed {
        new
        used
    }
`
module.exports = typeDefs

//index.js의 typeDefs에 enums 타입 추가

// ...
const enums = require('./typedefs-resolvers/_enums')
// ...
const typeDefs = [
    // ...
    enums,
    // ...
]

//equipments.js

const typeDefs = gql`
    type Equipment {
        id: ID!
        used_by: Role! //Role 타입에 설정되어있는 값만 들어갈 수 있다.
        count: Int!
        new_or_used: NewOrUsed! //NewOrUsed 타입에 설정되어있는 값만 들어갈 수 있다.
    }
    type EquipmentAdv {
        id: ID!
        used_by: Role!
        count: Int!
        use_rate: Float
        is_new: Boolean!
    }
`

playground에서 쿼리를 실행하여 결과를 확인해 볼 수 있다.
db에 enums에 설정되어있지 않은 값이 들어있으면 (예를 들어, used_by 값이 manager로 설정되어있으면) 쿼리 실행 중 에러가 발생한다.

query {
  equipments {
    id
    used_by
    count
    new_or_used
  }
equipmentAdvs {
    id
    used_by
    count
    use_rate
    is_new
  }
}

3. 리스트 타입

특정 타입의 배열을 반환

//equipments.js

const typeDefs = gql`
    // ...
    type EquipmentAdv {
        id: ID!
        used_by: Role!
        count: Int!
        use_rate: Float
        is_new: Boolean!,
        users: [String!]
    }
`
// ...
const resolvers = {
    Query: {
        // ...
        equipmentAdvs: (parent, args) => dbWorks.getEquipments(args)
            .map((equipment) => {
                if (equipment.used_by === 'developer') {
                    equipment.use_rate = Math.random().toFixed(2)
                }
                equipment.is_new = equipment.new_or_used === 'new'
                
                // 리스트 예제 
                // equipment 결과값의 1/2을 대상으로 
                // user라는 배열을 추가하고, 
                // db에 저장된 equipment.used_by와 같은 role을 갖고 있는 사람 중 1/5 확률로 
                // user 배열에 추가함
                if (Math.random() > 0.5) {
                    equipment.users = []
                    dbWorks.getPeople(args).forEach((person) => {
                        if (person.role === equipment.used_by && Math.random() < 0.2) {
                            equipment.users.push(person.last_name)
                        }
                    })
                }
                return equipment
            }),
    },
    // ...
}

선언부	users: null	users: []	users[..., null]
[String]	가능	가능	가능
[String!]	가능	가능	불가능
[String]!	불가능	가능	가능
[String!]!	불가능	가능	불가능

4. 객체 타입

사용자에 의해 정의된 타입들
ex) typeDefs, equipment 등..

[GraphQL] Apollo-server 셋팅

_Yeony — Tue, 8 Feb 2022 00:34:11 +0900

본 포스팅은 Inflearn 얄코님 강의를 수강하며 복습용으로 작성하였습니다.

https://www.inflearn.com/course/%EC%96%84%ED%8C%8D%ED%95%9C-graphql-apollo/dashboard

[무료] 얄팍한 GraphQL과 Apollo - 인프런 | 강의

⚡ 짧고 굵은 전체 90분 강좌! 사이트의 코드들을 복붙하며 빠르게 GraphQL을 배우고 아폴로 사용법을 익히세요., - 강의 소개 | 인프런...

www.inflearn.com

apollo-server 셋팅

1. 프로젝트 생성 및 실행 테스트

npm init
npm start // package.json에서 "start" : "nodemon index.js"로 초기 셋팅

2. Mock DB 모듈 삽입

mock DB는 https://gitlab.com/yalco/yalco-inflearn-graphql-apollo 의 2-1에 있는 폴더로 이용. 해당 폴더를 프로젝트 내부로 이동

//필요한 모듈 설치
npm i convert-csv-to-json
npm start

3. Apollo 서버 설치

npm i graphql apollo-server //아폴로 서버 모듈 설치

const database = require('./database')
const { ApolloServer, gql } = require('apollo-server')

//주고받을 데이터 형식 정의
const typeDefs = gql`
  type Query {
    teams: [Team]
  }
  type Team {
    id: Int
    manager: String
    office: String
    extension_number: String
    mascot: String
    cleaning_duty: String
    project: String
  }
`

//각 요청을 받았을 때 어떤 액션을 할 것인지 정의
const resolvers = {
  Query: {
    teams: () => database.teams
  }
}

//typeDefs와 resolvers를 인자로 받는 apollo server 생성
const server = new ApolloServer({ typeDefs, resolvers })
server.listen().then(({ url }) => {
console.log(`   Server ready at ${url}`)
})

typeDefs
- GraphQL 명세에서 사용될 데이터, 요청의 타입 지정
- gql(template literal tag)로 생성됨
resolver
- 서비스의 액션들을 함수로 지정
- 요청에 따라 데이터를 반환/입력/수정/삭제함

//서버 재실행
npm start

실행된 http://localhost:4000 에서 로컬 서버에 쿼리 및 테스트 가능

//조회 쿼리 테스트
query {
  teams {
    id
    manager
    office
    extension_number
    mascot
    cleaning_duty
    project
  }
}

Query 구현하기

1. 모든 team 리스트 받아오기

typeDefs에 Query 루트타입 및 teams 명령어 정의
쿼리 명령문 마다 반환될 데이터 형태를 지정

    type Query {
    	//teams라는 명령어는 team 리스트를 반환함
        teams: [Team]
    }

tepyDefs에 데이터 형태 정의

    //Teams 명령어에 사용될 team이라는 데이터의 형식 정의
    type Team {
        id: Int
        manager: String
        office: String
        extension_number: String
        mascot: String
        cleaning_duty: String
        project: String
    }

Resolver에 해당 함수 정의

const resolvers = {
  Query: {
  //teams 명령어는 database에 있는 teams를 반환함
  //실제 프로젝트에서는 DB를 조회하는 쿼리(sql, nosql 명령어) 사용
    teams: () => database.teams
  }
}

로컬 서버 playground에서 쿼리 테스트

query {
  teams{
    id,
    manager,
    office,
    extension_number,
    mascot,
    cleaning_duty,
    project,
  }
}

2. 특정 team만 받아오는 경우

args로 주어진 id에 해당하는 team만 필터링하여 반환

Query: {
    //...
    team: (parent, args, context, info) => database.teams
        .filter((team) => {
            return team.id === args.id
        })[0],
}

id를 인자로 받아 하나의 Team 데이터 반환

type Query {
    ...
    team(id: Int): Team
}

쿼리 테스트

query {
//team들 중 id가 1인 team만 반환
team(id: 1) {
    id
    manager
    office
    extension_number
    mascot
    cleaning_duty
    project
}
}

아래 자료 참고하여 equipmets, supplies 등 다양한 추가 쿼리 실습

https://www.yalco.kr/@graphql-apollo/2-2/

Mutation 구현하기

Query와 Mutation은 개발자들간의 합의된 명세

- 정보들을 받아올때는 쿼리

- 해당 정보를 추가, 수정, 삭제 할때는 Mutation

1. Equipment 데이터 삭제하기

typeDefs에 Mutation 정의

type Mutation {
	//Equipment를 삭제하고, 삭제된 Equipment를 반환
    deleteEquipment(id: String): Equipment
  }

resolve에 함수 정의

Mutation: {
      deleteEquipment: (parent, args, context, info) => {
      
      	  //실제로는 DB에 필요한 쿼리문 (sql이나 몽고DB 명령어처럼 실제 DB를 위해 필요한 코드
          //해당 실습에서는 mock DB를 활용하는 메소드로 대체
          const deleted = database.equipments
              .filter((equipment) => {
                  return equipment.id === args.id
              })[0]
          database.equipments = database.equipments
              .filter((equipment) => {
                  return equipment.id !== args.id
              })
          return deleted
      }
}

로컬 서버 playground에서 쿼리 테스트

mutation {
  deleteEquipment(id: "notebook") {
    id
    used_by
    count
    new_or_used
  }
}

* 해당 항목이 삭제된 것 반환값과 함께 확인 가능

2. Equipment 데이터 추가하기

typeDefs에 insert Mutation 정의

type Mutation {
	//insert한 후 해당 Equitment 반환
    insertEquipment(
        id: String,
        used_by: String,
        count: Int,
        new_or_used: String
    ): Equipment
    ...
}

resolve에 함수 정의

Mutation: {
	//여기서 args는 Equitment와 동일한 데이터 구조를 갖고 있음
    //해당 데이터를 db에 바로 push 
    insertEquipment: (parent, args, context, info) => {
        database.equipments.push(args)
        return args
    },
    //...
}

로컬 서버 playground에서 쿼리 테스트

mutation {
  insertEquipment (
    id: "laptop",
    used_by: "developer",
    count: 17,
    new_or_used: "new"
  ) {
    id
    used_by
    count
    new_or_used
  }
}

insert 한 결과 확인 가능 (query시 해당 데이터도 반환되는 것 볼 수 있음)

3. Equipment 데이터 수정하기

typeDefs에 update Mutation 정의

type Mutation {
    editEquipment(
        id: String,
        used_by: String,
        count: Int,
        new_or_used: String
    ): Equipment
    ...
}

resolve에 함수 정의

Mutation: {
    // ...
    editEquipment: (parent, args, context, info) => {
        return database.equipments.filter((equipment) => {
            return equipment.id === args.id
        }).map((equipment) => {
            Object.assign(equipment, args)
            return equipment
        })[0]
    },
    // ...
}

로컬 서버 playground에서 쿼리 테스트

mutation {
  editEquipment (
    id: "pen tablet",
    new_or_used: "new",
    count: 30,
    used_by: "designer"
  ) {
    id
    new_or_used
    count
    used_by
  }
}

[GraphQL] GraphQL 기초 (REST API와 비교, GraphQL 강점, Apollo란?)

_Yeony — Sat, 5 Feb 2022 18:13:33 +0900

본 포스팅은 Inflearn 얄코님 강의를 수강하며 복습용으로 작성하였습니다.

https://www.inflearn.com/course/%EC%96%84%ED%8C%8D%ED%95%9C-graphql-apollo/dashboard

[무료] 얄팍한 GraphQL과 Apollo - 인프런 | 강의

⚡ 짧고 굵은 전체 90분 강좌! 사이트의 코드들을 복붙하며 빠르게 GraphQL을 배우고 아폴로 사용법을 익히세요., - 강의 소개 | 인프런...

www.inflearn.com

GraphQL은 Rest API 방식의 단점을 보완할 수 있는 방법

Rest API 방식의 단점

아래와 같은 경우가 발생하기 쉽다.

- 불필요한 정보까지 받아오는 상황 (OverFetching)

- 필요한 정보를 못 받아오는 상황 (UnderFetching)

ex) OverFetching : 사용자의 이름만 필요한데, 이름 외적인 개인정보도 함께 Response로 받게 됨

UnderFetching : 특정 사용자 정보의 response로 또 다시 쿼리를 해야하는 상황.

Response로 1번 사용자가 속한 팀을 알아내고, 그 팀에 속한 팀원들을 알아야 하는 경우 -> 2번 쿼리 필요

GraphQL로 CRUD 해보기

https://gitlab.com/yalco/yalco-inflearn-graphql-apollo

코드는 위 얄코님 강의의 1-3으로 사용하였다.

1. query

GraphQL에서 Read에 해당하는 요청으로 REST API와 달리 원하는 정보만 쿼리할 수 있다.

각 팀 목록에서 manager와 office에 해당하는 정보만 쿼리 (Over fecthing 해결)

팀 1의 특정 정보와 팀 1에 속하는 팀 멤버의 값 리턴 (Under fetching 해결)

2. mutation

GraphQL에서 생성/수정/삭제 요청 시 사용하는 명령어

2-1. 팀 정보 생성 요청

2-2. 팀 정보 수정 요청

2-3. 팀 정보 삭제 요청

GraphQL의 강점

1. 필요한 정보만 선택하여 받아올 수 있음

Overfetching 문제 해결
데이터 전송량 감소

2. 여러 계층의 정보를 한꺼번에 받아올 수 있음

Underfetching 문제 해결
요청 횟수 감소

3. 하나의 endpoint에서 모든 요청을 처리

하나의 URI에서 POST로 모든 요청을 처리 가능
query, mutation 모두 POST로 처리됨

그러나, REST API의 장점도 충분히 많기 때문에 상황에 따라 적절하게 선택해 사용해야 한다.

Apollo 란?

GraphQL은 REST API와 마찬가지로 API 요청을 주고받는 명세일 뿐이다.
이를 사용하려면 GraphQL의 명세대로 백엔드/프론트엔드를 구현하거나, 이를 처리해주는 솔루션을 사용하여야 함
ex) GraphQL.js, GraphQL Yoga, AWS Amplify, Relay 등..
(https://graphql.org/code/ 에서 GraphQL을 위한 여러 솔루션들을 확인할 수 있다.)
Apollo는 이 솔루션들 중 하나
- BackEnd, FrontEnd 모두 제공
- 설정이 쉽고, 다양한 기능 제공
- Apollo Server 명세 : https://www.apollographql.com/docs/apollo-server/
- Apollo Client 명세 (React) : https://www.apollographql.com/docs/react/

[LeetCode] 617. Merge Two Binary Trees

_Yeony — Tue, 5 Oct 2021 22:25:49 +0900

https://leetcode.com/problems/merge-two-binary-trees/

class Solution {
    public TreeNode mergeTrees(TreeNode root1, TreeNode root2) {
        TreeNode head = root1;
        
        if(root1==null && root2==null) return null;
        if(root1==null && root2!=null) return root2;
        if(root1!=null && root2==null) return root1;
        
        root1.val+=root2.val;
        root1.left = mergeTrees(root1.left, root2.left);
        root1.right = mergeTrees(root1.right, root2.right);
        
        return root1;
    }
}

[LeetCode] 696. Count Binary Substrings

_Yeony — Mon, 4 Oct 2021 10:22:02 +0900

https://leetcode.com/problems/count-binary-substrings/

//풀이 봄
class Solution {
    /*public int countBinarySubstrings(String s) {
        int[] groups = new int[s.length()];
        int idx = 0;
        groups[0]=1;
        for(int i=1;i<s.length(); i++){
            if(s.charAt(i-1) != s.charAt(i)) {
                groups[++idx]=1;
            } else {
                groups[idx]++;
            }
        }
        
        int ans = 0;
        for(int i=1;i<=idx;i++) {
            ans+=Math.min(groups[i-1], groups[i]);
        }
        return ans;
        
    }*/
    
    public int countBinarySubstrings(String s) {
        int result = 0, prev = 0, cur = 1;
        
        for(int i=1;i<s.length();i++){
            if(s.charAt(i-1)!=s.charAt(i)) {
                result += Math.min(prev, cur);
                prev = cur;
                cur = 1;
            } else {
                cur++;
            }
        }
        return result+Math.min(prev,cur);
        
    }
}

[LeetCode] 101. Symmetric Tree

_Yeony — Mon, 4 Oct 2021 10:20:39 +0900

https://leetcode.com/problems/symmetric-tree/

class Solution {
    public boolean isSymmetric(TreeNode root) {
        return isMirror(root.right, root.left);
    }
    
    private boolean isMirror(TreeNode n1, TreeNode n2){
        if(n1==null || n2==null) return n1==n2;
        return (n1.val == n2.val && isMirror(n1.left, n2.right) && isMirror(n1.right, n2.left));
    }
}

[LeetCode] 226. Invert Binary Tree

_Yeony — Mon, 4 Oct 2021 10:20:04 +0900

https://leetcode.com/problems/invert-binary-tree/

class Solution {
    public TreeNode invertTree(TreeNode root) {
        TreeNode head= root;
        
        if(root!=null) invert(root);
        return head;
    }
    
    private void invert(TreeNode n1) {
        if(n1==null) return;  

        invert(n1.right);
        invert(n1.left);
        TreeNode tmp = n1.right;
        n1.right = n1.left;
        n1.left = tmp;
    }
}

[LeetCode] 543. Diameter of Binary Tree

_Yeony — Thu, 30 Sep 2021 08:31:36 +0900

https://leetcode.com/problems/diameter-of-binary-tree/

class Solution {
    int max=0;
    public int diameterOfBinaryTree(TreeNode root) {
        int left = findDepth(root.left);
        int right = findDepth(root.right);
        return Math.max(left + right, max);
    }
    
    int findDepth(TreeNode node) {
        if(node==null)    return 0;
        int left = findDepth(node.left);
        int right = findDepth(node.right);
        max = Math.max(left + right, max);
        return Math.max(left, right)+1;
    }
}

> 시간 복잡도 : O(n)

> 공간 복잡도 : O(n)