[React/GraphQL] React에서 GraphQL 명령어 사용해 정보 불러오기

React란?

[Node.js] React.js 란? / React 사용법 ( create-react-app )

GraphQL이란?

[Node.js] GraphQL, Apollo 란? / 사용법 ( GraphQL 서버 만들기 )

 

// App.js


// gql : 사용할 명령어 작성하기 위한 모듈
// useQuery : 쿼리 명령어 사용하기 위한 모듈
// useMutation : 뮤테이션 명령어 사용하기 위한 모듈
import { gql, useQuery, useMutation } from "@apollo/client";

// 쿼리문 작성
const FEED_QUERY = gql`
  query Feed {
    Feed {
      id
      user {
        username
        avatar
      }
      file
      caption
      likeCount
      comments {
        user {
          username
          avatar
        }
        comment
      }
      commentCount
      createdAt
      isMine
      isLiked
    }
  }
`;

const LOGIN_MUTATION = gql`
  mutation login($username: String!, $password: String!) {
    login(username: $username, password: $password) {
      ok
      token
    }
  }
`;

function App() {
  // useQuery(쿼리문) 이용해, 작성한 쿼리 명령어 사용하기
  const { data } = useQuery(FEED_QUERY);
  
  // useMutation(쿼리문) 이용해, 작성한 쿼리 명령어 사용하기
  const [loggedinMutation] = useMutation(LOGIN_MUTATION, {
    variables: {
      username: "username",
      password: "password",
    }
  });
  ...
}