GraphQL-yoga 간단한 실습1

GraphQL-yoga 👀

create-react-app과 같이 초심자를 위해 환경설정 셋팅을 다 해놓아서 간단하게 서버를 구동시킬 수 있다.

실습해보기

• yoga install 하기

npm install graphql-yoga

실행초기

GQL-yoga를 통해 손쉽게 서버를 구동시킬 수 있다.

하지만 이상태로는 서버가 동작하지 않을것이다.

에러를 살펴보자 Error: No schema defined

스키마가 없다고 한다.

graphql이라는 폴더를 만들어주고 그 안에 schema.graphql파일과 resolvers.js파일을 만들어준다.

graphql/schema.graphql

type Query {
  name: String!
}

이렇게 선언해주면

graphql/resolvers.js

const resolvers = {
  Query: {
    name: () => 'LJH',
  },
};

export default resolvers;

Query를 resolvers.js을 통해 원하는 형태로 반환해줄 수 있다.

(Database, 다른 Database, 메모리 등 다양한 곳에 접근하여 데이터 반환 가능)

이제 정상적으로 서버가 구동되는것을 볼 수 있다. GQL SERVER RUNNING

주소창에 http://localhost:4000을 쳐서 들어가보자

실행결과

리졸버로 만든 형태가 반환되는것을 볼 수 있다.

---

이번에는 GQL방식으로 반환되게 해보자

graphql/schema.graphql

type Namu {
  name: String!
  age: Int!
  gender: String!
}

type Query {
  person: Namu!
}

graphql/resolvers.js

const namu = {
  name: 'LJH',
  age: 18,
  gender: 'male',
};

const resolvers = {
  Query: {
    person: () => namu,
  },
};

export default resolvers;

실행결과

원하는것만 뽑아서 볼 수 있게 되었다.

(뭔가 상당히 좋다.. 라는것을 느꼈다.)

---

조금더 복잡하게 만들어보자

graphql/schema.graphql

type Person {
  id: Int!
  name: String!
  age: Int!
  gender: String!
}

type Query {
  people: [Person]!
  person(id: Int!): Person
}

people은 배열로 받는다고 선언하기위해 []를 사용하였다.

person은 id를 통해 각 데이터를 불러오기로 하였다.

graphql/resolvers.js

const namu = [
  { id: 1, name: 'LJH', age: 18, gender: 'male' },
  { id: 2, name: 'FER', age: 25, gender: 'female' },
  { id: 3, name: 'EFS', age: 35, gender: 'male' },
];

const getById = (id) => {
  const peopleFilter = namu.filter((people) => (people.id = id));
  return peopleFilter[0];
};

const resolvers = {
  Query: {
    people: () => namu,
    person: (_, { id }) => getById(id),
  },
};

export default resolvers;

people은 namu의 데이터를 전부 배열로 보여주고

person은 첫번째 arg는 _로 필요없음 처리하고

두번째 arg는 id를 통해 데이터를 주기로 하였다.

실행결과