Localized pages are found in Documents, but not in code/rendering

[jorikvanruiswijk]

Error in 'finding' documents.

I have recently added localization to my Next 14 Prismic project, based on this approach. It works, partially, for I want to show the available 'Case Study pages' on my Homepage for both EN-US and NL-NL. I have localized these 'Case Study pages' and I was able to find them when I wanted to link to them in my CaseStudies component. But, when I switch the locale from the Homepage (with the LanguageSwitcher) an error pops up saying:

Error: No documents were returned regarding the below location of the error.

So, they are available in my Documents, I was able to link to them, but my component does not find these NL-NL pages. Can someone see what I am doing wrong? Might be something small. (I hope!)

Here is a link to the branch of the localization in my repo:

GitHub - HalloJo/jorik-and-prismic at add-localization

Thanks in advance.

[Phil (Phil Snow)]

HI @jorikvanruiswijk ,

Welcome to the community

I've had a long look at your project and api etc.

I can't figure out what exactly the issue is yet, but can you tell me if there is a failing query URL to the API from this error:

@jorikvanruiswijk

Error: No documents were returned regarding the below location of the error.

If we can see the compiled URL it will help debug.

Thanks.

[jorikvanruiswijk]

Hi @Phil , thanks for replying.
I am not sure what you are looking for? Where would I find this query?
My literal url is http://localhost:3000/nl-nl, but I do not think that is what you are requesting

[jorikvanruiswijk]

Requests that go out, seem to return a 200..

[Phil (Phil Snow)]

I mean the cleint should somewhere be trying to build a URL request to the Prismic API which is failing. It should look like this:
https://cloudy-strudel-gvtwsx.cdn.prismic.io/api/v2/documents/search?ref=ZxETwBIAACEAhE15&src=apibrowser#format=json

[jorikvanruiswijk]

Hi @Phil ,

I have been looking into it, but I do not know where to look..
Could you give me some directions on how to find this?

[Phil (Phil Snow)]

Hi Jorik,

Manual Logging of the Request:

Modify the getByID method by wrapping it to capture and log the full request:

const CaseStudies = async ({
  slice,
  context,
}: CaseStudiesProps): Promise<JSX.Element> => {
  const client = createClient();
  const caseStudies = await Promise.all(
    slice.primary.case.map(async (item) => {
      if (isFilled.contentRelationship(item.case_study)) {
        console.log('Fetching case study with ID:', item.case_study.id);
        const response = await client.getByID<Content.CasePageDocument>(
          item.case_study.id,
          { lang: context.lang },
        );
        console.log('Request URL:', client.getEndpoint());
        return response;
      }
    }),
  );

  // Proceed with rendering
};

Here’s what’s happening:

• console.log('Fetching case study with ID:', item.case_study.id); logs the ID you’re fetching.
• client.getEndpoint() shows the Prismic API endpoint.

I also downloaded your project to test but there's no language switcher on the homepage.

[jorikvanruiswijk]

Hi @Phil ,

Thanks, will look into it.
The language switcher is in the branch add-localization.

Thanks in advance.

[jorikvanruiswijk]

Hi @Phil,

This is logged 'before' I link to the Dutch cases:

Fetching case study with ID: ZyNd3REAACwAIBjA
[next] Fetching case study with ID: ZyNeNREAACwAIBlG
[next] Request URL: https://jorik-and-prismic.cdn.prismic.io/api/v2
[next] Request URL: https://jorik-and-prismic.cdn.prismic.io/api/v2

This is logged 'after' I link the Dutch cases again:

Fetching case study with ID: Zyt97REAADMALFnz
[next] Fetching case study with ID: Zyt7lREAAC4ALFZc
[next]  ⨯ Error: No documents were returned
[next]     at async eval (./src/slices/CaseStudies/index.tsx:25:30)
[next]     at async Promise.all (index 0)
[next]     at async CaseStudies (./src/slices/CaseStudies/index.tsx:22:25)
[next] digest: "13332751"
[next]  ⨯ Error: No documents were returned
[next]     at async eval (./src/slices/CaseStudies/index.tsx:25:30)
[next]     at async Promise.all (index 0)
[next]     at async CaseStudies (./src/slices/CaseStudies/index.tsx:22:25)
[next] digest: "13332751"

As you can see on the screenshots, the cases are there.

I am lost .

[Phil (Phil Snow)]

So line 32 in your case studies Slice is failing

HalloJo/jorik-and-prismic/blob/1c568d86068418b2cbebd3068e15a3c07d937b93/src/slices/CaseStudies/index.tsx#L32

It's because it's not getting the language from the context, I guess.

If you console log the context, it's a blank object:

console.log('Context:', context);
const client = createClient();

You can't access the params inside a server component that's why the Slice is breaking, it's querying your dutch docs by their IDs in the English locale.

What can you do?

Send your params as a prop on the SliceZone component on your homepage file:

<SliceZone slices={home.data.slices} components={components} context={ params } />

And use that in the component:

return await client.getByID<Content.CasePageDocument>(
          item.case_study.id,
          context,
        );

[Phil (Phil Snow)]

Otherwise use GraphQuery to optimize and do less API calls:

GraphQuery

[jorikvanruiswijk]

Thanks @Phil , this seems to work!
Thank you for your patience .