NextJS Preview 414 Request-URI Too Large

Developing with Prismic
1

Hello,

We are using old preview integration which is working as expected, but for some of our pages, we start getting 414 error from prismic API.

Our dependencies

"@prismicio/client": "6.0.0",

// Preview API

import * as prismic from '@prismicio/client'
import { linkResolver } from 'prismic/LinkResolver'
import { serialize } from 'cookie'

const Preview = async (req, res) => {
  const { token, documentId } = req.query
  const endpoint = prismic.getEndpoint(repoName)
  const client = prismic.createClient(endpoint, {
    accessToken
  })

  client.enableAutoPreviewsFromReq(req)

  const redirectUrl = await client.resolvePreviewURL({
    linkResolver,
    defaultURL: '/',
    documentID: documentId,
    previewToken: token
  })

  res.setHeader('Set-Cookie', serialize('Preview_url', req.url, { path: '/' }))
  res.setPreviewData({ ref: token })
  res.writeHead(302, { Location: `${redirectUrl}` })
  res.end()
}

My response from prismic server looks like this

error - PrismicError: An invalid API response was returned
    at Client.fetch (.../website-next/node_modules/@prismicio/client/dist/index.js:475:15)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Client.getFirst (.../website-next/node_modules/@prismicio/client/dist/index.js:244:20)
    at async Client.getByUID (.../website-next/node_modules/@prismicio/client/dist/index.js:279:12)
    at async query (webpack-internal:///./node_modules/next-slicezone/features/query.js:14:10)
    at async eval (webpack-internal:///./prismic/hooks/enrichedGetStaticProps.ts:55:17)
    at async Object.renderToHTML (.../website-next/node_modules/next/dist/server/render.js:386:20)
    at async doRender (.../website-next/node_modules/next/dist/server/base-server.js:687:38)
    at async cacheEntry.responseCache.get.isManualRevalidate.isManualRevalidate (.../website-next/node_modules/next/dist/server/base-server.js:796:28) {
  url: 'https://oxylabs-sm.cdn.prismic.io/api/v2/documents/search?q=%5B%5Bat%28document.type%2C+%22blog_post%22%29%5D%5D&q=%5B%5Bat%28my.blog_post.uid%2C+%22cost-of-data-collection%22%29%5D%5D&ref=https%3A%2F%2Foxylabs-sm.prismic.io%2Fpreviews%2FY3YGexIAACgAs6BQ%3FwebsitePreviewId%3DYCLs5BEAAF4obOAY&fetchLinks=authors.no_index%2Cauthors.avatar%2Cauthors.name%2Cauthors.surname%2Cauthors.position%2Cauthors.short_description%2Cauthors.linkedin_url%2Cauthors.facebook_url&routes=%5B%7B%22type%22%3A%22mobile_proxies%22%2C%22path%22%3A%22%2Fproducts%2Fmobile-proxies%2F%5Buid%5D%22%2C%22href%22%3A%22%2Fproducts%2Fmobile-proxies%2F%22%7D%2C%7B%22type%22%3A%22rotating_isp_proxies%22%2C%22path%22%3A%22%2Fproducts%2Frotating-isp-proxies%2F%5Buid%5D%22%2C%22href%22%3A%22%2Fproducts%2Frotating-isp-proxies%2F%22%7D%2C%7B%22type%22%3A%22ppc%22%2C%22path%22%3A%22%2Fpages%2F%5Buid%5D%22%2C%22href%22%3A%22%2Fpages%2F%22%7D%2C%7B%22type%22%3A%22solutions%22%2C%22path%22%3A%22%2Fsolutions%2F%5Buid%5D%22%2C%22href%22%3A%22%2Fsolutions%2F%22%7D%2C%7B%22type%22%3A%22enterprise%22%2C%22path%22%3A%22%2Fproxies-for-enterprises%22%2C%22href%22%3A%22%2Fproxies-for-enterprises%22%7D%2C%7B%22type%22%3A%22legal%22%2C%22path%22%3A%22%2Flegal%2F%5Buid%5D%22%2C%22href%22%3A%22%2Flegal%2F%22%7D%2C%7B%22type%22%3A%22oxycore%22%2C%22path%22%3A%22%2Foxycore%2F%5Buid%5D%22%2C%22href%22%3A%22%2Foxycore%2F%22%7D%2C%7B%22type%22%3A%22products_parent%22%2C%22path%22%3A%22%2Fproducts%22%2C%22href%22%3A%22%2Fproducts%22%7D%2C%7B%22type%22%3A%22products%22%2C%22path%22%3A%22%2Fproducts%2F%5Buid%5D%22%2C%22href%22%3A%22%2Fproducts%2F%22%7D%2C%7B%22type%22%3A%22scraper_api%22%2C%22path%22%3A%22%2Fproducts%2Fscraper-api%2F%5Buid%5D%22%2C%22href%22%3A%22%2Fproducts%2Fscraper-api%2F%22%7D%2C%7B%22type%22%3A%22features%22%2C%22path%22%3A%22%2Ffeatures%2F%5Buid%5D%22%2C%22href%22%3A%22%2Ffeatures%2F%22%7D%2C%7B%22type%22%3A%22resources%22%2C%22path%22%3A%22%2Fresources%2F%5Buid%5D%22%2C%22href%22%3A%22%2Fresources%2F%22%7D%2C%7B%22type%22%3A%22integrations%22%2C%22path%22%3A%22%2Fresources%2Fintegrations%2F%5Buid%5D%22%2C%22href%22%3A%22%2Fresources%2Fintegrations%2F%22%7D%2C%7B%22type%22%3A%22oxycast%22%2C%22path%22%3A%22%2Fresources%2Foxycast%2F%5Buid%5D%22%2C%22href%22%3A%22%2Fresources%2Foxycast%2F%22%7D%2C%7B%22type%22%3A%22press_area%22%2C%22path%22%3A%22%2Fpress-area%22%2C%22href%22%3A%22%2Fpress-area%22%7D%2C%7B%22type%22%3A%22oxycon%22%2C%22path%22%3A%22%2Foxycon%22%2C%22href%22%3A%22%2Foxycon%22%7D%2C%7B%22type%22%3A%22oxycon_inner%22%2C%22path%22%3A%22%2Foxycon%2F%5Buid%5D%22%2C%22href%22%3A%22%2Foxycon%2F%22%7D%2C%7B%22type%22%3A%22kyc%22%2C%22path%22%3A%22%2Fkyc-and-safety%22%2C%22href%22%3A%22%2Fkyc-and-safety%22%7D%2C%7B%22type%22%3A%22solutions_parent%22%2C%22path%22%3A%22%2Fsolutions%22%2C%22href%22%3A%22%2Fsolutions%22%7D%2C%7B%22type%22%3A%22about_us%22%2C%22path%22%3A%22%2Fabout-us%22%2C%22href%22%3A%22%2Fabout-us%22%7D%2C%7B%22type%22%3A%22locations%22%2C%22path%22%3A%22%2Flocation-proxy%2F%5Buid%5D%22%2C%22href%22%3A%22%2Flocation-proxy%2F%22%7D%2C%7B%22type%22%3A%22locations_parent%22%2C%22path%22%3A%22%2Flocation-proxy%22%2C%22href%22%3A%22%2Flocation-proxy%22%7D%2C%7B%22type%22%3A%22ecommerce%22%2C%22path%22%3A%22%2Fproducts%2Fscraper-api%2Fecommerce%2F%5Buid%5D%22%2C%22href%22%3A%22%2Fproducts%2Fscraper-api%2Fecommerce%2F%22%7D%2C%7B%22type%22%3A%22serp%22%2C%22path%22%3A%22%2Fproducts%2Fscraper-api%2Fserp%2F%5Buid%5D%22%2C%22href%22%3A%22%2Fproducts%2Fscraper-api%2Fserp%2F%22%7D%2C%7B%22type%22%3A%22web%22%2C%22path%22%3A%22%2Fproducts%2Fscraper-api%2Fweb%2F%5Buid%5D%22%2C%22href%22%3A%22%2Fproducts%2Fscraper-api%2Fweb%2F%22%7D%2C%7B%22type%22%3A%22home%22%2C%22path%22%3A%22%2F%22%2C%22href%22%3A%22%2F%22%7D%2C%7B%22type%22%3A%22404%22%2C%22path%22%3A%22%2F404%22%2C%22href%22%3A%22%2F404%22%7D%2C%7B%22type%22%3A%22cybersecurity_proxies%22%2C%22path%22%3A%22%2Fsolutions%2Fcybersecurity-proxies%2F%5Buid%5D%22%2C%22href%22%3A%22%2Fsolutions%2Fcybersecurity-proxies%2F%22%7D%2C%7B%22type%22%3A%22oxylabs_multilogin%22%2C%22path%22%3A%22%2Foxylabs-multilogin%22%2C%22href%22%3A%22%2Foxylabs-multilogin%22%7D%2C%7B%22type%22%3A%22trusted_provider%22%2C%22path%22%3A%22%2Ftrusted-provider%22%2C%22href%22%3A%22%2Ftrusted-provider%22%7D%2C%7B%22type%22%3A%22proxy_experts%22%2C%22path%22%3A%22%2Fproxy-experts%22%2C%22href%22%3A%22%2Fproxy-experts%22%7D%2C%7B%22type%22%3A%22pricing_parent%22%2C%22path%22%3A%22%2Fpricing%22%2C%22href%22%3A%22%2Fpricing%22%7D%2C%7B%22type%22%3A%22pricing%22%2C%22path%22%3A%22%2Fpricing%2F%5Buid%5D%22%2C%22href%22%3A%22%2Fpricing%2F%22%7D%2C%7B%22type%22%3A%22service_partners%22%2C%22path%22%3A%22%2Fservice-partners%22%2C%22href%22%3A%22%2Fservice-partners%22%7D%2C%7B%22type%22%3A%22florida_parent%22%2C%22path%22%3A%22%2Flocation-proxy%2Fusa%2Fflorida%22%2C%22href%22%3A%22%2Flocation-proxy%2Fusa%2Fflorida%22%7D%2C%7B%22type%22%3A%22florida%22%2C%22path%22%3A%22%2Flocation-proxy%2Fusa%2Fflorida%2F%5Buid%5D%22%2C%22href%22%3A%22%2Flocation-proxy%2Fusa%2Fflorida%2F%22%7D%2C%7B%22type%22%3A%22california_parent%22%2C%22path%22%3A%22%2Flocation-proxy%2Fusa%2Fcalifornia%22%2C%22href%22%3A%22%2Flocation-proxy%2Fusa%2Fcalifornia%22%7D%2C%7B%22type%22%3A%22california%22%2C%22path%22%3A%22%2Flocation-proxy%2Fusa%2Fcalifornia%2F%5Buid%5D%22%2C%22href%22%3A%22%2Flocation-proxy%2Fusa%2Fcalifornia%2F%22%7D%2C%7B%22type%22%3A%22pennsylvania_parent%22%2C%22path%22%3A%22%2Flocation-proxy%2Fusa%2Fpennsylvania%22%2C%22href%22%3A%22%2Flocation-proxy%2Fusa%2Fpennsylvania%22%7D%2C%7B%22type%22%3A%22pennsylvania%22%2C%22path%22%3A%22%2Flocation-proxy%2Fusa%2Fpennsylvania%2F%5Buid%5D%22%2C%22href%22%3A%22%2Flocation-proxy%2Fusa%2Fpennsylvania%2F%22%7D%2C%7B%22type%22%3A%22massachusetts_parent%22%2C%22path%22%3A%22%2Flocation-proxy%2Fusa%2Fmassachusetts%22%2C%22href%22%3A%22%2Flocation-proxy%2Fusa%2Fmassachusetts%22%7D%2C%7B%22type%22%3A%22massachusetts%22%2C%22path%22%3A%22%2Flocation-proxy%2Fusa%2Fmassachusetts%2F%5Buid%5D%22%2C%22href%22%3A%22%2Flocation-proxy%2Fusa%2Fmassachusetts%2F%22%7D%2C%7B%22type%22%3A%22new_york%22%2C%22path%22%3A%22%2Flocation-proxy%2Fusa%2Fnew-york%22%2C%22href%22%3A%22%2Flocation-proxy%2Fusa%2Fnew-york%22%7D%2C%7B%22type%22%3A%22maryland%22%2C%22path%22%3A%22%2Flocation-proxy%2Fusa%2Fmaryland%22%2C%22href%22%3A%22%2Flocation-proxy%2Fusa%2Fmaryland%22%7D%2C%7B%22type%22%3A%22core_values%22%2C%22path%22%3A%22%2Fcore-values%22%2C%22href%22%3A%22%2Fcore-values%22%7D%2C%7B%22type%22%3A%22newsletter_subscription%22%2C%22path%22%3A%22%2Fnewsletter-subscription%22%2C%22href%22%3A%22%2Fnewsletter-subscription%22%7D%2C%7B%22type%22%3A%22datacenter_proxies%22%2C%22path%22%3A%22%2Fproducts%2Fdatacenter-proxies%2F%5Buid%5D%22%2C%22href%22%3A%22%2Fproducts%2Fdatacenter-proxies%2F%22%7D%2C%7B%22type%22%3A%22next_gen_residential_proxies%22%2C%22path%22%3A%22%2Fproducts%2Fnext-gen-residential-proxies%2F%5Buid%5D%22%2C%22href%22%3A%22%2Fproducts%2Fnext-gen-residential-proxies%2F%22%7D%2C%7B%22type%22%3A%22blog_post%22%2C%22path%22%3A%22%2Fblog%2F%5Buid%5D%22%2C%22href%22%3A%22%2Fblog%2F%22%7D%2C%7B%22type%22%3A%22blog_homepage%22%2C%22path%22%3A%22%2Fblog%22%2C%22href%22%3A%22%2Fblog%22%7D%2C%7B%22type%22%3A%22authors%22%2C%22path%22%3A%22%2Fblog%2Fauthors%2F%5Buid%5D%22%2C%22href%22%3A%22%2Fblog%2Fauthors%2F%22%7D%2C%7B%22type%22%3A%22authors_homepage%22%2C%22path%22%3A%22%2Fblog%2Fauthors%22%2C%22href%22%3A%22%2Fblog%2Fauthors%22%7D%2C%7B%22type%22%3A%22project_4beta%22%2C%22path%22%3A%22%2Fproject-4beta%22%2C%22href%22%3A%22%2Fproject-4beta%22%7D%2C%7B%22type%22%3A%22affiliates%22%2C%22path%22%3A%22%2Faffiliates%22%2C%22href%22%3A%22%2Faffiliates%22%7D%2C%7B%22type%22%3A%22next_gen_residential_proxies_story%22%2C%22path%22%3A%22%2Fnext-gen-residential-proxies-story%22%2C%22href%22%3A%22%2Fnext-gen-residential-proxies-story%2F%22%7D%2C%7B%22type%22%3A%22legal_timeline%22%2C%22path%22%3A%22%2Flegal-timeline%22%2C%22href%22%3A%22%2Flegal-timeline%2F%22%7D%2C%7B%22type%22%3A%22sustainability%22%2C%22path%22%3A%22%2Fsustainability%22%2C%22href%22%3A%22%2Fsustainability%22%7D%2C%7B%22type%22%3A%22features_parent%22%2C%22path%22%3A%22%2Ffeatures%22%2C%22href%22%3A%22%2Ffeatures%22%7D%5D',
  response: undefined,
  page: '/blog/[uid]'
}

Big thanks in advance.

Screenshot 2022-11-17 at 13.32.50

3

Hello, @Phil and @Pau maybe you have any information about this issue?
We are getting the same errors trying to build new pages.

5

Hi Arnas,

Are you using GraphQuery in your blog post queries?

7

Hello, @Phil,

Short answer - I think no.
Long answer - We are using next-slicezone, which uses @primisc/client under the hood. So If I understand correctly I should use REST API.

8

Sorry if I wasn't clear; GraphQuery is the query option used in our REST API to get content from a linked document. So it's not GraphQL.

I ask because the URL is too long, causing the error and this usually comes from GraphQL.

Saying that I can see you're using Fetch Links from your URL (&fetchLinks=) so you're not using GraphQuery.

What I can also see in your URL (&routes=) is that you're using the Route Resolver with a lot of entries, so my guess is that this is causing the URL too long error. Request URLs to the Rest API are limited to 2048 characters. You can reduce your string length by using line breaks with no spaces or tabs, or you can use a white space removal tool.

So having no whitespace in your Routes definition should solve this issue.

Thanks.

9

Thank you for your answer @Phil.

This solution is temporary because our repo is growing fast. What I did is migrated away from next-slicezone to recommended @prismicio/client, @prismicio/react, @prismicio/next and @prismicio/helpers

New integration build URL differently which solves our problem.
I hope this will be useful for others in the future.

2 Likes
10

Thanks for sharing your solution @juskeviciusarn this will definitely be useful for future users as your said.

I was unaware the old next-slicezone component had this issue.

Thanks again.