MobX를 활용한 GraphQL 데이터 관리

17 Oct 2023

mobx

GraphQL은 모던한 API 쿼리 언어로, 웹 애플리케이션에서 필요한 데이터를 효율적으로 가져오는 데 사용됩니다. 그러나 GraphQL로 데이터를 관리하려면 상태 관리 라이브러리가 필요합니다. 이때 MobX를 활용하면 효과적인 GraphQL 데이터 관리가 가능합니다.

MobX란?

MobX는 JavaScript 애플리케이션의 상태 관리를 위한 강력한 라이브러리입니다. MobX는 observables(관찰 가능한 데이터)와 actions(상태 변경 함수)를 사용하여 애플리케이션의 상태를 관리합니다. MobX는 상태 변화를 감지하고, 자동으로 화면을 업데이트하며, 필요한 데이터만 가져올 수 있도록 최적화합니다.

MobX와 GraphQL 연동하기

MobX Store 생성하기

GraphQL 데이터를 관리하기 위해 MobX store를 생성합니다. 이 store는 GraphQL로부터 받은 데이터를 저장하고, 필요에 따라 쿼리에 대한 응답을 업데이트합니다.

import { makeObservable, observable, action } from 'mobx';

class DataStore {
  @observable data = {};

  constructor() {
    makeObservable(this);
  }

  @action
  updateData(newData) {
    this.data = newData;
  }
}

const dataStore = new DataStore();
export default dataStore;

GraphQL 쿼리 실행하기

GraphQL 쿼리를 실행하여 데이터를 가져오는 함수를 작성합니다. 이 함수는 MobX store의 updateData 액션을 호출해 쿼리 응답을 업데이트합니다.

import { autorun } from 'mobx';
import { makeObservable, observable, action } from 'mobx';
import { graphql } from 'graphql-anywhere';
import { fetchDataFromAPI } from './api';
import dataStore from './dataStore';
import gql from './gql';

class QueryService {
  gqlQuery = gql`
    query {
      // GraphQL 쿼리 내용
    }
  `;

  constructor() {
    makeObservable(this);
  }

  @action
  fetchData() {
    fetchDataFromAPI(this.gqlQuery)
      .then(response => {
        graphql(dataStore.updateData, response, this.gqlQuery);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }
}

const queryService = new QueryService();

autorun(() => {
  // 애플리케이션 초기화 시 fetchData 함수 호출
  queryService.fetchData();
});

컴포넌트에서 데이터 사용하기

MobX store에 저장된 데이터를 컴포넌트에서 사용할 수 있습니다. MobX의 @observer 데코레이터를 사용하여 상태 업데이트마다 컴포넌트가 자동으로 렌더링되도록 설정합니다.

import React from 'react';
import { observer } from 'mobx-react-lite';
import dataStore from './dataStore';

const MyComponent = observer(() => {
  return <div>{dataStore.data}</div>;
});

export default MyComponent;

결론

GraphQL 데이터를 MobX로 관리하는 것은 간단하면서도 효율적인 방법입니다. MobX를 이용하여 GraphQL 쿼리 응답을 업데이트하고, 컴포넌트에서 필요한 데이터만 가져오는 것은 애플리케이션의 성능을 향상시킬 수 있습니다. MobX와 GraphQL을 결합하여 애플리케이션의 데이터 관리를 용이하게 할 수 있습니다.

#GraphQL #MobX