I’m using Next for the first time and I’m liking it,
There is a choice tho of… when do i need a “ContextProvider”?
In my Next project i have several files to get data from Airtable:
In Airtable.js
const Airtable = require('airtable');
const base = new Airtable({ apiKey: process.env.AIRTABLE_API_KEY }).base(process.env.AIRTABLE_BASE_ID);
const table = base(process.env.AIRTABLE_TABLE_NAME);
const table2 = base(process.env.AIRTABLE_TABLE_NAME2);
const table3 = base(process.env.AIRTABLE_TABLE_NAME3);
const minifyRecords = (records) => {
return records.map(record => getMinifiedRecord(record));
}
const getMinifiedRecord = (record) => {
if(!record.fields.completed) {
record.fields.completed = false;
}
return {
id: record.id,
fields: record.fields,
}
}
export { table, table2, table3, getMinifiedRecord, minifyRecords}
Then in my getCorals.js i have:
import { table, minifyRecords } from './utils/Airtable'
export default async (req, res) => {
try{
const records = await table.select({}).firstPage();
const minifiedRecords = minifyRecords(records);
res.statusCode = 200;
res.json(minifiedRecords);
//console.log(records)
}catch(err){
res.statusCode = 500;
res.json({msg: 'something went wrong'})
}
}
The in my actual page to show my data i have:
import React from 'react'
import { CoralProvider } from '../contexts/CoralContext'
import { table, minifyRecords } from '../pages/api/utils/Airtable'
// im at video 6 in Airtable Nextjs video series....ITS WORKING!!!
export default function Coral({initialCoral}) {
// console log initialCoral... it logs them out
//console.log(initialCoral);
try{
return (
<CoralProvider>
<h1>ZOAS PAGE</h1>
</CoralProvider>
)
}catch(err){
console.log(err);
return{
props: {
err: "something went wrong"
}
}
}
}
export async function getServerSideProps(context) {
const coral = await table.select({}).firstPage();
return {
props: {
InitCoral: minifyRecords(coral)
}
}
}
OOOOOOOORRRRRR
Do i just fetch my data like this:??????
import React from 'react'
import Coralapi from '../../API/Coralapi'
import { useEffect, useState } from "react";
import Airtable from 'airtable';
require('dotenv').config();
const base = new Airtable({apiKey: `${process.env.REACT_APP_AIRTABLE_API_KEY}` }).base(`${process.env.REACT_APP_AIRTABLE_BASE_ID}`);
function Coralpage() {
const [coral, setCoral] = useState([]);
const [care, setCare] = useState([]);
useEffect(() => {
base("CORAL")
.select({view: "Gallery" })
.eachPage((records, fetchNextPage) => {
console.log(records);
setCoral(records);
fetchNextPage();
});
base("CARE")
.select({view: "Gallery" })
.eachPage((records, fetchNextPage) => {
console.log(records);
setCare(records);
fetchNextPage();
});
},[]);
return (
<>
<h1>Coral Products</h1>
{coral.map((coral) => (
<Coralapi
key={coral.id}
coral={coral}
care={care.filter(
(care) => care.coral
)}
/>
))}
</>
);
}
export default Coralpage
IM NOT TOO SURE ON WHAT TO USE???
Top comments (0)