Microsoft 365 Community Community Demos, 23 Feb 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Simplify your SPFx code with react-query

Description

In this 10-minute developer-focused demo, Marcin Wojciechowski shares the what, why, and how for using React queries. Implement ContextProvider, pass http client to context provider, wrap root component with ContextProvider, implement hook returning useQuery method, and consume your hook in any child component of your context. Tips: use mgwdev-m365-helpers for auto-batching, use pnp.js context in your hook, pass ootb spHttpClient or msGraphClient to ContextProvider, common query reuse, and Use useMutation for posting data!

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on February 23, 2023.

Demo Presenter
• Marcin Wojciechowski (Valo) | @mgwojciech

Supporting materials
• Article - How to use React hooks with the SharePoint Framework (SPFx) | https://www.voitanos.io/blog/how-to-use-react-hooks-with-sharepoint-framework-spfx-projects/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

A

A

Solutions but as you may imagine, as the name suggests, because it's the react query you can use that only Solutions. You are using react. So sorry, today, nothing interesting for adaptive cards, only old school development, two words about myself, I! Imagine you can find me on social medias. If you want I highly encourage, let's have some discussion about code.

A

That will help you with.

A

Api, the whole idea is that, usually, if you have experience with a react, either functional components or class components, if you do something for shared point, you start every class or every functional component, the same way either use effect and state is loading, State obtains data or you have component Dismount and in components you call from API which of course is a lot of repetitive things, and you have to wonder about.

A

Oh, how do I deal with caching, how high I will deal with concurrent requests to the same endpoint and all of that magic which someone extremely smart abstracted into multiple library before we move forward, because you can see it provides hooks for communications, backend API. The question is: what are the Glorious hooks and effectively react? Hooks are a feature that the react, introducer I, believe we react 16.8 to help you manage component State, the biggest issue with uh with such approach with with hooks it.

A

It requires biting binding context, so also I, believe since react 16.8 or in react. 16.8 uh react in introduce something like the ACT context which can help you register your common dependencies functionalities and all of that magic. So you can shred it across other components, um I'm, not sure, if that's the best way forward. This is an open question. Also I believe this is important to note here that usually when I present, something on such calls, I can very confidently say that it will scale. This is a great solution.

A

If you won't go for it this this time, I didn't tested it enough in a big scale. To confidently say this will not break it's. Definitely a concept worth playing around with, but approach with cautious Kevin said that. Why would we use that I mentioned a little bit of that before it? It has beautiful handling of literary policies, error, caching, concurrency also. It has amazing support for something called steady requests, which I hope I will not forget to show.

A

It simplifies the development quite a lot because, as you will see in a moment in the demo, you have only one book per functionality and by that it also improves a little bit uh state, but not just for common requests and I believe the most common request request used for users, because when you render news the dead bottom usually want to render who created it.

A

When you render items created by Modified by events who created so the endpoints related to users are very commonly used all across your application, and it is a at least in my experience quite common issue. Not all of them are calling the same endpoint but separately, and you just duplicate the network. Throughput.

A

As I mentioned, we would need something called context provider to that context. Provider would have to provide or pass HTTP client, and this is a little bit of important Point. Usually it requires authentication as a service dependency, and this would be very often asking operation. So you cannot just clearly create this without any context. I would go into multi details about this engineering demo.

A

Once we will have our HTTP client, we go with a rapid around our original component with context provided, so we can provide context for our provider so that we can provide context for our component. Then we implement the hook. That is electronic use. Square method and use Square method is the beef of our today's. My today's demo use, when is the lovely method from react.

A

Query Library finally becomes assume that in child components or in our good component will never be like as long as it's below context provided then, the last step is enjoy and pure enjoyment of nice and simple solution for the complex problem.

A

Kevin said that let's take a look at our demo, okay, so, first of all, because that's the demo, you can see I have a spfx web part with one two, three four user cards. Those are new, your customers have cards will go in a second, but first of all, I wanted to show you that state functionality because react query will automatically detect. If you have some State requests. I have to open this page for about four hours, and you can see that everything I've been done when it detects steadness.

A

It's cause a react, not react, but graph to get new data about users. So this is how our web part. It looks like nothing to fancy, but as always, the devil is in the details.

A

Let's go from the top, our detect query sample our web part in our weapon. We have London and, as I said previously, we have our almost out of the box component and instead of rendering it and passing it here to the epidometer, and then we create a context. When we provide our graph client and our created elements, then we use their Dom to render our components. So this is the easiest way to provide context into our component and here on any type initialize.

A

The graph client I, don't want to go to into too much details about it, but I promise to you will see that a weight on in it is asking so here we can actually avoid the alternative authentication magic, which is lovely now, let's discuss what that context provider is actually actually is not context from where it actually is in context provided as as a some seconds ago, we provide that magical graph.

A

Client I would have played this simple, HTTP client, nothing to worry about here, but this query client, which, as you can see, is quite a client imported from the ACT query. Here we can Define some interesting things like style time, cache time the retry policy again don't want to go too much into details about it because for the shutdown time but effectively, that's it now the use use user query which returns U squared again U Square it from react. Query here you can see actually binds together a few requests.

A

We are batching it into one and we are returning. The user object now I mentioned that it will automatically handle concurrency, which I believe is the most important, because if we go to react, query sample you can see, we have four different users, but for for different components, but all of those components are actually using the same use user query here in another user field and component with nested user and a simplest user. We every time we use only this use, Query method and in this candidates.

A

All of that concurrency, so either rendering four elements of four components on the web page that are recording only we are calling the endpoint only once on that, because skin resistance could say that much usually talking about unit tests and how you can unit test stuff when there is this big context, provided the tendency today surrounded first of all, we can provide actually the whole context and in our two-hour context, provider just pass mocked graph, client or which is even better for the isolation testing using just Mock You can actually mock the whole hook itself.

A

So then, for our for our test, you will just land and use it as you would rendered anywhere else. You will just don't have you will remove during the attack dependency to context because you are working cook has a Hub on that note. I hope! That's enough. If that have any questions, I would love to talk about it. Ping me, but I will leave some time for next presenter have a lovely evening see you soon super demo.