Reactjs React GraphQL突变返回无效输入

Reactjs React GraphQL突变返回无效输入,reactjs,graphql,next.js,react-apollo,shopify-api,Reactjs,Graphql,Next.js,React Apollo,Shopify Api,背景:我正在使用React、NextJS和GraphQL构建一个Shopify应用程序。该功能是为每个选定的产品添加一个额外的privateMetafield,其中包含一个值 问题是:我正试图使用React Apollo创建或更新(如果存在privateMetafield)突变。我曾尝试在失眠症患者中运行GraphQL突变(就像GraphQL的邮递员一样),它是有效的。但是当我把它添加到我的代码中时,我没有得到GraphQL来接收突变数据。相反,我收到以下错误消息: Unhandled Runt

背景:我正在使用React、NextJS和GraphQL构建一个Shopify应用程序。该功能是为每个选定的产品添加一个额外的privateMetafield,其中包含一个值

问题是:我正试图使用React Apollo创建或更新(如果存在privateMetafield)突变。我曾尝试在失眠症患者中运行GraphQL突变(就像GraphQL的邮递员一样),它是有效的。但是当我把它添加到我的代码中时,我没有得到GraphQL来接收突变数据。相反,我收到以下错误消息:

Unhandled Runtime Error
Error: GraphQL error: Variable $input of type PrivateMetafieldInput! was provided invalid value for privateMetafields (Field is not defined on PrivateMetafieldInput), namespace (Expected value to not be null), key (Expected value to not be null), valueInput (Expected value to not be null)
失眠成功的GraphQL测试(应该是什么样的)

编辑products.js

...
import gql from 'graphql-tag';
import { Mutation } from 'react-apollo';
...
const UPDATE_EMISSION = gql`
    mutation($input: PrivateMetafieldInput!) {
        privateMetafieldUpsert(input: $input) {
        privateMetafield {
            namespace
            key
            value
        }
        }
    }
`;
...
class EditEmission extends React.Component {
    state = {
        emission: '',
        id: '',
        showToast: false,
    };

    render() {
        const { name, emission, id } = this.state;
        return (
            <Mutation
                mutation={UPDATE_EMISSION}
            >
                {(handleSubmit, { error, data }) => {
                    const showError = error && (
                        <Banner status="critical">{error.message}</Banner>
                    );
                    const showToast = data && data.productUpdate && (
                        <Toast
                            content="Sucessfully updated"
                            onDismiss={() => this.setState({ showToast: false })}
                        />
                    );
                    return (
                        <Frame>
                            ...           <Form>
                                                        <TextField
                                                            prefix="kg"
                                                            value={emission}
                                                            onChange={this.handleChange('emission')}
                                                            label="Set New Co2 Emission"
                                                            type="emission"
                                                        />
                                                   ...
                                            <PageActions
                                                primaryAction={[
                                                    {
                                                        content: 'Save',
                                                        onAction: () => {
                                                            const item = store.get('item');
                                                            const id = item.id;
                                                            const emissionVariableInput = {
                                                                owner: id,
                                                                privateMetafields: [
                                                                    {
                                                                        namespace: "Emission Co2",
                                                                        key: "Co2",
                                                                        valueInput: {
                                                                            value: emission,
                                                                            valueType: "INTEGER"
                                                                        }
                                                                    }
                                                                ]
                                                            };
                                                            console.log(emissionVariableInput)
                                                            handleSubmit({
                                                                variables: { input: emissionVariableInput },
                                                            });
                                                        }
                                                    }
                                                ]}
                                                secondaryActions={[
                                                    {
                                                        content: 'Remove emission'
                                                    }
                                                ]}
                                            />
                                        </Form>
                                 ...
            </Mutation>
        );
    }

    handleChange = (field) => {
        return (value) => this.setState({ [field]: value });
    };
}

export default EditEmission;
。。。
从“graphql标签”导入gql;
从'react apollo'导入{突变};
...
常数更新_排放=gql`
突变($input:PrivateMetafieldInput!){
PrivateMetaFieldUpert(输入:$input){
私有元场{
名称空间
钥匙
价值
}
}
}
`;
...
类EditReact.Component{
状态={
发射:'',
id:“”,
错,,
};
render(){
const{name,emission,id}=this.state;
返回(
{(handleSubmit,{error,data})=>{
const-showError=错误&&(
{error.message}
);
const showtoos=data&&data.productUpdate&&(
this.setState({showtoos:false})
/>
);
返回(
...           
...
{
const item=store.get('item');
const id=item.id;
常量emissionVariableInput={
所有者:身份证,
私有元字段:[
{
名称空间:“排放二氧化碳”,
关键:“二氧化碳”,
值输入:{
值:排放量,
valueType:“整数”
}
}
]
};
console.log(emissionVariableInput)
手推({
变量:{input:emissionVariableInput},
});
}
}
]}
二次作用={[
{
内容:“消除排放”
}
]}
/>
...
);
}
handleChange=(字段)=>{
return(value)=>this.setState({[field]:value});
};
}
出口排放;
当我记录emissionVariableInput时,我在控制台中得到了这一点,这看起来是正确的。但是为什么数据没有正确地传递到GraphQL变体,我该如何修复它呢

我希望GraphQL变异会成功,并创建/更新产品拥有的私有元字段


提前感谢!

您在示例中有不同的输入形状。在示例中,您将通过:

   {
     owner: id,
     namespace: "Emission Co2",
     key: "Co2",
     valueInput: {
      value: emission,
      valueType: "INTEGER"
     }
   }
在代码中,您的输入如下所示:

{
  owner: id,
  privateMetafields: [{
    namespace: "Emission Co2",
    key: "Co2",
    valueInput: {
     value: emission,
     valueType: "INTEGER"
    }
  }]
};

我可能错了,但应该是valueInput:$input还是input:$valueInput?@miguelsolano谢谢你的提问。我试图将其移位,但结果却导致了此错误:PrivateMetafieldInput的valueInput不存在。