Develop Reference

Failing to fetch dynamic data from firestore using getStaticPaths in nextjs

When I fetch data from firebase firestore using getStaticProps, it works perfectly but when I try implementing the logic of getting the details of each single item using getStaticPaths, I fail and get a 404 page. This is how my [id].js code looks like currently.
import React from 'react'
import { db } from '#/Firebase';
import {collection, getDoc} from "firebase/firestore";
const reference = collection(db, "abantu");
export const getStaticPaths= async () => {
const umuntu = await getDoc(reference);
const paths = umuntu.docs.map(doc => {
return {
params: { id: doc.id }
}
})
return {
paths,
fallback: false
}
}
export const getStaticProps = async (context) => {
const id = context.params.id;
const data = await getDoc(reference) + id;
return {
props: {
umuntu: data
}
}
}
function Details({umuntu}) {
return (
<div>
<h1>{umuntu.ibizo}</h1>
</div>
)
}
export default Details
I dont quite get where my logic is going wrong but where could I be going wrong?.

For finding the right page props for each of the paths that you generate from the database in the getStaticPaths function, you should be able to find each of the pages information based on the id field you are getting from each path, see it here:
export const getStaticProps = async (context) => {
const id = context.params.id;
const umuntu = await getDoc(reference);
const data = umuntu.docs.find((pageData) => pageData.id === id); // this will find the right page based on the id passed via page path
return {
props: {
data
},
};
};
function Details({ data }) {
return (
<div>
<h1>{data.ibizo}</h1>
</div>
);
}
export default Details;

Use static fetch service

I have created an express mongoose api. I want to use that api from my React-application.
I want to create a service that would manage those api requests. But I am new in react-native and I can't use that service. I tried creating a static class but I cannot make it works. Here is an example :
// apiService.js
class ApiService {
static fetchUsers = () => {
return fetch('XXX/users')
.then((response) => {
return response.json()
.then((data) => {
return data;
})
})
.catch((error) => {
console.error(error);
});
}
}
export default ApiService;
And my screen
// UserScreen.js
import ApiService from '../services/apiService';
export default class UserScreen extends Component {
constructor(props) {
super(props);
this.state = {
users: [],
isLoading: true,
}
}
componentDidMount = () => {
let users = ApiService.fetchUsers();
this.setState({data: users});
this.setState({isLoading: false});
}
render() {
if (this.state.isLoading) {
return (
<View style={styles.container}>
<ActivityIndicator/>
</View>
)
} else {
return (
<View style={{ flex: 1, marginTop: 100 }}>
{
this.state.data.map((val, key) => {
return <TouchableOpacity
style={styles.homeButton}
key={key}
onPress={() => this.redirectHandler(val)}>
</TouchableOpacity>
})
}
</View>
)
}
}
}
I tried using async and wait but I can't find a way to retrieve data. The data are well retrieve in the apiService but I can't share them with the UserScreen.
How can I use a (static or not) class/function in react-native and get the data from the screen
Update
Here is what I tried with async
class ApiService {
static fetchUsers = async () => {
try {
let response = await fetch('XXXXX/users/');
let json = await response.json();
return json;
} catch (error) {
console.error(error);
}
}
}
export default ApiService;
And in my Userscreen
componentDidMount = async () => {
try {
let users = await ApiService.fetchUsers();
this.setState({isLoading: false});
this.setState({data: users});
} catch (error) {
console.log(error);
}
}

