Насмешливая аполлонная ссылка - PullRequest
Новая
       17

Насмешливая аполлонная ссылка

0 голосов
/ 27 июня 2018

Я пытаюсь смоделировать запрос @client, но не получаю.

Я правильно посмеялся над запросом с сервера graphql, и он работает. 

import React from 'react';
import renderer from 'react-test-renderer';
import wait from 'waait';
import ExchangeRates from './ExchangeRates';
import { MockedProvider } from 'react-apollo/test-utils';
import { sucessMockrates, errorMockrates } from '../../mocks/exchangeRatesMock';

describe('ExchangeRates', () => {
  it('should render rate', async () => {
    const component = renderer.create(
      <MockedProvider mocks={[sucessMockrates]} addTypename={false}>
        <ExchangeRates />
      </MockedProvider>
    );
    await wait(0);
    const p = component.root.findByType('p');
    expect(p.children).toContain('AED: 3.67');
  });

  it('should render loading state initially', () => {
    const component = renderer.create(
      <MockedProvider mocks={[]}>
        <ExchangeRates />
      </MockedProvider>
    );

    const tree = component.toJSON();
    expect(tree.children).toContain('Loading...');
  });
  it('should show error UI', async () => {
    const component = renderer.create(
      <MockedProvider mocks={[errorMockrates]} addTypename={false}>
        <ExchangeRates />
      </MockedProvider>
    );

    await wait(0);

    const tree = component.toJSON();
    expect(tree.children).toContain('Error!');
  });
});

Я использую ссылку на сервер graphql из учебник apollo

Но когда я попытался проверить запрос apollo с локальным состоянием, я получил ошибку.

Мой запрос: 

import gql from 'graphql-tag';

export default gql`
  query {
    allocations @client {
      list
    }
  }
`;

и мои настройки клиента apollo: 

const cache = new InMemoryCache();

const defaultState = {
  allocations: {
    __typename: 'Allocations',
    list: [],
  },
};


const listQuery = gql`
  query getAllocations {
    allocations @client {
      list
    }
  }
`;

const stateLink = withClientState({
  cache,
  defaults: defaultState,
  resolvers: {
      addAllocation: (
        _,
        { userName },
        { cache }
      ) => {
        const previousState = cache.readQuery({ query: listQuery });
        const { list } = previousState.allocations;
        const data = {
          ...previousState,
          allocations: {
            ...previousState.allocations,
            list: [
              ...list,
              {
                userName
              },
            ],
          },
        };

        cache.writeQuery({ query: listQuery, data });
        return data.allocations;
      },
    },
  },
});

const client = new ApolloClient({
  link: ApolloLink.from([
    stateLink,
    new HttpLink({
      uri: 'https://w5xlvm3vzz.lp.gql.zone/graphql',
    }),
  ]),
  cache,
});

Мой тест с локальным состоянием Аполлона: 

import React from 'react';
import renderer from 'react-test-renderer';
import AllocationListPage from './AllocationListPage';
import { MockedProvider } from 'react-apollo/test-utils';
import { sucessMockAllocations } from '../../../mocks/allocationListMock';

describe('AllocationListPage', () => {
  it('should render list of allocations', () => {
    renderer.create(
      <MockedProvider mocks={[sucessMockAllocations]} addTypename={false}>
        <AllocationListPage />
      </MockedProvider>
    );
  });
});

Ошибка, которую я получил: Ошибка типа:

Невозможно уничтожить свойство list из 'undefined' или 'null'.

Мне нужно издеваться над начальным состоянием локального состояния Аполлона, и я не знаю, как.

Заранее спасибо.

1 Ответ

0 голосов
/ 28 июня 2018

Я установил состояние моей ссылки apollo с этим компонентом: 

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { ApolloProvider } from 'react-apollo';
import { makeExecutableSchema, addMockFunctionsToSchema } from 'graphql-tools';
import { ApolloClient } from 'apollo-client';
import { stateLink, cache } from '../graphql/stateLink';
import { ApolloLink } from 'apollo-link';
import { SchemaLink } from 'apollo-link-schema';

const setupClient = mocks => {
  const typeDefs = `
  type Query {
    test: String!
  }
`;

  const schema = makeExecutableSchema({ typeDefs });
  addMockFunctionsToSchema({
    schema,
    mocks,
    preserveResolvers: false,
  });

  return new ApolloClient({
    cache,
    link: ApolloLink.from([stateLink, new SchemaLink({ schema })]),
  });
};

class ApolloLinkStateSetup extends PureComponent {
  render() {
    return (
      <ApolloProvider client={setupClient(this.props.mocks)}>
        {this.props.children}
      </ApolloProvider>
    );
  }
}

ApolloLinkStateSetup.defaultProps = {
  mocks: {},
};

ApolloLinkStateSetup.propTypes = {
  children: PropTypes.object.isRequired,
  mocks: PropTypes.object,
};

export default ApolloLinkStateSetup;

Вы можете смоделировать запросы graphql с помощью makeExecutableSchema и addMockFunctionsToSchema из graphql-tools. Этот макет может быть полезен для создания передней части без задней части.

...