React GraphQL 突变返回无效输入

Question

背景：我正在使用 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 测试（它应该是什么样的）

编辑-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 突变成功，并且 create/update 一个产品拥有的 privateMetafield。

提前致谢！

Answer 1

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

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

React GraphQL 突变返回无效输入

React GraphQL mutation returning Invalid input

reactjs

graphql

next.js

react-apollo

shopify-api