Graphql Prisma 연습 (2) - User Mutation 정보 추가하기

 

# 백단

# 타입을 정의합니다.

type Query {
  Users: [User!]
}

type Mutation {
  createUser(name: String!, password: String!, picture: String): User!
}

# 단순히 정보가 들어오면 -> prisma.createUser를 합니다.

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

export default {
  Query: {
    Users: async () => {
      const data = await prisma.users();
      return data;
    }
  },
  Mutation: {
    createUser: async (_, { name, password, picture }) => {
      const res = prisma.createUser({ name, password, picture });
      return res;
    }
  }
};

 

# 프론트 단

# input을 쉽게 받기 위해 -> input훅을 만들어 value랑 onChange를 리턴합니다

import React, { useState } from "react";

export default (defaultValue = "") => {
  const [value, setValue] = useState(defaultValue);
  const onChange = e => {
    setValue(e.target.value);
  };
  return { value, onChange };
};

 

# gql 문법으로 mutation문을 작성합니다.

const CREATE_USER = gql`
  mutation CreateUser($name: String!, $password: String!, $picture: String) {
    createUser(name: $name, password: $password, picture: $picture) {
      id
      name
      picture
      password
    }
  }
`;

 

#--------------------------------------------------------------------------------------------------------------------------

# useInput훅을 3개 만들어 각각 이름,비번,사진을 받습니다.

  const name = useInput("");
  const picture = useInput("");
  const password = useInput("");

 

# useMutation을 이용해서, 위에서 작성한 gql을 넣고, 배열로 두가지 값을 받는데

#첫번째는 , 해당 mutation을 실행

#두번째는, 실행 결과 데이터 참조

  const [createUser, { createUserData }] = useMutation(CREATE_USER);

 

# form 작성했을때의 서밋 이벤트를 핸들하는 로직

# form 을 제출했을때, mutation 이름 ( 변수를 넣고 ) 시행합니다. 

  const handleOnSubmit = e => {
    e.preventDefault();
    console.log(name, password, picture, "생성합니다.");
    createUser({
      variables: {
        name: name.value,
        password: password.value,
        picture: picture.value
      }
    });
  };

 

# 대망의 폼 작성

      <div>
        <h2> Celeb User Create </h2>
        <form onSubmit={handleOnSubmit}>
          <input {...name}></input>
          <input {...password}></input>
          <input {...picture}></input>
          <button>submit</button>
        </form>
      </div>

 

 

DOS IMPACT - WEB Developer

KIM DO YOUNG

WEB : REACT JS | REACT NATIVE | GraphQL PRISMA