The problem lies in the setState that you are performing twice. If you look at the logic of the component, first we check for isLoading, if true we show some message/spinner otherwise we are showing a list of users/data.
Sequence of the Set State:
this.setState({isLoading: false});
this.setState({data: users});
Note that each setState triggers a re-render of the component, so in this case first we set isLoading to false (1st Re-Render) and then we set the data (2nd Re-Render)
The problem is, when 1st Re-Render is done, isLoading is set to false and the condition which we talked about above, now enters the "showing the user/data list" part. Another thing to note here is we have defined users: [] in state and when we are setting the users array (from the api call), we set that in a variable called data. The variable data is never defined in state so essentially it is "undefined".
Issue in your code:
this.state.data.map(...)
You cannot map over an undefined variable and this is where the problem lies. Doing so will throw an error saying "cannot read property map of undefined".
To fix this:
When setting the users list, instead of doing this.setState({ data: users }) just do this.setState({ users: users }) and change this.state.data.map( to users.map(
Also, unnecessary re-renders are costly and in case of React Native, they are costlier. Merge your setState(...) calls when possible. For example,
this.setState({
isLoading: false,
users: users
})

MobX State Tree async actions and re-rendering React component

I am new to MST and is having a hard time finding more examples with async actions. I have an api that will return different data depending on the params you pass to it. In this case, the api can either return an array of photos or tutorials. I have set up my initial values for the store like so:
data: {
photos: [],
tutorials: []
}
Currently, I am using applySnapshot to update the store and eventually, that will trigger a re-render of my React component. In order to display both photos and tutorials, I need to call the api twice (Once with the params for photos and the second time for tutorials). I am running into an issue where the snapshot from the first update shows that photos and tutorials have the same values and only on the second update, do I get the correct values. I am probably misusing applySnapshot to re-render my React components. I would like to know the better/proper way of doing this. What is the best way to re-render my React components after the api has yielded a repsonse. Any suggestions are much appreciated
I have set up my store like this:
import { RootModel } from '.';
import { onSnapshot, getSnapshot, applySnapshot } from 'mobx-state-tree';
export const setupRootStore = () => {
const rootTree = RootModel.create({
data: {
photos: [],
tutorials: []
}
});
// on snapshot listener
onSnapshot(rootTree, snapshot => console.log('snapshot: ', snapshot));
return { rootTree };
};
I have created the following model with an async action using generators:
import {types,Instance,applySnapshot,flow,onSnapshot} from 'mobx-state-tree';
const TestModel = types
.model('Test', {
photos: types.array(Results),
tutorials: types.array(Results)
})
.actions(self => ({
fetchData: flow(function* fetchData(param) {
const results = yield api.fetch(param);
applySnapshot(self, {
...self,
photos: [... results, ...self.photos],
tutorials: [... results, ...self.tutorials]
});
})
}))
.views(self => ({
getPhoto() {
return self.photos;
},
getTutorials() {
return self.tutorials;
}
}));
const RootModel = types.model('Root', {
data: TestModel
});
export { RootModel };
export type Root = Instance<typeof RootModel>;
export type Test = Instance<typeof TestModel>;
React component for Photos.tsx
import React, { Component } from 'react';
import Spinner from 'components/Spinner';
import { Root } from '../../stores';
import { observer, inject } from 'mobx-react';
interface Props {
rootTree?: Root
}
#inject('rootTree')
#observer
class Photos extends Component<Props> {
componentDidMount() {
const { rootTree } = this.props;
if (!rootTree) return null;
rootTree.data.fetchData('photo');
}
componentDidUpdate(prevProps) {
if (prevProps.ctx !== this.props.ctx) {
const { rootTree } = this.props;
if (!rootTree) return null;
rootTree.data.fetchData('photo');
}
}
displayPhoto() {
const { rootTree } = this.props;
if (!rootTree) return null;
// calling method in MST view
const photoResults = rootTree.data.getPhoto();
if (photoResults.$treenode.snapshot[0]) {
return (
<div>
<div className='photo-title'>{'Photo'}</div>
{photoResults.$treenode.snapshot.map(Item => (
<a href={photoItem.attributes.openUrl} target='_blank'>
<img src={photoItem.url} />
</a>
))}
</div>
);
} else {
return <Spinner />;
}
}
render() {
return <div className='photo-module'>{this.displayPhoto()}</div>;
}
}
export default Photos;
Similarly, Tutorials.tsx is like so:
import React, { Component } from 'react';
import Spinner from '';
import { Root } from '../../stores';
import { observer, inject } from 'mobx-react';
interface Props {
rootTree?: Root;
}
#inject('rootTree')
#observer
class Tutorials extends Component<Props> {
componentDidMount() {
if (this.props.ctx) {
const { rootTree } = this.props;
if (!rootTree) return null;
rootTree.data.fetchData('tuts');
}
}
componentDidUpdate(prevProps) {
if (prevProps.ctx !== this.props.ctx) {
const { rootTree } = this.props;
if (!rootTree) return null;
rootTree.search.fetchData('tuts');
}
}
displayTutorials() {
const { rootTree } = this.props;
if (!rootTree) return null;
// calling method in MST view
const tutResults = rootTree.data.getTutorials();
if (tutResults.$treenode.snapshot[0]) {
return (
<div>
<div className='tutorials-title'>{'Tutorials'}</div>
{tutResults.$treenode.snapshot.map(tutorialItem => (
<a href={tutorialItem.attributes.openUrl} target='_blank'>
<img src={tutorialItem.url} />
</a>
))}
</div>
);
} else {
return <Spinner />;
}
}
render() {
return <div className='tutorials-module'>{this.displayTutorials()}</div>;
}
}
export default Tutorials;

Why are you using applySnapshot at all in this case? I don't think it's necessary. Just assign your data as needed in your action:
.actions(self => ({
//If you're fetching both at the same time
fetchData: flow(function* fetchData(param) {
const results = yield api.fetch(param);
//you need cast() if using Typescript otherwise I think it's optional
self.photos = cast([...results.photos, ...self.photos])
//do you really intend to prepend the results to the existing array or do you want to overwrite it with the sever response?
self.tutorials = cast(results.tutorials)
})
}))
Or if you need to make two separate requests to fetch your data it's probably best to make it two different actions
.actions(self => ({
fetchPhotos: flow(function* fetchPhotos(param) {
const results = yield api.fetch(param)
self.photos = cast([... results, ...self.photos])
}),
fetchTutorials: flow(function* fetchTutorials(param) {
const results = yield api.fetch(param)
self.tutorials = cast([... results, ...self.tutorials])
}),
}))
Regardless, it doesn't seem like you need applySnapshot. Just assign your data in your actions as necessary. There's nothing special about assigning data in an async action.

POST http://localhost:3000/api/courses/[object%20Object]/units 404 (Not Found)

(Only my 3rd post here, so please excuse any blatant issues).
The following is my Unit component, a child of a Course component (courses has_many units).
import React from 'react';
import { connect } from 'react-redux';
import { getUnits, addUnit, updateUnit } from '../reducers/units';
import { Container, Header, Form } from 'semantic-ui-react';
class Units extends React.Component {
initialState = { name: ''}
state = { ...this.initialState }
componentDidUpdate(prevProps) {
const { dispatch, course } = this.props
if (prevProps.course.id !== course.id)
dispatch(getUnits(course.id))
}
handleSubmit = (e) => {
debugger
e.preventDefault()
debugger
const unit = this.state
const { dispatch } = this.props
if (unit.id) {
debugger
dispatch(updateUnit(unit))
} else {
debugger
dispatch(addUnit(unit))
this.setState({ ...this.initialState })
}
}
handleChange = (e) => {
const { name, value } = e.target
this.setState({ [name]: value })
}
units = () => {
return this.props.units.map( (unit, i) =>
<ul key={i}>
<li key={unit.id}> {unit.name}</li>
<button>Edit Module Name</button>
<button>Delete Module</button>
</ul>
)
}
render() {
const { name } = this.state
return (
<Container>
<Header as="h3" textAlign="center">Modules</Header>
{ this.units() }
<button>Add a Module</button>
<Form onSubmit={this.handleSubmit}>
<Form.Input
name="name"
placeholder="name"
value={name}
onChange={this.handleChange}
label="name"
required
/>
</Form>
</Container>
)
}
}
const mapStateToProps = (state) => {
return { units: state.units, course: state.course }
}
export default connect(mapStateToProps)(Units);
The following is its reducer:
import axios from 'axios';
import { setFlash } from './flash'
import { setHeaders } from './headers'
import { setCourse } from './course'
const GET_UNITS = 'GET_UNITS';
const ADD_UNIT = 'ADD_UNIT';
const UPDATE_UNIT = 'UPDATE_UNIT';
export const getUnits = (course) => {
return(dispatch) => {
axios.get(`/api/courses/${course}/units`)
.then( res => {
dispatch({ type: GET_UNITS, units: res.data, headers: res.headers })
})
}
}
export const addUnit = (course) => {
return (dispatch) => {
debugger
axios.post(`/api/courses/${course}/units`)
.then ( res => {
dispatch({ type: ADD_UNIT, unit: res.data })
const { headers } = res
dispatch(setHeaders(headers))
dispatch(setFlash('Unit added successfully!', 'green'))
})
.catch( (err) => dispatch(setFlash('Failed to add unit.', 'red')) )
}
}
export const updateUnit = (course) => {
return (dispatch, getState) => {
const courseState = getState().course
axios.put(`/api/courses/${course.id}/units`, { course })
.then( ({ data, headers }) => {
dispatch({ type: UPDATE_UNIT, course: data, headers })
dispatch(setCourse({...courseState, ...data}))
dispatch(setFlash('Unit has been updated', 'green'))
})
.catch( e => {
dispatch(setHeaders(e.headers))
dispatch(setFlash(e.errors, 'red'))
})
}
}
export default (state = [], action) => {
switch (action.type) {
case GET_UNITS:
return action.units;
case ADD_UNIT:
return [action.unit, ...state]
case UPDATE_UNIT:
return state.map( c => {
if ( c.id === action.unit.id )
return action.unit
return c
})
default:
return state;
}
};
Note: My reducer is working for my getUnits and rendering the units properly.
Note also: when I try to submit a new unit, it ignores all of the debuggers in my handleSubmit and the debuggers in my addUnits (in the reducer), but somehow renders the flash message of "Failed to add units".
Then the console logs the error seen in the title of this post.
I raked my routes and my post is definitely supposed to go to the route as it is.
I have tried passing in the unit and the course in various ways without any change to the error.
How can it hit the flash message without hitting any of the debuggers?
How do I fix this [object%20Object]issue?
Thanks in advance!

The variable course in the following line
axios.get(`/api/courses/${course}/units`)
is an object. When you try to convert an object to a string in JavaScript, [object Object] is the result. The space is then converted to %20 for the URL request.
I would look at the contents of the course variable. Likely, what you actually want in the URL is something inside of course. Perhaps course.id.
If you are still having issues, you'll need to explain what value should go in the URL between /courses/ and /units, and where that data exists.

You are invoking addUnit and updateUnit with a parameter that is equal to this.state in handleSubmit
const unit = this.state
addUnit(unit)
As this.state is of type object, it is string concatenated as object%20object.
getUnit works fine as the parameter passed there comes from the prop course. Check the value of state inside handleSubmit.

How to call an API every minute for a Dashboard in REACT

I've made a dashboard in React. It has no active updating, no buttons, fields or drop-downs. It will be deployed on a wall TV for viewing. All panels (9 total) are updated through the API call. The initial call (seen below) works, and all JSON data is fetched and the dashboard is initially updated.
BOTTOM LINE PROBLEM: I need to call the API every 30 sec to 1 minute after the initial call to check for updates.
I have attempted "setInterval" inside the componentDidMount() as suggested by people on here answering others' questions and I get an error "await is a reserved word". I've read about forceUpdate() which seems logical for my use case given what the facebook/react page says about it. But, I've read on here as well to stay away from that...
The code below is a light version of the code I'm using. I've removed many of the components and imports for brevity's sake. Any help would be greatly appreciated.
import React, { Component } from 'react';
import Panelone from './Components/Panelone';
import Paneltwo from './Components/Paneltwo';
class App extends Component {
state = {
panelone: [],
paneltwo: []
}
async componentDidMount() {
try {
const res = await fetch('https://api.apijson.com/...');
const blocks = await res.json();
const dataPanelone = blocks.panelone;
const dataPaneltwo = blocks.paneltwo;
this.setState({
panelone: dataPanelone,
paneltwo: dataPaneltwo,
})
} catch(e) {
console.log(e);
}
render () {
return (
<div className="App">
<div className="wrapper">
<Panelone panelone={this.state} />
<Paneltwo paneltwo={this.state} />
</div>
</div>
);
}
}
export default App;

Move the data fetch logic into a seperate function and invoke that function using setInterval in componentDidMount method as shown below.
componentDidMount() {
this.loadData()
setInterval(this.loadData, 30000);
}
async loadData() {
try {
const res = await fetch('https://api.apijson.com/...');
const blocks = await res.json();
const dataPanelone = blocks.panelone;
const dataPaneltwo = blocks.paneltwo;
this.setState({
panelone: dataPanelone,
paneltwo: dataPaneltwo,
})
} catch (e) {
console.log(e);
}
}
Below is a working example
https://codesandbox.io/s/qvzj6005w

In order to use await, the function directly enclosing it needs to be async. According to you if you want to use setInterval inside componentDidMount, adding async to the inner function will solve the issue. Here is the code,
async componentDidMount() {
try {
setInterval(async () => {
const res = await fetch('https://api.apijson.com/...');
const blocks = await res.json();
const dataPanelone = blocks.panelone;
const dataPaneltwo = blocks.paneltwo;
this.setState({
panelone: dataPanelone,
paneltwo: dataPaneltwo,
})
}, 30000);
} catch(e) {
console.log(e);
}
}
Also instead of using setInterval globally, you should consider using react-timer-mixin. https://facebook.github.io/react-native/docs/timers.html#timermixin

For those looking for functional components. You can update the state every n time by creating a setInterval and calling this in the useEffect hook. Finally call the clearInterval method in the clean up function
import React, { useEffect, useState } from "react";
import Panelone from "./Components/Panelone";
import Paneltwo from "./Components/Paneltwo";
function App() {
const [state, setState] = useState({
panelone: [],
paneltwo: [],
});
const getData = async () => {
try {
const res = await fetch("https://api.apijson.com/...");
const blocks = await res.json();
const dataPanelone = blocks.panelone;
const dataPaneltwo = blocks.paneltwo;
setState({
panelone: dataPanelone,
paneltwo: dataPaneltwo,
});
} catch (e) {
console.log(e);
}
};
useEffect(() => {
const intervalCall = setInterval(() => {
getData();
}, 30000);
return () => {
// clean up
clearInterval(intervalCall);
};
}, []);
return (
<div className="App">
<div className="wrapper">
<Panelone panelone={state} />
<Paneltwo paneltwo={state} />
</div>
</div>
);
}
export default App;

I figured I'd chime in with a slightly revised approach that uses recursion via a setTimeout call within the function block. Works the same...maybe slightly cleaner to have the function call itself from within, instead of doing this elsewhere in your code?
This article explains the reasoning in a bit more depth...but I've been using this approach for several dashboards at work - does the job!
Would look something like this:
class MyComponent extends React.Component
//create the instance for your interval
intervalID;
constructor(props) {
super(props);
this.state = {
data: [],
loading: false,
loadingMap: false,
//call in didMount...
componentDidMount() {
this.getTheData()
}
getTheData() {
//set a loading state - good practice so you add a loading spinner or something
this.setState({loading: true}), () => {
//call an anonymous function and do your data fetching, then your setState for the data, and set loading back to false
this.setState({
data: fetchedData,
loading: false
)} }
//Then call the function again with setTimeout, it will keep running at the specified //interval...5 minutes in this case
this.intervalID = setTimeout(
this.getTheData.bind(this),
300000
);
}
}
//Important! Be sure to clear the interval when the component unmounts! Your app might crash without this, or create memory leaks!
componentWillUnmount() {
clearTimeout(this.intervalID);
}
Sorry if the formatting got a little off. Haven't tried this with Hooks yet but I think you'd have a similar implementation in a useEffect call? Has anyone done that yet?

I have seen around a lot of complications about this. No need to have it in the lifecycles or in state or promisses.
In here, the service api is just a simple axios api call
This is my full implementation as I use it with context api(omitting some private code).
In my case I just care about the status response in the api since I know what I need to change. But the api can be really anything you need for/from data-wise.'
export class MyContextApiComponent ..... {
private timeout: ReturnType<typeof setInterval> | undefined
...
...
...
public statsPolling = (S_UUID: string) => {
if (!this.timeout) {
this.timeout = setInterval( () => {
this.statsPolling(S_UUID)
}, 3000)
}
this.state.api.StatisticsService.statsPolling(S_UUID)
.then(res => {
if (res.hasDescStats) {
clearInterval(this.timeout)
this.setState(prevState => ({
...prevState,
...
...
}))
}
})
.catch(e => console.warn('', e))
}
...
...
}
/// in another file in service is the api call itself with axios just checking on the server reply status
export class Statistics implements IStatistics {
public statsPolling: StatsPolling = async S_UUID => {
return axios
.get<{ hasDescStats: boolean }>(`/v2/api/polling?query=${S_UUID}`)
.then(res => {
if (res.status === 200) {
return { hasDescStats: true }
} else {
return { hasDescStats: false }
}
})
}
}

Answer
You can create a function for the componentDidMount code.
import React, { Component } from 'react';
import Panelone from './Components/Panelone';
import Paneltwo from './Components/Paneltwo';
class App extends Component {
state = {
panelone: [],
paneltwo: []
}
code = async () => {
try {
const res = await fetch('https://api.apijson.com/...');
const blocks = await res.json();
const dataPanelone = blocks.panelone;
const dataPaneltwo = blocks.paneltwo;
this.setState({
panelone: dataPanelone,
paneltwo: dataPaneltwo,
})
} catch(e) {
console.log(e);
}
}
componentDidMount() {
}
render () {
return (
<div className="App">
<div className="wrapper">
<Panelone panelone={this.state} />
<Paneltwo paneltwo={this.state} />
</div>
</div>
);
}
}
export default App;
then make a componentDidUpdate
import React, { Component } from 'react';
import Panelone from './Components/Panelone';
import Paneltwo from './Components/Paneltwo';
class App extends Component {
state = {
panelone: [],
paneltwo: []
}
code = async () => {
try {
const res = await fetch('https://api.apijson.com/...');
const blocks = await res.json();
const dataPanelone = blocks.panelone;
const dataPaneltwo = blocks.paneltwo;
this.setState({
panelone: dataPanelone,
paneltwo: dataPaneltwo,
})
} catch(e) {
console.log(e);
}
}
componentDidMount() {
this.code()
}
componentDidUpdate(){
this.code()
}
render () {
return (
<div className="App">
<div className="wrapper">
<Panelone panelone={this.state} />
<Paneltwo paneltwo={this.state} />
</div>
</div>
);
}
}
export default App;