How to get plan names in client-side member objects to avoid extra API calls in useMember()? Answered

Post author
Lloyd Li

I realize that the client side member object does not contain the name of a plan in member.planConnections.
No matter it's from useMember() or calling from api.

Only fetch member from admin api will have the planName.

can I request for support for that to be on the client side?

Comments

4 comments

  • Comment author
    Duncan from Memberstack

    Thank you for the request! I imagine this is because we are storing the plan name in Stripe, instead of in Memberstack. It would take another API call to Stripe to get the plan
    name (or we'd need to start saving it in Memberstack and syncing with Stripe anytime there are changes.)

    Can you tell us a bit more about why this feature is important to you? And what your plan B is if we are unable to add planName to the admin api?

    0
  • Comment author
    Lloyd Li

    It's because we need to display the name of plan at the frontend to users.

    currently our work around is call clientMember api first using token. once we got the memberId, use the memberId to call adminMember. And finally replace the clientMember's plan with adminMember's plan, to get a member object with completed data.

    this happens on page load, and since it's an extra api request, it's causing a longer loading time. Therefore I'm trying to find support for it

    Feedback:
    when using
    const { member, updateCustomFields } = useMember();
    if I call updateCustomFields(), is it possible to auto update member as well?
    so that we don't have to:
    await memberstack.getCurrentMember();
    to get the latest member.
    and the update can be catched by useEffect?
    Not sure if you guys have any concern on this.
    same applys to memberJSON and updateMemberJSON 
     
    0
  • Comment author
    Raquel Lopez

    Hello Lloyd,

    There are many alternative ways to optimize your request to get the member object. Memberstack provides a method (getPlans()) to access to all the plans that you have created in your site, that you can use to cross reference to get their names. I shared an example in this thread. But if you don't want to do an extra request you can store the plans object in session storage, that way the request would get called the first time and you would reference in later request from the session storage cache (if it exists).

    Just by logging in, Memberstack stores some information in localstorage (or cookies) for you, so you don't necessarily have to fetch the server with the latest data. So up to this point I'm basically reducing your member requests to once per session.


    If you are using a server to handle the data (as I see that you're using the admin API) you can manipulate the object any way that you want. You can just send a fetch request from the front to your server with the bearer token, in your server, you will decode the token, process the request in there (do all the calls that you need to do) and return the parsed object that your require.

    There's no need to use the frontend API and the admin API at the same time in this case 🙂
     
    When using updating methods you should get a response with the applied change, sou you wouldn't need to call the member object again.
     
    The react package is a wrapper of the frontend package, so you have all methods available. I would suggest to study the frontend package first, that way if you need a specific functionality you can create your own custom hook https://developers.memberstack.com/docs/dom-front-end-package#update-current-member-custom-fields
    0
  • Comment author
    Lloyd Li

    Hey Raquel Lopez I get it now, gotta look into more DOM docs

    ohh so seems like it's better to create a custom hook by wrapping member object in my case, I have many situations where useEffect depends on [member]
     
    Appreciate the answer
    0

Please sign in to leave a comment.