I have a DynamoDB table that I would like to display data from on my Next.js website, in the form of a Google Chart. I have already setup access to the DynamoDB table, so am able to load in the data that I need (see code snippets and picture below):
db.js
import aws from 'aws-sdk';
const client = new aws.DynamoDB.DocumentClient({
accessKeyId: process.env.ACCESS_KEY,
secretAccessKey: process.env.SECRET_KEY,
region: process.env.REGION,
params: {
TableName: process.env.TABLE_NAME
}
});
export default {
get: (params) => client.get(params).promise(),
put: (params) => client.put(params).promise(),
query: (params) => client.query(params).promise(),
update: (params) => client.update(params).promise(),
delete: (params) => client.delete(params).promise()
};
pages/folder1/folder2/[id].tsx
import dynamoDb from '/db';
import { Chart } from 'react-google-charts';
const options = {
title: "Title",
hAxis: { title: "Timestamp" },
vAxis: { title: "Price" },
legend: "none"
};
export async function getStaticProps({ params }) {
const { data: item } = await dynamoDb.query({
ExpressionAttributeValues: {
":itemNo": parseInt(params.id)
},
KeyConditionExpression: "itemNo = :itemNo",
})
.then(data => console.log(data.Items.map(function(s) {
return {
s
}
})));
return {
props: {
item: item,
},
};
}
export async function getStaticPaths() {
return {
paths: [
{
params: {
id: '1' # example number
}
}
],
fallback: false
};
}
export default ({ item }) => (
<Chart
chartType="LineChart"
data={item}
options={options}
graphID="LineChart"
width="100%"
height="400px"
/>
);
My two questions are:
.then(data => data.Items.map(function(s) {
return {
'timeNow': s.timeNow,
'nowPrice': s.nowPrice
}
}));
I only want the 'timeNow' and 'nowPrice' values from the data query for my chart. Would I be right in thinking that changing the 'console.log' part of 'folder1/folder2/[id].tsx' to the above snippet would correctly output the subset JSON that I need?
I want to use this 'timeNow' and 'nowPrice' subset JSON to produce a line chart using Google Charts, with 'timeNow' on the x-axis and 'nowPrice' on the y-axis. I have included an attempt at exporting the chart, which fails and gives the following error: 'Error serializing
.itemreturned fromgetStaticPropsin "/folder1/folder2/[id]". Reason:undefinedcannot be serialized as JSON. Please usenullor omit this value.' Any help in correctly formatting and outputting this would be much appreciated.
