Mixing
Typescript TS2349 when trying to use a function in a React render prop with Apollo Query and Formik
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
I'm new to TypeScript and have now been stuck on this for two nights. I'm trying to use Formik for Apollo's Query with a render prop and I'm getting a TS2349 error stating that:
Cannot invoke an expression whose type lacks a call signature. Type 'QueryResult' has no compatible call signatures on the following lines...
const response = await listItems({
variables: {
filter: {
sku: {
eq: sku
}
}
},
});
Full code is as follows :
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>
);
};
Any thoughts?
reactjs typescript react-apollo formik
asked Jan 3 at 5:58
Shawn MatthewsShawn Matthews
589216
add a comment |
0
I'm new to TypeScript and have now been stuck on this for two nights. I'm trying to use Formik for Apollo's Query with a render prop and I'm getting a TS2349 error stating that:
Cannot invoke an expression whose type lacks a call signature. Type 'QueryResult' has no compatible call signatures on the following lines...
const response = await listItems({
variables: {
filter: {
sku: {
eq: sku
}
}
},
});
Full code is as follows :
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>
);
};
Any thoughts?
reactjs typescript react-apollo formik
asked Jan 3 at 5:58
Shawn MatthewsShawn Matthews
589216
It seems there's a misunderstanding of how to use the Query component. The query result (listItemsin this case) has adataproperty on it, which is the data returned from the query. It's not a function. What are you trying to accomplish here? I'm guessing, update the query's variables on submit? Maybe you wanted to use the Mutation component instead?
– kingdaro
Jan 3 at 6:21
That is exactly what I'm trying to accomplish. Return a list of the values based on the form submission for the input of sku.
– Shawn Matthews
Jan 3 at 6:23
add a comment |
0
0
0
1
I'm new to TypeScript and have now been stuck on this for two nights. I'm trying to use Formik for Apollo's Query with a render prop and I'm getting a TS2349 error stating that:
Cannot invoke an expression whose type lacks a call signature. Type 'QueryResult' has no compatible call signatures on the following lines...
const response = await listItems({
variables: {
filter: {
sku: {
eq: sku
}
}
},
});
Full code is as follows :
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>
);
};
Any thoughts?
reactjs typescript react-apollo formik
asked Jan 3 at 5:58
Shawn MatthewsShawn Matthews
589216
I'm new to TypeScript and have now been stuck on this for two nights. I'm trying to use Formik for Apollo's Query with a render prop and I'm getting a TS2349 error stating that:
Cannot invoke an expression whose type lacks a call signature. Type 'QueryResult' has no compatible call signatures on the following lines...
const response = await listItems({
variables: {
filter: {
sku: {
eq: sku
}
}
},
});
Full code is as follows :
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>
);
};
Any thoughts?
reactjs typescript react-apollo formik
reactjs typescript react-apollo formik
asked Jan 3 at 5:58
Shawn MatthewsShawn Matthews
589216
asked Jan 3 at 5:58
Shawn MatthewsShawn Matthews
589216
edited Jan 3 at 19:46
Shawn Matthews
asked Jan 3 at 5:58
Shawn MatthewsShawn Matthews
589216
asked Jan 3 at 5:58
Shawn MatthewsShawn Matthews
589216
asked Jan 3 at 5:58
Shawn MatthewsShawn Matthews
589216
589216
It seems there's a misunderstanding of how to use the Query component. The query result (listItemsin this case) has adataproperty on it, which is the data returned from the query. It's not a function. What are you trying to accomplish here? I'm guessing, update the query's variables on submit? Maybe you wanted to use the Mutation component instead?
– kingdaro
Jan 3 at 6:21
That is exactly what I'm trying to accomplish. Return a list of the values based on the form submission for the input of sku.
– Shawn Matthews
Jan 3 at 6:23
add a comment |
It seems there's a misunderstanding of how to use the Query component. The query result (listItemsin this case) has adataproperty on it, which is the data returned from the query. It's not a function. What are you trying to accomplish here? I'm guessing, update the query's variables on submit? Maybe you wanted to use the Mutation component instead?
– kingdaro
Jan 3 at 6:21
That is exactly what I'm trying to accomplish. Return a list of the values based on the form submission for the input of sku.
– Shawn Matthews
Jan 3 at 6:23
It seems there's a misunderstanding of how to use the Query component. The query result (
listItems in this case) has a data property on it, which is the data returned from the query. It's not a function. What are you trying to accomplish here? I'm guessing, update the query's variables on submit? Maybe you wanted to use the Mutation component instead?– kingdaro
Jan 3 at 6:21
It seems there's a misunderstanding of how to use the Query component. The query result (
listItems in this case) has a data property on it, which is the data returned from the query. It's not a function. What are you trying to accomplish here? I'm guessing, update the query's variables on submit? Maybe you wanted to use the Mutation component instead?– kingdaro
Jan 3 at 6:21
That is exactly what I'm trying to accomplish. Return a list of the values based on the form submission for the input of sku.
– Shawn Matthews
Jan 3 at 6:23
That is exactly what I'm trying to accomplish. Return a list of the values based on the form submission for the input of sku.
– Shawn Matthews
Jan 3 at 6:23
add a comment |
1 Answer
1
active
oldest
votes
0
Thanks to @kingdaro I was able to figure this out.
Turns out the Query component doesn't have an attached function to trigger it manually. You are better off using the example from the Apollo team here.
https://www.apollographql.com/docs/react/essentials/queries.html#manual-query
Here is my code rewritten using both Apollo and 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>
);
};
answered Jan 3 at 19:42
Shawn MatthewsShawn Matthews
589216
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54017036%2ftypescript-ts2349-when-trying-to-use-a-function-in-a-react-render-prop-with-apol%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Thanks to @kingdaro I was able to figure this out.
Turns out the Query component doesn't have an attached function to trigger it manually. You are better off using the example from the Apollo team here.
https://www.apollographql.com/docs/react/essentials/queries.html#manual-query
Here is my code rewritten using both Apollo and 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>
);
};
answered Jan 3 at 19:42
Shawn MatthewsShawn Matthews
589216
add a comment |
0
Thanks to @kingdaro I was able to figure this out.
Turns out the Query component doesn't have an attached function to trigger it manually. You are better off using the example from the Apollo team here.
https://www.apollographql.com/docs/react/essentials/queries.html#manual-query
Here is my code rewritten using both Apollo and 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>
);
};
answered Jan 3 at 19:42
Shawn MatthewsShawn Matthews
589216
add a comment |
0
0
0
Thanks to @kingdaro I was able to figure this out.
Turns out the Query component doesn't have an attached function to trigger it manually. You are better off using the example from the Apollo team here.
https://www.apollographql.com/docs/react/essentials/queries.html#manual-query
Here is my code rewritten using both Apollo and 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>
);
};
answered Jan 3 at 19:42
Shawn MatthewsShawn Matthews
589216
Thanks to @kingdaro I was able to figure this out.
Turns out the Query component doesn't have an attached function to trigger it manually. You are better off using the example from the Apollo team here.
https://www.apollographql.com/docs/react/essentials/queries.html#manual-query
Here is my code rewritten using both Apollo and 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>
);
};
answered Jan 3 at 19:42
Shawn MatthewsShawn Matthews
589216
edited Jan 3 at 20:02
answered Jan 3 at 19:42
Shawn MatthewsShawn Matthews
589216
answered Jan 3 at 19:42
Shawn MatthewsShawn Matthews
589216
answered Jan 3 at 19:42
Shawn MatthewsShawn Matthews
589216
589216
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54017036%2ftypescript-ts2349-when-trying-to-use-a-function-in-a-react-render-prop-with-apol%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
It seems there's a misunderstanding of how to use the Query component. The query result (
listItemsin this case) has adataproperty on it, which is the data returned from the query. It's not a function. What are you trying to accomplish here? I'm guessing, update the query's variables on submit? Maybe you wanted to use the Mutation component instead?– kingdaro
Jan 3 at 6:21
That is exactly what I'm trying to accomplish. Return a list of the values based on the form submission for the input of sku.
– Shawn Matthews
Jan 3 at 6:23