I have been recently playing with Shopify App Development and i'm struggling with a graphql call to amend some text. The image below displays the call being made correctly in the shopify GraphQL app which is where I test it.
However when I attempt to make this same call from the react component I get the following error
Unhandled Runtime Error
Error: GraphQL error: Field 'metafieldsSet' doesn't exist on type 'Mutation'
GraphQL error: Variable $metafields is declared by metafieldsSet but not used
Here is the react component in which I try and update the metafield
import React, { useState } from 'react';
import gql from 'graphql-tag';
import { Mutation } from 'react-apollo';
import { Layout, Button, Banner, Toast, Stack, Frame } from '@shopify/polaris';
import { Context } from '@shopify/app-bridge-react';
// GraphQL mutation that updates the prices of products
const UPDATE_TEXT = gql`mutation metafieldsSet($metafields: [MetafieldsSetInput!]!) {
metafieldsSet(metafields: $metafields) {
metafields {
value
id
key
ownerType
}
userErrors {
field
message
}
}
}
`;
class UpdateTheText extends React.Component{
static contextType = Context;
render(){
return(
<Mutation mutation={UPDATE_TEXT}>
{(handleSubmit, {error, data}) => {
const [hasResults, setHasResults] = useState(false);
const showError = error && (
<Banner status="critical">{error.message}</Banner>
);
const showToast = hasResults && (
<Toast
content="Successfully updated"
onDismiss={() => setHasResults(false)}
/>
);
return (
<Frame>
{showToast}
<Layout.Section>
{showError}
</Layout.Section>
<Layout.Section>
<Stack distribution={"center"}>
<Button
primary
textAlign={"center"}
onClick={() => {
let promise = new Promise((resolve) => resolve());
const newmetafields = {
key: "ExtraShopDesc",
namespace: "ExtraShopDescription",
ownerId: "gid://shopify/Shop/55595073672",
type: "single_line_text_field",
value: "This is an extra shop description twice"
}
promise = promise.then(() => handleSubmit({ variables: { metafields: newmetafields }}));
if (promise) {
promise.then(() => this.props.onUpdate().then(() => setHasResults(true)));
}}
}
>
Update Text
</Button>
</Stack>
</Layout.Section>
</Frame>
);
}}
</Mutation>
);
}
}
export default UpdateTheText;
I believe i'm passing the variables into the gql but it doesn't seem to be picking them up?
Sigh,
This all along was an API version issue. Shopify CLI still spins up Oct 2020 API. Metafieldset was only added in the 2021 API
https://shopify.dev/api/admin-graphql/2021-10/mutations/metafieldsset
The error messages threw me off
So to update just update the API version in server.js
API_VERSION: "2021-10",
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.