How to edit GraphQL data without modifying the original

[HenrijsS]

I'm building a site with Gatsby and fetching data from WordPress.

I can't stand the Node hell so I wanted to sanitize the data.
The problem occurs when revisiting the page again (Without browser refresh) it now throws an error that Node is undefined.

Honestly, the Gatsby docs are a mess so I still have no clue how the graphql part works.

Query in the index file:

export const query = graphql`
	query {
		allWpMasina(limit: 6) {
			nodes {
				id
				atrumkarbas {
					nodes {
						name
					}
				}
			}
		}
	}
`;

All cars have only one "atrumkarbas" so I just wanted to assign the name for it without writing atrumkarbas.node[0].name everytime I want to access it.

So in the index page I added the following:

const IndexPage = ({ data: { allWpMasina } }) => {
	let cars = allWpMasina.nodes;
	cars.forEach((car) => {
		car.atrumkarbas = car.atrumkarbas.nodes[0].name;

As you can see, it got rid of the .nodes[0].name and it all works perfectly.
But when I revisit the page:

Cannot read properties of undefined (reading '0')

I tried adding let cars = allWpMasina.nodes.map() so it copies it everytime without modifying the data.allWpMasina but somehow it still caches them both and messes up the re-visit.

Console logging before the changes outputs the already formatted result! If I remove the forEach it goes back to node node node, but when I add it back on, the allWpMasina is now the same as cars before the forEach is even executed!

How does Gatsby handle the Graphql data? How can I copy and modify it without affecting the original data?

[HenrijsS]

Currently the only thing that's viable is passing everything through ACF.