Modernize Data Fetching API (A small doubt)

, ,
1

Hi, I am spending hours on researching about this topic Modernize Data Fetching API and seem to get hang on what this project is. But one thing is, look in this code,

// ⬇️ define your query
const contactDetailQuery = (id) => ({
  queryKey: ['contacts', 'detail', id],
  queryFn: async () => getContact(id),
})

export default function Contact() {
  const params = useParams()
  // ⬇️ useQuery
  const { data: contact } = useQuery(contactDetailQuery(params.contactId))
  // render some jsx
}

it is taken form Modernize Data Fetching API - `@plone/client` · Issue #4347 · plone/volto · GitHub and now I have a doubt that how will this piece of code will be beneficial to other persons using our library @plone/client (as mentioned is the project ideas in gsoc). One thing we can do if it is unnessisary is that we can private it for just our use in plone's volto. I am stuck here, It might be a silly question but I would really love to hear about it from @sneridagh the mentor for this project.

Thanks,
Danish arora

2

Hi Danish,

As you might already know, Tanstack Query is an agnostic library. Meaning, it can be used in non-ReactJS frameworks, like Svelte, Preact, Angular, etc... The generic primitive that we can share is a function that generates the parameters to pass to Tanstack query, and this is the object with the parameters, in this case, contactDetailQuery.

While is not the goal of the project to provide all this integrations, it is to provide this primitives, so they can be easily reused in these frameworks.

Then in Volto, we will have to provide a set of custom hooks that consume these primitives. Although we can maintain them in @plone/client... something TBD.

Another goal of the project is to achieve maximum plugability, not only with Volto, but with any other framework.

Cheers,

3

@sneridagh Thank you sir for this information, while we are at this discussion I would really love to know more about AsyncConnect (or redux-connect library). As this is going to help boost my research on this project a lot.

Moreover, please point me towards some of the web links where I can study about this project's current custom made redux middleware we use in volto for server state management.

I know this all is for later when one of us contributors have been selected for the project but truly I love to know about these codebases which has actively been maintained for some years now and are used in production because growing up I want to create one such project of my own.

Thanks in advance,

4

Hi,

OMG, sounds weird but finally I got what all the pieces I found regarding this project means, just to confirm what you mean is that this library is for plone's use only but the twist is that this library can be accessed by any other JavaScript based framework.

This library will not be intended for any one to use but only for plone's development only. And all the Server State Handling will be passed to this library, just like there are some examples already withing the repo GitHub - plone/plone.restapi-client: JavaScript Plone RESTAPI client - JS framework agnostic library based on TanStack Query .

I am not a beginner to WebDevelopment but I am beginner to communicating on a problem to others. I would love to hear if I am right or wrong on what I understood about the project.

Thanks for your help,

1 Like
5

Hi Danish,

I think you don't have to put so much effort in understanding how AsyncConnect works in current Volto. Anyways, if you want, look at the source. You only have to know that AsyncConnect is used for the SSR (NodeJS Volto server side rendering Express engine) for render all the app in the server in the initial request. This is key for SEO to work correctly and for performance reasons.

Please take a look at the PoC that is mentioned in the PLIP, where AsyncConnect is removed from the equation, replaced by react-query.

Cheers,

1 Like
6

Regarding this, try to think how this would work if you want to build a NextJS project that has Plone in the backend, and how @plone/client would work in the final project picture.

1 Like
7

I appreciate how you are teaching a baby how to walk😂. Thanks for your help and I am working hard to understand this project and I am sure with someone like your help I will be able to pull it off.

Thanks,