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

Question

我是 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>
  );
};

有什么想法吗？

Answer 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>
  );
};

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

Typescript TS2349 when trying to use a function in a React render prop with Apollo Query and Formik

typescript

reactjs

react-apollo

formik