Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

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.

Get started for freeExplore the demo

Was this answer helpful?