아바타 정보 페이지 제작 튜토리얼

나인크로니클의 최신 상태를 GraphQL로 쉽게 조회해볼 수 있는 서비스인 Mimir를 통해 간단하게 아바타 정보를 받아와 보드를 만들어보는 튜토리얼 입니다.

프로젝트 세팅

프로젝트는 빠르게 프론트를 만들어볼 수 있는 React와 TypeScript를 사용합니다.

npx create-react-app some-app-name --template @planetarium/9c-mimir-gql

먼저 Create React APP을 통해 기본적인 프로젝트 설정들을 받아온 후 실행해봅니다.

cd some-app-name
npm run codegen
npm run start

실행이 정상적으로 되었다면 준비는 끝입니다!

쿼리 수정

create-react-app을 통해 템플릿을 다운받았기 때문에 Mimir GQL을 사용하기 위한 대부분의 세팅이 되어있는 상태입니다.

GQL에서 불러오는 쿼리를 수정하고 싶다면 src/graphql/api.graphql 파일을 수정하면 됩니다. 아바타와 관련된 더 많은 정보를 불러보기 위해 action point를 불러오도록 아래와 같이 쿼리를 수정해봅니다.

query GetAvatarInformation($avatarAddress: Address!) {
  avatar(address: $avatarAddress) {
    address
    name
    level
  }
  actionPoint(address: $avatarAddress)
}

수정을 했다면 쿼리를 요청할 Client에 변경사항을 적용해줘야합니다. graphql-codegen 라이브러리를 통해 자동으로 생성될 수 있도록 세팅이 되어있으므로 codegen 명령어를 통해 생성할 수 있습니다.

npm run codegen

App.tsx 수정

쿼리와 Client를 수정했으니 src/App.tsx 코드를 수정할 차례입니다.

아까 수정했던 쿼리인 GetAvatarInformation를 useGetAvatarInformationQuery 함수를 통해 실제로 요청을 하고 있습니다. 아까 Client를 업데이트 했으므로 해당 함수 Response에 action point 정보가 생겼으니 해당 정보를 불러옵니다.

import { useState } from 'react';
import { useGetAvatarInformationQuery } from "./graphql/generated/graphql";
import './App.css';

function App() {
  const [avatarAddress, setAvatarAddress] = useState('');
  const [addressToFetch, setAddressToFetch] = useState('');

  const { loading, data } = useGetAvatarInformationQuery({
    variables: { avatarAddress: addressToFetch },
    skip: !addressToFetch
  });

  const handleFetch = () => {
    setAddressToFetch(avatarAddress);
  };

  return (
    <div className="app">
      <header className="app-header">
        <div className="input-group">
          <input
            type="text"
            value={avatarAddress}
            onChange={(e) => setAvatarAddress(e.target.value)}
            placeholder="Enter avatar address"
          />
          <button onClick={handleFetch}>Fetch</button>
        </div>

        {loading ? (
          <p>Loading...</p>
        ) : (
          <>
            {data && data.avatar ? (
              <>
                <p>Avatar Name: {data.avatar.name}</p>
                <p>Avatar Level: {data.avatar.level}</p>
                {/* Action Point를 추가로 보여줍니다. */}
                <p>Action Point: {data.actionPoint}</p>
              </>
            ) : (
              <p>No data available</p>
            )}
          </>
        )}
      </header>
    </div>
  );
}

export default App;

완성

모든 수정이 끝났습니다. 이제 다시 서버를 틀고 아바타 주소를 입력해 확인해봅니다.

npm run start

아바타 주소는 9cscan에서 확인이 가능하며 예시 아바타 주소는 "0x2E2dDdf0adC57b3C88E3ce3dBf2d3Eb5b9C41227"가 있습니다.

Mimir GQL에는 9c에 관련된 정보를 쿼리해볼 수 있는 많은 type들이 존재하니 활용하여 여러분만의 어플을 만들어보세요!

INFO

제작된 예제는 9c-examples 레포에 있으니 참고 바랍니다.