상태 관리 솔루션으로 Redux: Apollo 클라이언트로 이동(연결)🎉)

출신 배경

atCircle의 내부 도구 팀에서, 우리는 최근에 React 구성 요소를 도입하여 남아 있는 PHP 응용 프로그램을 업데이트했다.이 제안이 시작된 후 몇 달 동안, 우리는 이 응용 프로그램에 거의 100개의 React 구성 요소가 있다!😲
최근에 우리는 상태 관리 솔루션을 찾고 있다는 것을 발견했다.주의해라, 우리가 이 점에 도달하기 전에, 몇 개월과 몇 십 개의 부품이 걸렸다.상태 관리는 일반적으로 팀이 필요로 하기 전에 사용할 수 있는 도구이다.어플리케이션에 상태 관리 솔루션을 통합하면 많은 이점이 있을 수 있지만 복잡성을 초래할 수 있으므로 실제로 필요한 경우 사용하지 마십시오.
복잡성을 말하자면 전형적인'전향'상태 관리 솔루션Redux에 대한 불평은 샘플 파일이 너무 많아서 시작하기 어렵다는 것이다.본고에서 우리는 더욱 가벼운 해결 방안을 연구할 것이다. 이 해결 방안의 부가적인 장점은 그것을 사용하는 사람들에게 기본적인 GraphQL 체험을 제공하는 것이다.
동그라미 위🛠 팀, 우리는 우리의 미래 창고에 GraphQL이 포함될 것을 알고 있습니다.사실 이상적인 장면에서 우리는 어느 지점에서 회사 범위의 데이터 그림을 가지고 GraphQL을 통해 일치하게 데이터에 접근하고 변이할 것이다.그러나 단기간 내에 우리는 단지 저마찰 방식을 찾아 GraphQL을 창고의 일부분에 도입하고 개발자가 저압력의 방식으로 이 기술에 대해 사고할 수 있도록 허락할 뿐이다.GraphQL은 클라이언트 상태 관리 솔루션으로서 apollo-client 같은 라이브러리를 사용하기 때문에 완벽한 입문 방식이라고 생각합니다.이런 방법의 개념 검증의 고급 실현을 살펴봅시다!

클라이언트 구성

우선, 우리는 몇 가지 소프트웨어 패키지를 도입해야 한다.

yarn add @apollo/react-hooks apollo-cache-inmemory
apollo-client graphql graphql-tag react react-dom

아래에서 클라이언트에 대한 전체 정보를 찾을 수 있습니다.다음은 클라이언트 모드별 섹션입니다.

import React from "react";
import ReactDOM from "react-dom";

import gql from "graphql-tag";
import { ApolloClient } from "apollo-client";
import { ApolloProvider } from "@apollo/react-hooks";
import { InMemoryCache } from "apollo-cache-inmemory";

import App from "./App";
import userSettings from "./userSettings";

const typeDefs = gql`
  type AppBarColorSetting {
    id: Int!
    name: String!
    setting: String!
  }
  type Query {
    appBarColorSetting: AppBarColorSetting!
  }
  type Mutation {
    updateAppBarColorSetting(setting: String!): AppBarColorSetting!
  }
`;

const resolvers = {
  Query: {
    appBarColorSetting: () => userSettings.appBarColorSetting
  },
  Mutation: {
    updateAppBarColorSetting: (_, { setting }) => {
      userSettings.appBarColorSetting.setting = setting;
      return userSettings.appBarColorSetting;
    }
  }
};

const client = new ApolloClient({
  cache: new InMemoryCache({
    freezeResults: true
  }),
  typeDefs,
  resolvers,
  assumeImmutableResults: true
});

const TogglesApp = () => (
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>
);

ReactDOM.render(<TogglesApp />, document.getElementById("root"));

우선, 우리는 index.js과typeDefs를 정의한다.resolvers 유형에는 필수 AppBarColorSetting, id 및 name 필드가 있습니다.이것은 GraphQL 조회와 변이를 통해 응용 프로그램 표시줄의 색을 얻을 수 있도록 합니다!

type AppBarColorSetting {
  id: Int!
  name: String!
  setting: String!
}

다음은 setting 유형을 정의하여 Query 가져오기 위한 것입니다.

type Query {
  appBarColorSetting: AppBarColorSetting!
}

마지막으로, 업데이트하기 위해 appBarColorSetting 유형을 정의해야 합니다. Mutation:

type Mutation {
  updateAppBarColorSetting(setting: String!): AppBarColorSetting!
}

