๐Ÿ”ฎ Sanity Create is here. Writing is reinvented. Try now, no developer setup

Troubleshooting downloadable documents in NextJS using Sanity.io schema and groq queries.

13 replies
Last updated: Jun 13, 2022
Hi all,this

<a href={`${mediaURL}?dl=`}>Manuscript</a>
opens a page with 404 error
but it should be a downloadable document .
Jun 13, 2022, 9:06 AM
Hello
user F
, can you share the way you query for
mediaURL
? I suspect that the data of the document (just like with images and videos) is not dereferenced yet. Could you share more Info please ๐Ÿ˜Š
Jun 13, 2022, 9:29 AM
I use the groq like so
const homepageQuery = groq`*[_type == "documentfile"]{
  "documentURL": documentfile.asset->url
}[0]`;
then I use it in the front-end like this

<a href={`${documentfile}?dl=`}>PDF</a>
and return it like so

return {
    props: {
      data: {
        documentfile,
        product: res.productByHandle,
      },
    },
  };
}
now it redirects me to a 404 page
Jun 13, 2022, 9:35 AM
Also sinds I'm using nextjs I should probably use
<link>
instead of

<a>
right?
Jun 13, 2022, 9:38 AM
I will check your query in a sec, but with
<Link>
and
<a>
in NextJS:Link is used for any kind of internal routing, which also handles preload behaviour etc. Since you only use the url here for downloading I would stay with the normal
<a>
.
Jun 13, 2022, 9:53 AM
Ah okay
Jun 13, 2022, 9:57 AM
And about your file issue, I think I need to understand your schema. It seems you have a
document
called
documentfile
which in it has a
file
, am I right?
Jun 13, 2022, 10:04 AM
this is what the schema looks like
export default {
    name: "documentfile",
    title: "DocumentFile",
    type: "document",
  
    fields: [
        {
            title: 'Document',
            description: "Place document here",
            name: 'documentfile',
            type: 'file',
            fields: [
              {
                name: 'description',
                type: 'string',
                title: 'Description'
              }
            ]
          },
    ],
  };
Jun 13, 2022, 10:05 AM
What's the href like in your console in the end?
undefined?dl=
or something?
Jun 13, 2022, 10:33 AM
Thank you for sharing. So I think that one problem with this schema is that you named the document and the file the same, which can be a but unclear and I suspect hinder the query. I would try something like this:

// documentfile.js

export default {
    name: "documentfile",
    title: "DocumentFile",
    type: "document",
  
    fields: [
        {
            title: 'Document',
            description: "Place document here",
            name: 'file',
            type: 'file',
            fields: [
              {
                name: 'description',
                type: 'string',
                title: 'Description'
              }
            ]
          },
    ],
  };
The query would look something like this.

// query

const homepageQuery = groq`*[_type == "documentfile"]{
  "documentURL": file.asset->url
}[0]`;
But If you are embeding the query for
documentfile
within the overall homepageQuery, you might want to try something like this:
//Query 

const homepageQuery = groq`*[_type == "PAGEDOCNAMEorID"]{ โ€ฆ,
  "documentURL": documentfile.file.asset->url
}[0]`;

Jun 13, 2022, 10:41 AM
hmmm something is still off but I do get it returned in console
Jun 13, 2022, 11:11 AM
Then you should be able to use
documentfile.documentURL
(careful with capitalization).
Jun 13, 2022, 11:12 AM
Ah yes that works thank you !
Jun 13, 2022, 11:14 AM
Wonderful! Thank you
user F
๐Ÿ’œ
Jun 13, 2022, 12:43 PM

Sanityโ€“ build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?