Prismic, Nuxt3, Typescript - how to retrieve content type relationship links typed (fetchLinks or graphQuery)

Question

How can i retrieve typed documents / models for relationships when querying data?

const { data: document } = await useAsyncData('[product-uids]', () =>
  client.getByUID('product', route.params.product_id as string, {
    fetchLinks: [
      'product_symbols.symbols',
      
    ],
  })
);

The data is received but the (related) types are not resolved. When iterating the document: document.data?.symbols?.data?.symbols?.data typescript dont know about the fetched links and data is unknown. Right now instead of data (what is actually there) typescript think link_type is the property.

Is there a way of resolving the nested types without going crazy and doing all kinda hacks?

Answer 1

After reading your question, i go over prismic documentation, and here is the example I found

export default {
  async asyncData({ $prismic, params, error }) {
    const document = await $prismic.api.getByUID('page', params.uid)

    if (document) {
      return { document }
    } else {
      error({ statusCode: 404, message: 'Page not found' })
    }
  }
}

In the following example, you will see that prismic doesn't provide a type when it's dependent on fetching data because the compiler doesn't really know what he will receive, because you can send any data schema over the same endpoint when you build the backend

The only solution that you can do as a developer when you build a front-end or backend with any technology and stack that you want is to create a shared folder with shared types to let the both front and back to import the shared types from there

You should create an interface to receive and display the data. This is the safest way to ensure consistency and security.

const getAcademic = async (): Promise<IAcademic> => {
  return (await backendInstance.get("/academic/:id")).data;
};

const useGetAcademic = (auth?: string) => {
  return useQuery<IAcademic, Error>(["academic"], getAcademic);
};

try to make one request and you will receive a big object with all the data, then take this object to this website and he will build for you an interface https://transform.tools/json-to-typescript