React GraphQL 突变返回无效输入

Posted 2023-03-08

【中文标题】React GraphQL 突变返回无效输入

【英文标题】：React GraphQL mutation returning Invalid input

【发布时间】：2021-02-27 08:33:50

【问题描述】：

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

问题：我正在尝试使用 React-Apollo 使用 Mutation 创建或更新（如果存在 privateMetafield）。我试图在 Insomnia 中运行 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)

Insomnia 成功的 GraphQL 测试（应该是什么样的）

edit-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;

当我记录emissionVariableInput 时，我在控制台中得到了这个，这看起来是正确的。但是为什么数据没有正确传递给 GraphQL 突变，我该如何解决？

我希望 GraphQL 突变成功并创建/更新产品拥有的 privateMetafield。

提前致谢！

【问题讨论】：

我可能错了，但应该是 valueInput: $input 还是 input: $valueInput？

@miguelsolano 感谢您的提问。我试图改变它，但它导致了这个错误：PrivateMetafieldInput 的 valueInput 不存在。

【参考方案1】：

您的示例中有不同的输入形状。在 Insomnia 中你通过：

   
     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"
    
  ]
;