Manipulating Data Array in React and Graphql

Question

I'm attempting to manipulate this data in react with graphql. As you can see, I have this data or input in the graphql playground, and this is how I wanted the input to look:

In my frontend, I have a cartItem with an objects inside and array, including the product name, id, and so on. I wanted the input to look like the example I provided above. Is there a way to make that happen?

Codes and Data

This is how my cart's Item Data looks.

CartItem Data:

[
  {
    id: "6109401fd86d352a70e3694e",
    name: "asasasasa",
    sku: "sasa",
    shippingTime: "1628812800000",
    quantity: 1,
  },
  {
    id: "61051c14f25d8830a8e238c0",
    name: "Pringles Sour Cream & Onion Potato Crisps 158g",
    sku: "sad89f79dsafs",
    shippingTime: "1627084800000",
    quantity: 1,
  },
];

As stated in the preceding example, all I wanted was the product's id and quantity.

Order.js

const [cartItems, setCartItems] = useContext(CartContext);

const [createOrder, { data, loading }] = useMutation(CREATE_ORDER_MUTATION);

const qty = cartItems.map(({ quantity }) => {
  return quantity;
});

const cartItemId = cartItems.map(({ id }) => {
  return id;
});


function onSubmit() {
  createOrder({
    variables: {
      qty: qty,
      products: cartItemId,
      paymentMethod: paymentMethod,
      address: address,
    },
  })
}

Whenever I need to console someone. If you log the cartItemId, you'll get something like this:

Same goes with my qty.

Please let me know if you have any other questions or require any additional code, and I will gladly offer it.

Apollo Mutation:

const CREATE_ORDER_MUTATION = gql`
  mutation createOrder(
    $qty: Int!
    $products: String!
    $paymentMethod: String!
    $address: String!
  ) {
    createOrder(
      orderedItems: [{ qty: $qty, products: $products }]
      paymentMethod: $paymentMethod
      address: $address
    ) {
      id
      orderedItems {
        qty
        products {
          id
          name
          sku
          description
        }
      }
    }
  }
`;

Jap Mul · Accepted Answer · 2021-08-06 09:30:34Z

1

The code below will transform the cartItems into the desired result. You can loop through the cartItems and create an object with the required structure for each item.

const orderedItems = cartItems.map(({ id, quantity }) => {
  return {
    qty: quantity,
    products: id,
  };
});

Complete code will look something like this

const [cartItems, setCartItems] = useContext(CartContext);
const [createOrder, { data, loading }] = useMutation(CREATE_ORDER_MUTATION);

// Restructure the array to desired format
const orderedItems = cartItems.map(({ id, quantity }) => {
  return {
    qty: quantity,
    products: id,
  };
});

console.log(orderedItems); // To check if it looks correct

function onSubmit() {
  createOrder({
    variables: {
      orderedItems: orderedItem,
      paymentMethod: paymentMethod,
      address: address,
    },
  })
}

edited Aug 6, 2021 at 9:30

answered Aug 6, 2021 at 9:21

Jap Mul

18.9k6 gold badges60 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Mohammad Khan Over a year ago

Hello thanks for answering, ok will try it

Mohammad Khan Over a year ago

seems what I want but can u please explain what do you mean by loop you mean to map it again? or something.

Mohammad Khan Over a year ago

Could you please make it fully with the loop and stuff? if possible

Jap Mul Over a year ago

I've edited the answer to include a more complete example. map function is already a loop. You have some data in an array, called cartItems, but it's not in the correct format for the API call. So, you loop over it by using the map function to return a new structure for each item.

Mohammad Khan Over a year ago

Hello yes I tried that already it says qty and product is not provided the data

|

Collectives™ on Stack Overflow

Manipulating Data Array in React and Graphql

Codes and Data

CartItem Data:

Order.js

Apollo Mutation:

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Codes and Data

CartItem Data:

Order.js

Apollo Mutation:

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related