storyblok / storyblok-react

React SDK for Storyblok CMS
MIT License
122 stars 37 forks source link

Is there a way to get the full story in a blok ? #872

Closed anthonyhexium closed 11 months ago

anthonyhexium commented 11 months ago

Description

Hi !

I am fetching data directly from the API using Next. So I am not using the Storyblok JS Client (for various reasons including cahing / revalidating).

Using the API when who want to use resolve_relations they come in a rels object in the API response.

Is the an actual way to retrieve inside a blok the content of the original response ?

Suggested solution or improvement

Add a second attribute to retrieve original data


export default async function RelatedTechnologies({ blok, rels }: { blok: RelatedTechnologiesStoryblok, rels : StoryblokRelations }) {
}

### Additional context

_No response_

### Validations

- [X] Follow our [Code of Conduct](https://www.storyblok.com/trust-center#code-of-conduct?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-js-client)
anthonyhexium commented 11 months ago

Also, why am I asking this ?

Because I whenever we fetch inside a server component, Next doesn't render the content until fetch is completed. So it can impact SEO.

import { storyblokEditable } from '@storyblok/react/rsc';

import TechnologyCard from '@/components/technology-card';
import { technologyService } from '@/services/technology';
import { RelatedTechnologiesStoryblok } from '@/types/storyblok';

export default async function RelatedTechnologies({ blok }: { blok: RelatedTechnologiesStoryblok }) {
  const selectedTechnologies = blok.technologies;

  let technologies;

  if (selectedTechnologies!.length) {
    technologies = await Promise.all(
      selectedTechnologies!.map((technology) => technologyService.getTechnologyByUuid(technology as string))
    );
  }

  return (
    <div {...storyblokEditable(blok)} className="mx-auto flex max-w-4xl flex-wrap justify-center gap-10 px-6">
      {technologies!.map((technology) => (
        <TechnologyCard key={technology.story.uuid} {...technology.story} />
      ))}
    </div>
  );
}
fgiuliani commented 11 months ago

Hi @anthonyhexium!

Did you take a look at our Resolve Relations docs? Probably double-checking if the formatting of the parameter is ok? https://www.storyblok.com/tp/using-relationship-resolving-to-include-other-content-entries

In case it still doesn't work, can you share the request you are fetching so we take a look at it?

anthonyhexium commented 11 months ago

Hi @fgiuliani yes I did and my major concerns is this part

​​Keep in mind that the resolved relationship will not be included in the content of the home​ story but under the rels​ array below the story​ when using an API request. That said, it will also not be reflected in the input​ Storyblok JS Bridge as it is an API operation and changes the default structure, so disabling the input​ or check for your references being uuid​ strings or objects need to be done.

So I have to pass rels as props all the way down.

fgiuliani commented 11 months ago

Hey @anthonyhexium sorry for the misunderstanding. Looks like I was confused. I asked the team about the case and If you are using the Content Delivery API without any of our SDKs, you get the resolved relations on the rels object

They should either use one of our SDKs or replicate the same actions our JS Client is performing to inject resolved stories inside the fields in place of their UUIDs. The CDN API V1 used to inject the resolved relations in the fields but this approach seemed to have some issues: if you have 10 relations to the same story in your current story, that story is then injected inside 10 fields, which means that the CDN API will deliver a bigger payload and more traffic will be consumed. With the new approach of the CDN API V2 we serve a smaller payload because even if a story is in 10 relations inside the current story, it will be served inside the rels array just once. performances. With the old approach we could resolve and inject less relations, with the new approach the limit increased. Our JS Client is just taking the response from the API, searching for relations in the story object and then replacing the UUIDs with the stories from the rels array. And it takes care of the case when relations are too many and you hit the limit, so you don't get the rels array but you get instead the rels_uuids (list of uuids to resolve) array and it resolved the relations programmatically for you. In regard to the Bridge: I think we need to review the docs because the Bridge is sending the story object with the resolved stories injected inside the fields and not in the separate array, so it has a similar approach to the JS Client.