DEV Community

Bret
Bret

Posted on

Fetching a API, vs using ContextProvider. When should you use just fetching vs a ContextProvider??

#nextjs #react #help #devops

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}
Enter fullscreen mode Exit fullscreen mode

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'}) } }
Enter fullscreen mode Exit fullscreen mode

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) } } }
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

IM NOT TOO SURE ON WHAT TO USE???

Top comments (0)