Typescript TS2349 при попытке использовать функцию в рендере React с Apollo Query и Formik

Question

Я новичок в TypeScript и теперь застрял на этом на две ночи.Я пытаюсь использовать Formik для запроса Аполлона с реквизитом рендера, и получаю ошибку 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 я смог понять это.

Оказывается, у компонента Query нет прикрепленной функции для его запуска вручную.Вам лучше использовать пример от команды 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>
  );
};