Resolver 공부

양성진·2022년 10월 7일
0

GraphQl

목록 보기
2/2

Resolver

스키마에서 단일 필드의 데이터를 채우는 기능이다.
백단의 DataBase나 타사의 API에 있는 데이터를
사용자가 지정한대로 정의한 방법으로 데이터를 채운다.
자바스크립트의 단일 객체로 모든 서버의 Resolver를 정의 할수 있다고 한다.

const { ApolloServer, gql } = require('apollo-server')
const { ApolloServerPluginLandingPageLocalDefault } = require('apollo-server-core')

const books = [
    {
      title: 'The Awakening',
      author: {
        firstName:"paul",
        lastName:"chopin"
      },
      branch: 'riverside'
    },
    {
      title: 'City of Glass',
      author: {
        firstName:"Paul",
        lastName:"Auster"
      },
      branch: 'downtown'
    },
  ];
const libraries = [
    {
      branch: 'downtown'
    },
    {
      branch: 'riverside'
    },
  ];
const authors = [
    {
        firstName:"kate",
        lastName:"chopin"
    },
    {
        firstName:"Paul",
        lastName:"Auster"
    }
]
// Schema definition
const typeDefs = gql`
    type Library {
        branch:String!
        books:[Book!]
    }
    type Book {
      title: String
      author: Author!
    }

    type Author{
        firstName:String!
        lastName:String!
        fullName:String!
        }  
  
        type Query {
        books: [Book]
        libraries: [Library]
        authors:[Author]
        }
  `;


우선 기본으로 books,libraries,authors를 임시데이터로 만들어봤다.

그리고 스키마 타입을 알맞게 지정을 하였고,

그런 후 books안에 저자의 성,이름 풀네임 그리고 책의 제목을 뽑아내볼려고

resolvers를 만들었습니다.

// Resolver map
const resolvers = {
    Query: {
        books() {
            return books;
        },
        libraries(){
            return libraries;
        },
        authors(){
            return authors;
        }
    },
    Library:{
        books(parent){
            return books.filter(book => book.branch === parent.branch)
        }
    },
    Book:{
        author(parent){
            return{
                firstName:parent.author.firstName,
                lastName:parent.author.lastName,
                fullName:parent.author.fullName
            }
        }
    },
    Author:{
        fullName({firstName,lastName}){
            return `${firstName} ${lastName}`
        }
    }
};

결과

잘 출력

docs에 나와있는대로 맵핑이 된걸 그려보자면, 이런식으로 맵이 형성이 됨

그리고 쿼리들은 Parameter를 받을수도 있다.

const users = [
    {
        id:"1",
        userName:"sung"
    },
    {
        id:"2",
        userName:"Karina"
    }
]

users 라는 임시 데이터, id와 userName으로 키값을 받는 데이터를 만들었다.

	const typeDefs = gql`
    
    type User{
        id:ID!
        userName:String
    }

  
    type Query {
        users(id:ID!):User
        }
  `;

const resolvers = {
 Query: {
        users(_,{id}){
            return users.find((user)=> user.id === id);
        }
    },
    }

쿼리에는 users라는 함수에 {id} id를 파라미터값으로 받는다. User타입에 반환을 한다.

resolver에 보면 users에 id라는 파라미터를 받고

users 데이터 뭉치에서 user.id와 같은 id를 찾아내게 반환했다.

결과는 어떨까

나와 카리나가 잘 출력된것이 보인다.

근데 자세히 보면 둘은 다르다. 방식이 둘다 되는것인데

아폴로 클라이언트 스튜디오에서

Variables에 직접 userId값을 입력해도 되고

users옆에 적어줘도 좋다.

profile
프론트엔드 개발자를 꿈꾸는 돼지

0개의 댓글

관련 채용 정보