Is there a way to simplify naming of elements from a graphql query map function with nextjs?

I'm new to next.js and graphql. I'm currently building an app off a WordPress site's graphql endpoint. One thing that's kind of annoying is having to type out the information's "path" from the graphql query. I'm used to making a list of simple variables in PHP to minimize typing. A basic example would be $title = get_the_title(); in WordPress. Then i'd carry on with other variables like $url, $img, $author. I want to know if there is a way to do this in next.js?

Here's an example of something I'm messing around with:

export default function WorkGrid({ work, className = 'content-section has-tinted-background my-work'}) {
    return (

{work.map((post) => {
    const locations = post.node.caseStudyFeedLocations.nodes;
    return (
        <p key={post.node.slug}>
            {post.node.caseStudyTitle} in the{' '}
            {locations.map((location) => {
                return location.slug;
            })}{' '}
            location
        </p>
    );
})}

);
}

like..is there some easy way for me to predefine all these bits of info into shorter names so I don't have to write out {post.node.caseStudyTitle} and could just maybe write {projectTitle} in it's place? My best guess would be that I'd have to maybe write a function that transforms the returned data for the "work" items into some other type of object I could pass through something like .map()? I just don't know what that is called since I'm new to these languages.