vicious-gold
vicious-gold2mo ago

auth.ts:47 Error: expecting a value for non-nullable variable:

below is my mutation export const CREATE_PRODUCT_MUTATION = gql mutation createProduct($image: String, $variants: [variants_insert_input!]!) { insert_products_one( object: { image: $image, variants: { data: $variants } } ) { id } } ; I am getting the following error auth.ts:47 Error: expecting a value for non-nullable variable: "variants": {"response":{"errors":[{"message":"expecting a value for non-nullable variable: "variants"","extensions":{"path":"$","code":"validation-failed"}}],"status":200,"headers":{}},"request":{"query":"mutation createProduct($image: String, $variants: [variants_insert_input!]!) {\n insert_products_one(object: {image: $image, variants: {data: $variants}}) {\n id\n }\n}\n","variables":{"object":{"image":"https://placehold.co/600x400","variants":[{"sku":"asf","name":"saf"}]}}}} Error
8 Replies
kapa.ai
kapa.ai2mo ago
Hi @Tempest Rider. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error message you're seeing is indicating that the variants variable in your GraphQL mutation is non-nullable, but it's not receiving a value. This means that when you're calling the mutation, you're not providing a value for variants. In your mutation, variants is defined as a non-nullable array of variants_insert_input objects. This means that you must provide at least one variants_insert_input object when you call the mutation. From the error message, it seems like you're providing an object variable instead of variants and image variables separately. Your variables should match the ones defined in your mutation. Here's how you should structure your variables when calling the mutation:
{
"image": "<https://placehold.co/600x400",>
"variants": [
{
"sku": "asf",
"name": "saf"
}
]
}
{
"image": "<https://placehold.co/600x400",>
"variants": [
{
"sku": "asf",
"name": "saf"
}
]
}
Please ensure that you're providing the variants variable correctly when you're calling the mutation. If the problem persists, you might want to check the data you're passing to variants to make sure it's in the correct format. Unfortunately, without more context or code, it's hard to provide a more specific solution. If you're using Refine, you might find the useCreateMany (https://refine.dev/docs/data/hooks/use-create-many#values-) hook useful, which is used for creating multiple records at once. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai2mo ago
<@1009745466545688606> kapa.ai is still learning and improving, please let us know how it did by reacting below
vicious-gold
vicious-gold2mo ago
@kapa.ai Now I am getting the following error expected an object for type 'variants_arr_rel_insert_input', but found a list: {"response":{"errors":[{"message":"expected an object for type 'variants_arr_rel_insert_input', but found a list","extensions":{"path":"$.selectionSet.insert_products_one.args.object.variants","code":"validation-failed"}}],"status":200,"headers":{}},"request":{"query":"mutation createProduct($object: products_insert_input!) {\n insert_products_one(object: $object) {\n id\n }\n}\n","variables":{"object":{"image":"https://placehold.co/600x400","variants":[%7B"sku":"123xc","name":"dfsdr3"%7D]%7D%7D%7D%7D the mutation is export const CREATE_PRODUCT_MUTATION = gql mutation createProduct($object: products_insert_input!) { insert_products_one(object: $object) { id } } ;
kapa.ai
kapa.ai2mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- The error message indicates that the variants field in your mutation is expecting an object of type variants_arr_rel_insert_input, but it's receiving a list (array). In your mutation, you're trying to insert a product with an associated variant. However, the variants field in your products_insert_input type is likely defined as an object that represents a relationship between products and variants, not as a list of variants. You should adjust your mutation and variables to match the expected input types. Unfortunately, without the exact GraphQL schema, it's hard to provide a precise solution. Here's a general example of how you might structure your mutation and variables:
export const CREATE_PRODUCT_MUTATION = gql`
mutation createProduct($object: products_insert_input!) {
insert_products_one(object: $object) {
id
}
}
`;

// Variables
{
"object": {
"image": "<https://placehold.co/600x400",>
"variants": {
"data": [
{
"sku": "123xc",
"name": "dfsdr3"
}
]
}
}
}
export const CREATE_PRODUCT_MUTATION = gql`
mutation createProduct($object: products_insert_input!) {
insert_products_one(object: $object) {
id
}
}
`;

// Variables
{
"object": {
"image": "<https://placehold.co/600x400",>
"variants": {
"data": [
{
"sku": "123xc",
"name": "dfsdr3"
}
]
}
}
}
In this example, variants is an object that includes a data field, which is a list of variants to be associated with the product. This matches the structure of a typical array relationship input type in Hasura, which is what the error message suggests your schema might be using. Please adjust this example to match your actual GraphQL schema. If you're unsure about the structure of your schema, you might find it helpful to use a tool like GraphQL Playground or Apollo Studio to explore your schema and generate correct mutations. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai2mo ago
<@1009745466545688606> kapa.ai is still learning and improving, please let us know how it did by reacting below
vicious-gold
vicious-gold2mo ago
@kapa.ai below is my createProduct code import { HttpError } from "@refinedev/core"; import { Create, useForm } from "@refinedev/antd"; import { Button, Col, Form, Input, Row, Space, Typography } from "antd"; import { CreateProductMutation, CreateProductMutationVariables, } from "graphql/types"; import { GetFields, GetVariables } from "@refinedev/hasura"; import { CREATE_PRODUCT_MUTATION } from "./queries"; import { DeleteOutlined, PlusCircleOutlined } from "@ant-design/icons"; export const ProductCreate = () => { const { formProps, saveButtonProps, onFinish } = useForm< GetFields<CreateProductMutation>, HttpError, GetVariables<CreateProductMutationVariables> >({ meta: { gqlMutation: CREATE_PRODUCT_MUTATION, }, }); const handleOnFinish = (values) => { const { image, variants } = values; if (!variants || variants.length === 0) { console.log("Insert at least one variant"); return; } const finalVariables = { image, variants: variants.map((variant) => ({ sku: variant.sku, name: variant.name, })), }; onFinish(finalVariables); }; return ( <Create saveButtonProps={saveButtonProps}> <Form {...formProps} layout="vertical" onFinish={handleOnFinish}> <Form.Item label="Image" name="image"> <Input /> </Form.Item>
</Form> </Create> ); };
kapa.ai
kapa.ai2mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- Your ProductCreate component is using the useForm hook from @refinedev/antd to manage the form state and handle the form submission. The useForm hook is configured with the CREATE_PRODUCT_MUTATION GraphQL mutation, which is used to create a new product. In the handleOnFinish function, you're extracting the image and variants values from the form. If no variants are provided, you're logging a message and stopping the function. If variants are provided, you're mapping over them to create a new array of variants, each with a sku and name. You're then calling the onFinish function from useForm with these values to submit the form. The form itself is rendered inside a Create component from @refinedev/antd. The form includes an input for the image field. Here's a simplified version of your code:
export const ProductCreate = () => {
const { formProps, saveButtonProps, onFinish } = useForm({
meta: {
gqlMutation: CREATE_PRODUCT_MUTATION,
},
});

const handleOnFinish = (values) => {
const { image, variants } = values;
if (!variants || variants.length === 0) {
console.log("Insert at least one variant");
return;
}
const finalVariables = {
image,
variants: variants.map((variant) => ({
sku: variant.sku,
name: variant.name,
})),
};
onFinish(finalVariables);
};

return (
<Create saveButtonProps={saveButtonProps}>
<Form {...formProps} layout="vertical" onFinish={handleOnFinish}>
<Form.Item label="Image" name="image">
<Input />
</Form.Item>
{/* Add other form items here */}
</Form>
</Create>
);
};
export const ProductCreate = () => {
const { formProps, saveButtonProps, onFinish } = useForm({
meta: {
gqlMutation: CREATE_PRODUCT_MUTATION,
},
});

const handleOnFinish = (values) => {
const { image, variants } = values;
if (!variants || variants.length === 0) {
console.log("Insert at least one variant");
return;
}
const finalVariables = {
image,
variants: variants.map((variant) => ({
sku: variant.sku,
name: variant.name,
})),
};
onFinish(finalVariables);
};

return (
<Create saveButtonProps={saveButtonProps}>
<Form {...formProps} layout="vertical" onFinish={handleOnFinish}>
<Form.Item label="Image" name="image">
<Input />
</Form.Item>
{/* Add other form items here */}
</Form>
</Create>
);
};
Please note that this code doesn't include any form items for the variants field. You'll need to add these to your form if you want users to be able to provide variants when creating a product. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai2mo ago
<@1009745466545688606> kapa.ai is still learning and improving, please let us know how it did by reacting below