Почему компонент «реагирует» не реагирует на изменения, которые я сделал через «мутацию» через Аполлон, реагирует? - PullRequest
Новая
       16

Почему компонент «реагирует» не реагирует на изменения, которые я сделал через «мутацию» через Аполлон, реагирует?

0 голосов
/ 14 июня 2019

У меня есть приложение реагирования с apollo react для управления состоянием.Но я обнаружил, что мой компонент реакции не re-render при изменении через mutation.В моем приложении нет серверной части graphql.Все работает в передней части.Ниже приведен код инициализации apollo client: 

const cache = new InMemoryCache();

const client = new ApolloClient({
  cache,
  resolvers: {
    Mutation: {
      cart: (parent, args, context, info) => {
        console.log('resolvers:',parent, args, );
        return {products: args.name };
      },
    }
  }
});
cache.writeData({
  data: {
    cart: { products: 'prod1', __typename: 'Product' }
  }
});

Приведенный выше код предназначен для инициализации клиента и отправки исходных данных через cache.writeData.Он включает resolver, который возвращает измененный products с заданным аргументом.

Ниже приведен компонент запроса: 

const GET_CART = gql`
  {
    cart @client {
      products
    }
  }
`;

export const QueryTest = () => {
  return (
    <Query query={GET_CART}>
      {({ data, loading, error, refetch }) => {
        console.log('query resulte ', data, loading, error);
        return <button onClick={() => refetch()}>{data.cart.products}</button>;
      }}
    </Query>
  );
};

Он прослушивает данные запроса "cart -> products"изменения.

Ниже представлен компонент mutation: 

onst mutation = gql`
  mutation cart($name: string) {
    cart(name: $name) @client
  }
`;

export const MutationTest = () => {
  return (
    <Mutation
      mutation={mutation}
      update={(cache, { data }) => {
        console.log('update in mutation:', data);
        cache.writeQuery({
          query: GET_CART,
          data: data.cart
        });
      }}
    >
      {(cart, { data }) => {
        console.log('insdie:', data);
        return <button onClick={() => cart({ variables: { name: 'hello' } })}>mutate</button>;
      }}
    </Mutation>
  );
};

Когда я нажимаю кнопку, он отправляет имя hello на graphql server, и я вижу, что resolver естьсрабатывает, что возвращает новое изменение данных products.Функция update вызывается после того, как я нажимаю кнопку и записываю изменения в cache.

Но компонент Query не перерисовывается для этого изменения. Что-то не так с моим кодом?Я не знаю, что я пропустил.

...