'网络错误:查询没有更多模拟响应:

时间:2019-09-17 22:18:42

标签: reactjs graphql react-apollo

我已经尝试了所有在线发布的建议,但仍然找不到错误的根本原因。我在网上可以找到的所有示例都是非常简单的示例。

我有一个组件,该组件发送一些查询以获取数据以预填充几个下拉列表和一个表,然后用户可以单击Delete / Update按钮与数据进行交互。我在render()中使用。在真正的环境中可以正常工作,但我无法通过单元测试。

package.json

"react-apollo": "^2.5.6",
"graphql": "^14.3.1",
"graphql-tag": "^2.10.1",

MyComponentClass

import gql from 'graphql-tag';

export class ...
constructor(props) {
    super(props);

    ....

    this.state = {
        platformSelectedValue: 'Web',     
        productSelectedValue: null,
        widgetSelectedValue: 1,
        trackingSelectedValue: 1,
    };


render() {

    return (
        <Container>
            <Query
                // fetchPolicy="no-cache" //to force refetch
                query={GET_ALL_INITIAL_DATA}
                variables={{            
                    platform: this.state.platformSelectedValue,
                    widget: {
                        id: this.state.widgetSelectedValue,
                    },
                }}
            >
            {({ loading, error, data }) => {
                if (loading) return <div>Still loading</div>;
                if (error) return <div>Error! {error.message}</div>;

                const productMenuItem = data.getProducts.map((product) => (
                    <MenuItem key={product.id} value={product.id}>
                        {product.scope}
                    </MenuItem>
                ));

                const widgetMenuItem = data.getWidgets.map((widget) => (
                    <MenuItem key={widget.id} value={widget.id}>
                        {widget.name}
                    </MenuItem>
                ));

                return (
                    <Content>
                        <FilterWrapper>
                            <Dropdown
                                label="Product"
                                aria-label="Product"
                                id="product"
                                value={this.state.productSelectedValue}
                                onChange={(e) => this.updateProductValue(e)}
                            >
                            {productMenuItem}
                            </Dropdown>

查询:

const EVENT_FRAGMENT = gql`
    fragment eventInfo on Event {
        name
        platform
    }
`;

//GET_PRODUCTS, GET_WIDGETS, and GET_TRACKING_PLANS are just simple queries that I pulled from another file.  I have verified all these queries are working on both local and end-to-end env
export const GET_ALL_INITIAL_DATA = gql`
    query($widget: EventSenderInput, $platform: Platform) {
        getProducts: ${GET_PRODUCTS}
        getWidgets: ${GET_WIDGETS}
        getTrackingPlans: ${GET_TRACKING_PLANS}
        getEvents: events(
        eventSender: $widget
        product: null
        trackingPlan: null
        platform: $platform) {
            ...eventInfo
            id
            properties {
                id
                isRequired
                propertyTemplate {
                    name
                    eventTypes
                }
            }
            schema
            eventType
            lifecycleState
        }
    }
    ${EVENT_FRAGMENT}
`;

在单元测试中:

import { myComponent, GET_ALL_INITIAL_DATA } from 'pathToMyComponentClass';

test('testing render state without any error', async () => {
    console.log('test(testing render state without any error, async () => {');

    const mockInitialGraphQL = [{
        request: {
            query: GET_ALL_INITIAL_DATA,
            variables: {
                platform: 'Web',
                widget: {
                   id: 1,
                },
            },
        },
        result: {
            data: mockInitialData,
        },
    },];
    const component = renderer.create(
        <MockedProvider mocks={mockInitialGraphQL} addTypename={false} cache={new InMemoryCache()}>
            <ViewEvents {...props} />
        </MockedProvider>,
    );
    await wait(0);

    const tree = component.toJSON();
    console.log(tree.children[1]);
});

这就是我在控制台中看到的

 { type: 'div',
        props: {},
        children: 
         [ 'Error! ',
           'Network error: No more mocked responses for the query: query ($widget: EventSenderInput, $platform: Platform) {\n  getProducts: products {\n    id\n    scope\n    __typename\n  }\n  getWidgets: eventSenders {\n    id\n    name\n    purpose\n    __typename\n  }\n  getTrackingPlans: trackingPlans {\n    id\n    name\n    purpose\n    __typename\n  }\n  getEvents: events(eventSender: $widget, product: null, trackingPlan: null, platform: $platform) {\n    ...eventInfo\n    id\n    properties {\n      id\n      isRequired\n      propertyTemplate {\n        name\n        eventTypes\n        __typename\n      }\n      __typename\n    }\n    schema\n    eventType\n    lifecycleState\n    __typename\n  }\n}\n\nfragment eventInfo on Event {\n  name\n  platform\n  __typename\n}\n, variables: {"platform":"Web","widget":{"id":1}}' ] }

它永远不会到达render()的返回部分,因为它总是在错误div =(

0 个答案:

没有答案