尝试使用 Apollo Query 和 Formik 在 React 渲染道具中使用函数时的 Typescript TS2349答案

【问题标题】：Typescript TS2349 when trying to use a function in a React render prop with Apollo Query and Formik尝试使用 Apollo Query 和 Formik 在 React 渲染道具中使用函数时的 Typescript TS2349
【发布时间】：2019-01-03 05:58:02
【问题描述】：

我是 TypeScript 的新手，现在已经坚持了两个晚上。我正在尝试将 Formik 用于带有渲染道具的 Apollo 查询，但我收到了 TS2349 错误，指出：

无法调用类型缺少调用签名的表达式。类型“QueryResult”在以下几行中没有兼容的调用签名...

const response = await listItems({
                    variables: {
                      filter: {
                        sku: {
                          eq: sku
                        }
                      }
                    },
                  });

完整代码如下：

import * as React from "react";
import { Formik } from "formik";
import { Form, Input, Label, Button } from "reactstrap";
import { Query, Mutation } from "react-apollo";
import gql from "graphql-tag";
import "react-table/react-table.css";

import {
  ListItemsQuery,
  ListItemsQueryVariables
} from "./API";
import { listItems } from "./graphql/queries";

interface FormValues {
  sku: string;
}

export const CheckSkuForm = () => {
  return (
    <div>
      <Query<ListItemsQuery, ListItemsQueryVariables>
        query={gql(listItems)}
        variables={{
          filter: {
            sku: {
              eq: "test"
            },
            inventory: {
              eq: true
            },
            scannedMissing: {
              eq: false
            },
            scannedFound: {
              eq: false
            }

          }
        }}
      >
        {listItems => (
          <Formik<FormValues>
            initialValues={{
              sku: "",
            }}
            onSubmit={async ({ sku }, { resetForm }) => {
              // call mutation

              const response = await listItems({
                variables: {
                  filter: {
                    sku: {
                      eq: sku
                    }
                  }
                },
              });
              console.log(response);
              resetForm();
            }}
          >
            {({ values, handleChange, handleSubmit }) => (
              <Form onSubmit={handleSubmit}>
                <Label>sku</Label>
                <Input
                  name="sku"
                  value={values.sku}
                  onChange={handleChange}
                  margin="normal"
                />
                <br />
                <Button type="submit">
                  Submit
                      </Button>
              </Form>
            )}
          </Formik>
        )}
      </Query>
    </div>
  );
};

有什么想法吗？

【问题讨论】：

查询组件的使用方法好像有误会。查询结果（本例中为listItems）上有一个data 属性，即查询返回的数据。这不是一个函数。你想在这里完成什么？我猜，在提交时更新查询的变量？也许您想改用 Mutation 组件？
这正是我想要完成的。根据 sku 输入的表单提交返回值列表。

标签： reactjs typescript react-apollo formik

【解决方案1】：

感谢@kingdaro，我能够弄清楚这一点。

原来查询组件没有附加功能来手动触发它。您最好使用 Apollo 团队的示例。 https://www.apollographql.com/docs/react/essentials/queries.html#manual-query

这是我使用 Apollo 和 Formik 重写的代码。

import React from 'react';
import { Formik } from "formik";
import { Form, Input, Label, Button } from "reactstrap";
import { ApolloConsumer } from 'react-apollo';
import gql from "graphql-tag";
import { listItems } from "./graphql/queries";

interface FormValues {
  sku: string;
}

export const CheckSkuForm = () => {

  return (
    <ApolloConsumer>
      {client => (
        <div>
          <Formik<FormValues>
            initialValues={{
              sku: "",
            }}
            onSubmit={async ({ sku }, { resetForm }) => {
              const { data }: any = await client.query({
                query: gql(listItems),
                variables: { filter: { sku: { eq: sku } } }
              });
              console.log({ data });
              resetForm();
            }}
          >
            {({ values, handleChange, handleSubmit }) => (
              <Form onSubmit={handleSubmit}>
                <Label>sku</Label>
                <Input
                  name="sku"
                  value={values.sku}
                  onChange={handleChange}
                  margin="normal"
                />
                <br />
                <Button type="submit">
                  Submit
                      </Button>
              </Form>
            )}
          </Formik>
        </div>
      )}
    </ApolloConsumer>
  );
};

【讨论】：