Apollo Client React и лучшие местные практики - PullRequest
Новая
       9

Apollo Client React и лучшие местные практики

0 голосов
/ 01 апреля 2020

Я работаю над своим первым приложением GraphQL React Client и не уверен насчет некоторых лучших практик.

У меня есть запрос, который возвращает меня из API для отображения на карте. В компоненте map.js я получаю данные с помощью этого запроса: 

const GET_PLACES_ON_MAP = gql`
  query Region($input: MapInput!) {
    map(input: $input) {
      places {
        id
        name
        distance
        long
        lat
      }
      infos {
        totalPlacesInArea
        responseTime
      }
    }
  }
`;

const { loading, error, data } = useQuery(GET_PLACES_ON_MAP, someQueryParams);

Ответ включает infos об общем количестве мест и времени ответа ответа API. Этот infos объект должен использоваться и в других компонентах (например, в некоторой панели инструментов), и он изменяется каждый раз, когда в компоненте карты делается новый запрос.

Мой вопрос № 1 :

Как лучше всего использовать infos в другом компоненте, который не запрашивает сам API?

Моей первой попыткой было сохранить infos в объекте графического локального состояния, как в следующий код мутации и резольвера (это устанавливает информацию в локальном состоянии, но я получаю бесконечный рендеринг компонента карты): 

const SET_API_INFO = gql`
  mutation {
    setApiInfo(params: $params) @client
  }
`;

const GET_API_INFO = gql`
  {
    apiInfo @client {
      totalPlacesInArea
      responseTime
    }
  }
`;

const resolvers = {
  Mutation: {
    setApiInfo: (_root, variables, { cache, getCacheKey }) => {
      const { apiInfo } = cache.readQuery({ query: GET_API_INFO });
      const { params } = variables;
      _.map(params, (value, key) => {
        apiInfo[key] = value;
      });
      cache.writeData({ data: { apiInfo } });
    },
  },
};

Мой вопрос № 2 :

Я искал какое-то учебное пособие или проект с открытым исходным кодом, который использует Apollo Client & React, чтобы узнать больше об архитектуре действительно сложного приложения. Есть ли где-нибудь хороший пример, который идет дальше, чем запрос, мутация, подписка ?

...