I am using rtk query with below logic
if(isSuccess){
console.log("success")
storeToken(data.token)
dispatch(login())
}
But this code causing too many re renders causing error in react native
Related
I looked at what nextjs returns when navigating the page and noticed that the state of hydration is duplicated on the page and transmitted in two different properties of the object:
I do not understand whether this is the norm of logic or whether it is not a duplication of logic.
I use next-i18next for multilingualism and next-redux-wrapper for hydration of redux storage on the server, and this is exactly the state it creates and is located in these two properties.
Therefore, when I noticed this, I wondered if this was normal logic, since my storage is not so small, and I would not like any extra operations when working on the server.
If you need more information, write in the comments.
It looks like the two set of props- pageProps and props are related to the loading of the Custom App component and the page component respectively. You can read about Custom App component here
And as the doc states.
pageProps is an object with the initial props that were preloaded for
your page by one of our data fetching methods, otherwise it's an empty
object.
I use vue3-simple-html2pdf.
<vue3-simple-html2pdf ref="vue3SimpleHtml2pdf" :options="pdfOptions" :filename="exportFilename">
<div class="main-content">
<h1>PDF</h1>
</div>
</vue3-simple-html2pdf>
<button #click="download">Download pdf</button>
documentation says to do this when i want to download pdf
this.$refs.vue3SimpleHtml2pdf.download()
I use composition api and try to do like this
const vue3SimpleHtml2pdf = ref(null)
const download = () => {
vue3SimpleHtml2pdf.download()
}
but it doesn't work
how can I fix it?
Your code is not complete to understand how you have built your app. Vue App section is not shown.
UPDATE
Here is looks like you are trying to use the download() function from 'null'.
const vue3SimpleHtml2pdf = ref(null)
const download = () => {
vue3SimpleHtml2pdf.download()
}
This does not make any sense to me.
It looks like you are mixing ref() and $refs up. The first is the Special Attribute ref with access through the Vue App property $refs and the second is the ref() reactivity function. Please check the docs on how to use them.
The vue3-simple-html2pdf plugin has a great explanation page and a working sandbox app.
If you are not sure how to use the plugin with the Composition API, then I would suggest you to try to make your code work with the Options API using the sample from the Sandbox.
UPDATE 2
Please read the Docs on using the Composition API, starting from
Creating a Vue Application and especially Components Basics.
The Vue Tutorial Step 11. Components is also very helpful.
I forgot that I should refer to the
vue3SimpleHtml2pdf.value.download()
not to the
vue3SimpleHtml2pdf.download()
another solution is to call the function on click in the template
<button #click="this.$refs.vue3SimpleHtml2pdf.download()">Download pdf</button>
I added Flatpickr to my project which has been working perfectly fine, however when checking in mobile view I get the following error when clicking on the input to open the calendar:
Uncaught DOMException: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet
I have trawled through SO and google to try and find a solution, but nothing seems to work. I have tried the solution proposed in this thread but my project is using styled-components, which means I do not have a stylesheet to import. However I tried adding the import in my styled-component, I also tried adding a stylesheet which I imported in _app.tsx.
By playing with the responsive mode, I have noticed that the error activates when the screen width drops bellow 392px. Anything bigger than that and it all works perfectly fine.
I have opted for a temporary solution whereby on mobile I display the native inputs as opposed to the Flatpickr, as this seems to offer a better user experience.
Additionally the Flatpickr doc seems to indicate that this is what they do also, so I am thinking that this error is due to that as I was hijacking the CSS in _app.js
I know that the topic isn't new and I found (and read) a few discussions. What I couldn't find is an answer to my still remaining question.
How do others work around the problem of not being able to use getStaticProps in _app.js ? getInitialProps is not an option for me cause I want to use SSG. Is there a way to force SSG even when using getInitialProps? Or do I really have to fetch all my data from my Headless CMS on every page? Since I want to build a Header (including Navigation) and a Footer, for example. Currently the only option I see is to repeat a lot of code.
Any hints much appreciated and thanks for reading!
Next.js recommends using getStaticProps or getServerSideProps instead of getInitialProps to get the best performance from Next.js.
If you're using Next.js 9.3 or newer, we recommend that you use getStaticProps or getServerSideProps instead of getInitialProps.
The reason why Next.js recommends this is that getInitialProps disables Automatic Static Optimization and uses Server-side Rendering.
Using getInitialProps in your _app.js will disable automatic static optimization for all pages in your application. In addition, it will force all your pages to be generated on every request, as they use server-side rendering, which will lead to a bad Time to First Byte (TTFB).
I've made a cheat sheet about Next.js page rendering with live demo and code examples on Github to help understand quickly how it works. This will help you choose the right page rendering strategy with Next.js depending on your use case.
Is there a way to force SSG even when using getInitialProps
No. Although Nextjs team is working to add support for getStaticProps for _app.js, currently it disables static optimizations.
As nextjs recommends, you should use getStaticProps when "The data comes from a headless CMS."
So you'll have to have to do the same logic in every page that needs the request. Note that's possible to extract this logic into a function and reutilize it everywhere
getData.js
export async function getData({ req, res }) {
const data = await getData();
return { props: { data: data} };
}
pages/example.js
export const getStaticProps = getData
As another option, you can fetch data once in getInitialProps.
Is easy to setup (but remember that you'll lose static optimization.)
_app.js
App.getInitialProps = ({ req, res }) => {
const data = await getData();
return { props: { data: data} };
}
I'm building a site with React and Asp.Net MVC. The site needs to be multi-language, I was planning on using the classic resx files for that.
I started doing this
#Html.React("FriendListContainer", new
{
initialData = Model,
getUrl = "/Friend/Get",
deleteUrl = "/Friend/Remove",
resFriends = Global.Friends // pass resource as prop
})
It works, but is far from ideal as this makes the code harder to read. Also I need to pass these props all the way down to the components that need them..
I tried using React-Intl but it does not work with server-side rendering. I would rather not go back to client-side rendering if possible.
How could I make this work without making my code look so clunky ?