Error: unable to resolve image URL from source (undefined)

Because you’re passing

undefined

to the image URL builder, and it does not like that.

Are you passing it an address or the image field itself? If memory serves people tend to send it dereferenced addresses instead of the original full asset object stored with the field. It uses that more complete data to arrive at all the different transformed URLs.

const builder = ImageUrlBuilder(client); const fileBuilder = buildFileUrl(client);

export const fileUrl = (source) => fileBuilder.file(source);
export const urlFor = (source) => builder.image(source);

import React from "react";import { useEffect } from "react";
import { useState } from "react";
import moment from "moment";
import { client, fileUrl, urlFor } from "./sanityClient";

function App() {
const [books, setBooks] = useState([]);
console.log(books);
useEffect(() => {
const query = '*[_type == "primaryBooks"]';
client.fetch(query).then((data) => {
setBooks(data);
});
}, []);

return (
<div>
<h1>Hello Apear</h1>
{books.map((book) => (
<a href={

/read/${fileUrl(book.pdf_url)}

}>read</a> ))}
</div>
);
}

export default App;

or if someone can explain to me how to fetch file from sanity by maping through or any video related to it send me please

very tired

There is no file builder function. Have you defined

buildFileUrl

yourself or are you expecting it to be there (it won’t)?

so i was trying to do it the same way of image url function

so any solution for me or video explaination

my array []

1. 02. :
3.
author4. :
a. "Openstax"
5.
pdf_url a. :
6.
asset i. :
7.
_ref8. :
1. "file-e110eda3ffce1a778846f5ebf959ff72fb953ee5-pdf"
9.
_type10. :
1. "reference"
11. [[Prototype]]
12. :
1. Object
13.
_type14. :
i. "file"
15. [[Prototype]]
16. :
i. Object
17.
title18. :
a. "College Physics"
19.
_createdAt20. :
a. "2022-09-09T22
:26:00Z"21.
_id22. :
a. "42f69f46-37c7-456c-8126-c45c84548f26"
23.
_rev24. :
a. "IE8tlwnnGIwBkp6cNnXiN6"
25.
_type26. :
a. "primaryBooks"
27.
_updatedAt28. :
a. "2022-09-09T22
:37:58Z"29. [[Prototype]]
30. :
a. Object

Alright, let’s clarify a few things.
Because your document has a

file

type, you can attach a file such as a PDF file. The way it works is that the file itself is uploaded to Sanity, and your document contains a reference to that asset. You then need to resolve that reference to retrieve the actual URL to the PDF file.
(Therefore, your field (

pdf_url

) probably has a misleading name. It’s not a “PDF URL” that you get on that document. It’s a reference to an asset object which points to a PDF file. But that’s just naming so it doesn’t matter too much.)
To do get the actual URL, you need to update your query.

Now, your response will yield an array of books, and every book object will have a

pdfUrl

property which is mapped to a URL to the Sanity asset CDN (provided the book has an attached PDF file).
From there, you can pass that URL to a

<a>

element so that it opens it in the current tab. You can add

target="_blank"

to your link so it opens it in a new tab for instance.

👆 is absolutely on point 💃 and

target_blank

is always a good choice ... Just btw (because I think it's cool): If you want the pdfs to be downloaded by clicking the link you can also add a simple

?do

to the URL at the end 😊