I am trying to send a POST request to an endpoint that takes a application/x-www-form-urlencoded Content-Type and a plain text string for the form data with the apollo-link-rest module and am having the hardest time.
In cURL form the request I want to make looks like this:
curl -X POST http://tld.com/search -d include_all=My%20Search%20Term
I have wrapped my main component in the graphql HOC from react-apollo like this.
export default graphql(gql`
mutation productSearch($input: string) {
search(input: $input) @rest(
path: "/search",
method: "post",
endpoint: "search",
bodySerializer: "search"
) {
total
}
}
`,
{
props: ({ mutate }) => ({
runSearch: (text: string) => {
if (mutate) {
mutate({
variables: {
input: `include_all=${encodeURIComponent(text)}`,
},
});
}
},
}),
})(SearchResults);
The search bodySerializer referenced in the query looks like this.
const searchSerializer = (data: any, headers: Headers) => {
headers.set('Content-Type', 'application/x-www-form-urlencoded');
return { body: data, headers };
};
And then have called the runSearch function like this in my component.
async componentDidMount() {
try {
const result = await this.props.runSearch(this.props.searchText);
} catch (error) {
// report error & show message
}
}
Now I realize I'm not doing anything with the results but there seems to be an unhandled promise rejection (that's what React Native is telling me with a yellow box warning) when running the search code. I'm examining the request with Reactotron as well and the request looks good, but it fails still. I'm wondering if I'm missing something with how I'm configuring apollo-link-rest or if there's a better way I can examine requests made from the Apollo client.
Any help here would be much appreciated. Thanks!
