How to pass Moralis data to react router based on URL

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.

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

1 Like

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

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