How to pass Moralis data to react router based on URL

Moralis General
#1

Hi

I hope you all are well.

I am hoping to create publicly accessible ā€œprofileā€ pages consisting of a username and profile picture from data stored in a Moralis database.

I am using react with react router, letā€™s say I have set my routes path as /page/:username. When you type in page/moralisusername. I want to access and display the username and profile picture on the page. For example I want to show the image stored at user.attributes.profilePic._url for that particular user.

I would appreciate it if you could point me in the right direction.

Thank you.

#2

what part doesnā€™t work? you can read user info from a cloud function using master key

1 Like
#3

I donā€™t think react router has much to do with getting the data, but for get the data , as cryptokid says will work. Hereā€™s a minimal typescript example (not tested)

const checkThisTransfer = async (
    userName: string   
    ) => {
   // Cuser is a table that you define in the backend with fields `username`  and `photourl` (at least)
    const Cuser = Moralis.Object.extend("Cuser");
    const query = new Moralis.Query(Cuser);
    query.equalTo("username", userName);
    const results = await query.find();
        let userInfo = results[0];
          //console.log(userInfo);
        let picurl =  userInfo.get("photourl");
    }

Donā€™t kill me if I made a mistake just wanted to share something that worked for me .

2 Likes
#4

Thanks for the replies. I came right using a combination of your help that pointed me in the right direction.

I was laying in bed at 3AM pondering cloud functions. Then I dreamt about it and spent a few hours this morning struggling with useMoralisCloudFunction();

I was running one below the other. That issue as discussed here. Has to do with Javascript object destructuring. Unlike arrays the destructured variables canā€™t just be called anything so adding { data2, error2, isLoading2 } for the second one wonā€™t work as it has to match with the property names of the object unless of course you do what LocoTheDev suggested to give it different names (e.g. data: data2 ) or split the component in two as the OP in that thread decided to do.

1 Like