How to create dynamic route if there is no unique id from backend? - react-router

Question

When using public API which provide data with unique id I can simple use this id to create dynamic route e.g. ${book.id}. But some API do not provide unique id, so how can I replace my ${book.id} in this case?
Code example that works when id provided:
<Routes>
<Route path="/book" element={<BooksView />} />
<Route path="/book/:bookId" element={<BookDetailsView />} />
</Routes>
return(
{books && (
<ul>
{books.map((book) => (
<li key={book.id}>
<Link to={`/books/${book.id}`}>{book.title}</Link>
</li>
))}
</ul>
)})
I tried to generate unique id with uuid library but it didn't work, maybe because it creates string type data whereas number type needed

Answer 1

I've had to work with some APIs that returned data either without ids or data partially with ids.
If you need a valid book.id property to interface with external (to the app) 3rd-party APIs then there's not much you can do here since you can't really make up an id value that would work in this situation.
So long as the book.id property is only used locally to navigate to and display fetched content then the way I've solved this issue is to process the data after it's been fetched prior to saving it into any local state, generating and adding ids when necessary. Here's an example workflow.
import { v4 as uuidV4 } from 'uuid';
...
const fetchBooks = async () => {
const response = await fetch(".......");
const bookData = await response.json();
const processedBookData = bookData.map(book => !!book.id
? book
: { ...book, id: uuidV4() } // <-- generate id if missing
);
/* save processedBookData into books state */
};
BooksView - There should now be a defined id property for each book object that is sufficiently guaranteed to be unique.
return(
{books && (
<ul>
{books.map((book) => (
<li key={book.id}>
<Link to={`/books/${book.id}`}>{book.title}</Link>
</li>
))}
</ul>
)}
);
It shouldn't matter if the book.id property is a string or number-like value as all route path params will be a string type when accessing within a component via the useParams hook. If you have a mix of "types" then the suggestion here is to use a type-safe comparison by converting all id values to strings for comparison.
BookDetailsView
const BookDetailsView = () => {
const { bookId } = useParams();
const book = books.find(book => String(book.id) === bookId);
if (!book) {
// book not found
}
// book found
...
};
If you need to generate ids and interact with external APIs then you could set a flag in the books data that indicates if the id value is real or not, and use this to conditionally allow any external interactions.
const processedBookData = bookData.map(book => !!book.id
? book
: {
...book,
id: uuidV4(),
internalId: true
}
);
if (!book.internalId) {
// id is legitimate, use for external calls/effects
}