I have a Next.js app which has multiple pages. Each page has the same bar at the top of the screen which displays some data which is fetched from an internal API using SWR. The issue I am having is that to fetch that data it requires an ID of the logged in user (they log in with Discord via next-auth) and after they have left the first page, that ID value is no longer accessible to me.
I have tired storing it in local storage and session storage, I have tried passing it through other components, but nothing has worked and I am out of ideas of how to fix this. Is there any other way where I can pass a value between pages? Or is there a way I can access the session data again?
If you use this on all pages, you could just add that header into the _app.{js,tsx}(see the docs). In case you don't I suppose you create a layout component and reuse it across these pages.
In the future we might be able to use the new Routing API which allows passing adding Layout components for certain sub-routes. (Check the Layout RFC for more info).
because next js uses the react library so you can pass the data using props or you can use redux as well.
like this:
<Component propName={value}/>
Related
I'm using apollo-client inside Next.js using the setup documented in this example.
To quickly explain, in getServerSideProps(), we create an apolloClient, we do the query and then we use addApolloState() to pass the cache data to the client. Then, inside a component, we can use useQuery() to get the data and render the UI for it.
This works perfectly for queries.
Now, I have a use case where I want my data to reload automatically when it changes on the server. To do this, I'd like to use Subscriptions. However, I still want to have the page rendered on the server on the first load with the right data.
What's the best way to achieve this?
I've tried the approach explained on this issue which consists in using subscribeToMore and override the whole query when a result arrives. However, it's not ideal as the subscription is still fired on the first page load and receives the same data than the one already in the cache.
I want to set the dynamic deep link with query param. For example, Suppose I've got the following information, Let's say for user1 the URL is https://example.com/res/?appId=67abeuusbev&value=55673 this link will be dynamic. i.e. for user2 it can be https://example.com/res/?appId=67abeuusbev&value=55674. I've set up the Firebase dynamic link. For example, say exampletest.page.link/SYu7 . Now I want to set up the deeplink in such a way that those appId and value (https://example.com/res/?appId=67abeuusbev&value=55674) can be set dynamically as a deep link whenever this link will be clicked from a web browser and based on the respective param values I can handle the link. Is there any way to do the same in the firebase dynamic link? I'm using React Native. Thanks for the consideration in advance.
If you're looking into modify short Firebase Dynamic Links programmatically, then it's currently not possible. The only way to update the parameters configured (i.e. deep link) in a short FDL is through the Firebase console, and only short FDLs created from the console can be edited. Short FDLs created programmatically are not displayed in the FDL dashboard.
As a workaround, you can create long FDL manually - by appending parameters and its values. Note that deep links need to be URL-encoded if it has multiple parameters.
i.e. https://exampletest.page.link/?link=https%3A%2F%2Fexample.com%2Fres%2F%3FappId%3D67abeuusbev%26value%3D55674
You can check if the deep link will be able to carry the parameters configured in it by debugging the Dynamic Link using preview page flowchart.
I have multiple iframes which need to share state, so that changes to the state in one iframe is reflected in the other iframe. I was looking into redux and having that globally scoped on the window so that both iframes have access to the store but wanted to get a second opinion and if anyone has experience doing this how I would go about it?
Something that I found was if the iframes is a different host than the parent window, the iframes cannot write to that object. So if you want to do something like window.parent.reduxStore = createStore(rootReducer) then you need to be on the same origin. Other than that issue the store has been able to keep both iframes in sync and working well :)!!!
I am using a firebase deep link for my e-commerce application. I am able to create a dynamic link from the console and add a deep link with extra parameters to it. But those parameters are hardcoded.
I can see from the docs that we can create dynamic links using API and SDK. It is suggested in the docs to create a new one every time.
Also, dynamic links created using API or SDK does not show up in the console.
Is there any way to keep the dynamic link same and pass the parameters to it?
I am planning to use the dynamic links in conjunction with the notification. I want to use dynamic links to deep link the notification to a specific screen.
Is there a way to add the extra parameters(e.g. order_id or product_id) to the dynamic link?
Since each of your products is unique, each of them will need a unique dynamic link.
If you want to pass custom values, you typically encode them into the URL as shown here: Add parameter to Firebase Dynamic Links.
For example, if you use the "manually" create URLs you pass in the link parameter of your choice and that would contain your product ID:
https://your_subdomain.page.link/?link=https://www.example.com/product1234&apn=package_name[&amv=minimum_version][&afl=fallback_link]
Note: I put "manually" in quotes there, since building URLs this way is highly automatable; it is just more explicit than the using the API to build the URL.
I am creating an app using Polymer and Polymerfire elements and I can't find an effective way to share user and auth references across the app.
My current solution of receiving auth reference is as follows:
var auth = document.getElementById('appID').app.auth()
This approach works but I have a hunch that there should be a better way.
Second problem is, that I am not sure howto get the user reference in subviews, were getting the reference by property sharing would be super cumbersome(and I've been having issues using this approach).
I was thinking that using iron-meta tag might solve the issue, but that would mean that on every login and logout I would have to set the value "manually". So is there a more straightforward way to share the reference?
If I access the firebase-auth reference directly:
document.getElementById('authID').user
Then there is a problem that when it's accessed in the element's ready function call it's always null. If it's called later, then it works fine but I need to check if the user is logged in in ready call(and redirect to login page).
Plus, this approach doesn't work at all if global Polymer setting is set to: dom: 'shadow' (The firebase-auth is not located in index.html but lower and with this setting I am able to access only the index.html elements.) and this setting is supposed to be set by default in the future and I want the solution to be future-proofed.
I'll be grateful for any responses, Jan
The polymer fire element created by the polymer team will solve all your problems.
It's divided into the following elements:
firebase-auth
firebase-app
firebase-document
firebase-query
firebase-messaging
Video Tutorial Authentication with Firebase -- Polycasts #57
Official Documentation
I solved the issue. Apparently it's possible to initialize the firebase-auth element wherever you want and the element retains the app state as long as the app name is provided.
<firebase-auth id="auth" app-name=name-of-the-app"></firebase-auth>
Than just use the element reference:
this.$.auth