Graphql Prisma 연습 (1) - 단순 Query Users 모든 정보 가져오기

 

# 1. 백단 - 

 

# 타입 쿼리 : Users라는 요청문은 User라는 타임을 리스트로 반환한다. 

type Query {
  Users: [User!]
}

# prisma 문법으로 Users를 다 가져오고 리턴 / 반드시 비동기 처리할것

# 만약 return문으로 prisma. 이라면 자동으로 promise가 풀린다음 반환하므로 await가 필요없음

import { prisma } from "../../../generated/prisma-client";

export default {
  Query: {
    Users: async () => {
      const data = await prisma.users();
      return data;
    }
  }
};

 

# 1. 프론트단

# - gql문법 작성

import gql from "graphql-tag";

const USERS = gql`
  {
    Users {
      id
      name
      password
      picture
    }
  }
`;

# - 쿼리훅 작성

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

# - 쿼리훅 변수에 따른 컴포넌트 랜더링

    <>
      {loading && "loading..."}
      {!loading && error && "ERROR : 404"}
      {!loading && data && data.Users && <HomePresenter Users={data.Users} />}
    </>

 

 

DOS IMPACT - WEB Developer

KIM DO YOUNG

WEB : REACT JS | REACT NATIVE | GraphQL PRISMA