마지막으로, 우리는 우리의 고객을 세웠다.일반적으로 사용자가 사용하는 속성 실례화appBarColorSetting를 발견할 수 있습니다.그러나 우리는 ApolloClient과link를 추가했기 때문에 추가할 필요가 없다cache.그러나, 우리는 확실히 익숙하지 않을 수도 있는 속성을 추가했다.apolloclient2.6부터 resolvers 속성을 link 로 설정하면 캐시 결과 대상을 수정하지 않을 자신이 있음을 알 수 있습니다.이것은 현저한 성능 개선을 가져올 수 있다.불변성을 강제하기 위해 assumeImmutableResults 속성을 true 에 추가하고 freezeResults 로 설정할 수 있습니다.비생산 환경에서 돌연변이 동결 대상은 현재 엄격한 모델에서 유용한 이상을 일으킬 것이다.자세한 내용은 에서 온 “What’s new in Apollo Client 2.6” 게시물을 참조하십시오.

const client = new ApolloClient({
  cache: new InMemoryCache({
    freezeResults: true
  }),
  typeDefs,
  resolvers,
  assumeImmutableResults: true
});

그렇습니다!이제 이것inMemoryCache을 true에게 전달하기만 하면 우리는 조회와 변이를 작성할 수 있습니다!🚀

const TogglesApp = () => (
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>
);

클라이언트 데이터 조회

이제 GraphQL을 사용하여 클라이언트 캐시를 질의합니다.이 개념 증명에서 우리는 단지 JSON blob에서 우리의 client 초기 상태를 정의했을 뿐이다.

{
  "appBarColorSetting": {
    "id": 1,
    "name": "App Bar Color",
    "setting": "primary",
    "__typename": "AppBarColorSetting"
  }
}

ApolloProvider 속성을 사용하여 유형을 정의해야 합니다.
그리고 우리는 자신의 userSettings 파일에서 조회를 정의합니다.단, 쿼리를 호출하는 같은 파일에서, 심지어 __typename 파일에서 정의할 수 있습니다.

import gql from "graphql-tag";

const APP_BAR_COLOR_SETTING_QUERY = gql`
  query appBarColorSetting {
    appBarColorSetting @client {
      id
      name
      setting
    }
  }
`;

export default APP_BAR_COLOR_SETTING_QUERY;

이 조회에 관해서 주의해야 할 가장 중요한 것은 .js 지령의 사용이다.클라이언트에 특정되기 때문에 .graphql 조회에 추가하기만 하면 됩니다.다음은 이 쿼리를 호출하는 방법을 살펴보겠습니다.

import React from "react";
import { useQuery } from "@apollo/react-hooks";

import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";

import SettingsComponent from "./components/SettingsComponent";
import APP_BAR_COLOR_SETTING_QUERY from "./graphql/APP_BAR_COLOR_SETTING_QUERY";

function App() {
  const { loading, data } = useQuery(APP_BAR_COLOR_SETTING_QUERY);

  if (loading) return <h2>Loading...</h2>;
  return (
    <div>
      <AppBar position="static" color={data.appBarColorSetting.setting}>
        <Toolbar>
          <IconButton color="inherit" aria-label="Menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" color="inherit">
            State Management with Apollo
          </Typography>
        </Toolbar>
      </AppBar>
      <SettingsComponent
        setting={
          data.appBarColorSetting.setting === "primary"
            ? "secondary"
            : "primary"
        }
      />
    </div>
  );
}

export default App;

주의: 우리는 이 응용 프로그램에서 Material-UI 을 사용하지만, 분명히 사용자 인터페이스 프레임워크의 선택은 당신에게 달려 있습니다.🤷‍♂️

const { loading, data } = useQuery(APP_BAR_COLOR_SETTING_QUERY);

기본 마운트 표시기를 표시한 다음 @client 속성으로 appBarColorSetting 프로그램 표시줄을 렌더링합니다.Apollo 클라이언트 개발 도구를 사용하면 캐시에 있는 데이터를 똑똑히 볼 수 있습니다.

클라이언트 데이터 변이 및 캐시 업데이트

data.appBarColorSetting.setting 구성 요소의 이 코드를 알아차렸을 수도 있습니다.이것은 현재 값에 따라 color 의 값을 대체하고 우리에게 전달할 뿐입니다 App.다음은 이 구성 요소와 GraphQL 돌연변이를 어떻게 촉발하는지 연구할 것입니다.

