在控制台中使用React-hooks useEffect警告进行React Apollo

时间:2019-12-11 17:32:41

标签: reactjs graphql react-apollo

以下控制台警告困扰了我好几天...

Warning: The final argument passed to useEffect changed size between renders. The order and size of this array must remain constant.        react-dom.development.js:530

Previous: [true, 1, , ]
Incoming: [false, 7, , [object Object], function () { return queryData.afterExecute({ lazy: lazy }); }, 0]
    in SampleQuery (created by App)
    in ApolloProvider (created by App)
    in App

Warning: The final argument passed to useEffect changed size between renders. The order and size of this array must remain constant.        react-dom.development.js:530

Previous: []
Incoming: [function () {
        return function () { return queryData.cleanup(); };
    }]
    in SampleQuery (created by App)
    in ApolloProvider (created by App)
    in App

该应用的代码如下...

app.tsx

import React from 'react';

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';
import {ApolloProvider} from '@apollo/react-hooks';

import SampleQuery from "./sample-query";

interface AppProps {
    compiler: string;
    framework: string;
}

const App = (props: AppProps) => {

    const cache = new InMemoryCache();
    const link = new HttpLink({
        uri: 'http://localhost:4000/',
    });


    const client = new ApolloClient({
        // Provide required constructor fields
        cache: cache,
        link: link,

        // Provide some optional constructor fields
        name: 'react-web-client',
        version: '1.3',
        queryDeduplication: false,
        defaultOptions: {
            watchQuery: {
                fetchPolicy: 'cache-and-network',
            },
        }
    });

    return (
        <ApolloProvider client={client}>
            <h1>Hello from {props.compiler} and {props.framework}!</h1>
            <SampleQuery />
        </ApolloProvider>
    );
};

export default App;

sample-query.tsx ...

import React from 'react'
import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag'

interface Link {
    id: string;
    description: string;
}

const SAMPLE_QUERY = gql`{
    feed {
        links {
            id
            description
        }
    }
}`;

const SampleQuery = () => {

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

    if (loading) return <p>Loading ...</p>;

    const links = (data && data.feed.links) || [];

    return (<ul>
          {links.map((link:Link, idx:number) => {
              return (
                <li key={idx}>
                    <span>{link.id}</span>
                    <span> : </span>
                    <span>{link.description}</span>
                </li>
              );
          })}
      </ul>)
};

export default SampleQuery;

我不确定为什么会收到警告,因为我很接近React Apollo文档中的示例。希望这里有人曾经经历过,并且可以为我指明正确的方向。

0 个答案:

没有答案