Movie DB Query template and config

gridsome.server.js

// gridsome.server.js 

const axios = require("axios");

let url_one = `https://api.themoviedb.org/3/list/141416?api_key=${
	process.env.GRIDSOME_MOVIE_API_KEY
}`;

module.exports = function(api) {
	api.loadSource(async (actions) => {
		const { data } = await axios.get(url_one);

		const collection = actions.addCollection({
			typeName: "Posts",
			route: "/watch/:title",
		});

		for (const item of data.items) {
			let path = `/watch/${item.title}`;

			collection.addNode({
				title: item.name,
				path,
				content: item.overview,
				popularity: item.popularity,
				poster_path: item.poster_path,
				genre_ids: item.genre_ids,
				id: item.id,
			});
		}
	});
};

Posts.vue

// Posts.vue template

<template>
	<Layout>
		<div class="markdown-body">
			<h1>{{ $page.post.title }}</h1>
			{{ $page.post.content }}
			{{ $page.post.popularity }}
			<br />
			{{ $page.post.genre_ids }}
			<br />
			{{ $page.post.id }}
			<br />

			<img
				:src="'https://image.tmdb.org/t/p/w500' + $page.post.poster_path"
				:alt="$page.post.title + ' poster'"
				width="500"
			/>
		</div>
	</Layout>
</template>

<page-query>
query Posts ($path: String!) {
	post: posts (path: $path) {
		title
		content
		popularity
		poster_path
		genre_ids
		id
	}
}
</page-query>

<script>
export default {
	metaInfo() {
		return {
			title: this.$page.post.title
		};
	}
};
</script>