<SettingsComponent
  setting={
    data.appBarColorSetting.setting === "primary" ? "secondary" : "primary"
  }
/>

우선 우리의 돌변을 살펴보자.

import gql from "graphql-tag";

const UPDATE_APP_BAR_COLOR_SETTING_MUTATION = gql`
  mutation updateAppBarColorSetting($setting: String!) {
    updateAppBarColorSetting(setting: $setting) @client
  }
`;

export default UPDATE_APP_BAR_COLOR_SETTING_MUTATION;

다시 한 번 주의하십시오. 저희 클라이언트setting는 돌연변이 SettingsComponent 명령을 사용했습니다.이러한 변이는 매우 간단하다. 필요한 설정 문자열을 전송하고 설정을 업데이트한다.
다음은 Dell@client에서 이러한 변이를 이용한 모든 코드를 찾을 수 있습니다.

import React from "react";
import { useMutation } from "@apollo/react-hooks";

import Button from "@material-ui/core/Button";

import UPDATE_APP_BAR_COLOR_SETTING_MUTATION from "../graphql/UPDATE_APP_BAR_COLOR_SETTING_MUTATION";
import APP_BAR_COLOR_SETTING_QUERY from "../graphql/APP_BAR_COLOR_SETTING_QUERY";

function SettingsComponent({ setting }) {
  const [updateUserSetting] = useMutation(
    UPDATE_APP_BAR_COLOR_SETTING_MUTATION,
    {
      variables: { setting },
      update: cache => {
        const data = cache.readQuery({
          query: APP_BAR_COLOR_SETTING_QUERY
        });

        const dataClone = {
          ...data,
          appBarColorSetting: {
            ...data.appBarColorSetting,
            setting
          }
        };

        cache.writeQuery({
          query: APP_BAR_COLOR_SETTING_QUERY,
          data: dataClone
        });
      }
    }
  );
  return (
    <div style={{ marginTop: "50px" }}>
      <Button variant="outlined" color="primary" onClick={updateUserSetting}>
        Change color
      </Button>
    </div>
  );
}

export default SettingsComponent;

우리가 중점적으로 주목하고 싶은 이 코드의 재미있는 부분은 다음과 같다.

const [updateUserSetting] = useMutation(
  UPDATE_APP_BAR_COLOR_SETTING_MUTATION,
  {
    variables: { setting },
    update: cache => {
      const data = cache.readQuery({
        query: APP_BAR_COLOR_SETTING_QUERY
      });

      const dataClone = {
        ...data,
        appBarColorSetting: {
          ...data.appBarColorSetting,
          setting
        }
      };

      cache.writeQuery({
        query: APP_BAR_COLOR_SETTING_QUERY,
        data: dataClone
      });
    }
  }
);

여기에서 우리는 apollo/react 갈고리updateAppBarColorSetting 갈고리를 사용하여 우리의 변이와 변수를 전달하고 업데이트 방법에서 캐시를 업데이트합니다.우리는 우선 캐시에서 SettingsComponent 의 현재 결과를 읽은 다음 useMutation 을 APP_BAR_COLOR_SETTING_QUERY 이 구성 요소에 전달되는 설정으로 업데이트한 다음 업데이트된 appBarColorSetting.setting 를 prop 로 다시 작성합니다.객체appBarColorSetting를 직접 업데이트하지 않고 클론을 복제하여 클론 내에서 업데이트 APP_BAR_COLOR_SETTING_QUERY 한 다음 클론 data 객체를 캐시에 다시 씁니다.이것은 우리의 응용 프로그램 표시줄을 새 색으로 업데이트하는 것을 촉발합니다!우리는 현재 apollo 클라이언트를 클라이언트 상태 관리 솔루션으로 사용합니다!🚀

배달

코드를 더 깊이 연구하려면 CodeSandbox can be found here 를 사용하십시오.물론 이것은 매우 가식적인 예이지만, 이것은 이것이 얼마나 쉬운지 나타낸다 leverage apollo-client as a state management solution.이것은 GraphQL과 Apollo 세트 라이브러리와 도구를 GraphQL 경험이 거의 없는 팀에 소개할 수 있는 좋은 방법이다.일단 이 기본 인프라가 도착하면 GraphQL의 사용을 확장하는 것은 매우 간단하다.
저는 여러분의 생각과 피드백을 기꺼이 듣고 싶습니다. 저는 당신이 이 글을 통해 유용한 것을 배우기를 바랍니다.