Hi, I’m trying to make my first web app with solid…
I’m planning to make simple sns to share posts or chat.
I’ve read Documents in inrupt and tried solid/react profile-viewer.
But I’m still have no idea how to read/upload other data.
Can I get some help?
1 Like
If you want to use react you can take a look at the solid react sdk. I haven’t used it myself, but I think it simplifies many things: https://inrupt.com/sdk
If you don’t want to use it, I would suggest you to use solid-auth-client which allows handling login and doing fetch requests (simliar to the one provided by the browser) or solid-file-client which is pretty much a wrapper of it. If you want to stay with solid-auth-client, you can take a look at the source code of solid-file-client or my filemanager to see it in use.
If you go with solid-file-client it should be pretty straightforward to use. I didn’t choose it because I didn’t like the way it handles errors and already pre-parses some values, but that is just my preference I guess.
If you want to use RDF for handling data, I guess rdflib.js would be a good fit, but I haven’t used it much yet. If you want to store some metadata I’d suggest you to use RDF.
And in general: Try to reuse existing standards and vocabularies as much as possible so other apps can work with the data you generate too 
If I missed something or you have any questions, feel free to ask for more details :))
3 Likes
Another great tool (and one the SDK uses) for handling data read/write is LDFlex. In my opinion it’s simpler to use than rdflib.js and is a lot less code. One thing is it abstracts away things like the insert/delete arrays and manually creating rdf statements so you can just do something like const var = await solid.data.user.firstName to get the current user’s first name (as an example).
4 Likes
@james.martin thanks for all your great work on react and Solid! You mention using LDFlex for writing data. Could you point me to some documentation or links to code examples on writing with LDFlex?
2 Likes
Sure! In the generator we use ldflex for both read and write. In the current version of the profile, you can see it in action here.
What’s going on there is we first fetch the field using ldflex that we want to update. The call node = data.user[key]; grabs the data and returns a proxy object into the node variable.
Next we can simply call await node.set(field.value); which does a couple things. If I remember right, it will first delete ALL existing values at that node, then will insert the new value. This was preferable to us than rdflib.js which needs you to maintain the state and deletes a value more surgically. If you want to insert a new value in an existing field you can use .add the same way, which will add a first (or second, third, etc.) value at that node.
There’s also a .delete and some other functions. The documentation hasn’t been updated for ldflex since they added write functionality, which is likely why it’s only about reading.
4 Likes
Great, just what I was looking for, thanks, works like a charm.
2 Likes
Awesome! In the interest of spreading knowledge, just in case you haven’t found your way there, there’s also the ldflex playground which can help craft queries and test it out without needing an app wrapper.
1 Like
Here’s a concise example:
async function run(){
const doc = solid.data['https://jeffz.solid.community/public/ldflex.ttl']
const dtype = solid.data[ 'http://schema.org/Document' ]
const about = 'http://schema.org/about'
await login()
// CREATE
await doc.type.add(dtype)
await doc[about].add("some thoughts")
// READ
show( await doc.type ) // expect: http://schema.org/Document
show( await doc[about] ) // expect: some thoughts
// UPDATE
await doc[about].set("thoughts change ...")
// DELETE
await doc.type.delete()
// READ
show( await doc.type ) // expect: undefined
show( await doc[about] ) // expect: thoughts change ...
}
``
4 Likes
Thank you for suggestion and solid-file-client is really helpful for me.
If I want to load profile(name, photo, friends) do I have to use other tools like rdflib.js?
Thanks but when I type
script src=“solid-auth-client.bundle.js”></script
script src=“solid-query-ldflex.bundle.js”></script
I get a MIME type mismatch error
You can use solid-file-client to replace your profile with a new version, though be careful, you could end up deleting your profile. You need query-ldflex or rdflib.js to do granular updates (e.g. just update your email). Your script tags would only work if you have both of those bundles in the same folder as your HTML page. I generally use CDN like this:
<script src="https://cdn.jsdelivr.net/npm/solid-auth-client@2.3.0/dist-lib/solid-auth-client.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@solid/query-ldflex@2.5.1/dist/solid-query-ldflex.bundle.js"></script>
5 Likes
Do you use any package managers or webpack or anything like that? Might be easier to npm install/import, that’s how we’ve been using it.
One common cause of the MIME type error you’re seeing is wrong file path - make sure that file exists and the path to it is correct in your application.
Hi sir i want to know how can i apply Access control and read those permissions using ldflex or solid-file -client .
Are you able to user the set() function to load a uri and not just a literal value?
Apparently it is possible with to work with acl files with ldflex, but not yet easy: https://github.com/solid/query-ldflex/issues/9#issuecomment-534729620
I’m currently writing a library which should make it really simple, but it’s not completely finished. The part for modifying and reading is pretty much done (solid-acl-parser), the part for fetching and updating the file on the pod is hopefully ready by the end of this week (solid-acl-utils).
If you want to do it now with solid-file-client, you will need to first get the url of the acl file (see here), then fetch it, parse it, modify it and then PUT it to the pod again. To do this you need CONTROL access to that resource. Sorry if that is not detailed enough, but I don’t have enough time to try everything out right now
2 Likes
ok SIR . i will try out that using solid-file-client. But kindly share that library you are writing after you complete it. I will also try out that one.
Another way to interact with ACLs is (not surprisingly, coming from me) the react SDK! We have actually made a library for working with ACLs that obfuscates all the tricky code from the dev and provides a simple interface. It is part of solid-react-components, so it (currently) requires that you are using React. Our long-term plan is to split some of the non-React specific functionality out into a framework-agnostic library but for now that’s where it lives.
The library itself can be found here.
You can see a demonstration of it in action here in the generator.
if (result) {
const permissions = [
{
agents: [opponent],
modes: [AccessControlList.MODES.READ, AccessControlList.MODES.WRITE]
}
];
const ACLFile = new AccessControlList(webId, documentPath);
await ACLFile.createACL(permissions);
}
You can see that we set up permissions where the agent is the user we want to give or remove access from, we have an array of modes we want to grant or remove, and then we simple initialize the library with my webId and the path to the resource I want to grant access to, and say createACL with the modes and agents.
Under the covers, it’s using n3.js because you’re right, ldflex doesn’t support ACL management yet.
4 Likes
Why didn’t I hear of this earlier? Guess that there will be three different (rather easy) ways to work with permissions then ^^
1 Like
Good question! I think SDK updates are released without a lot of fanfare. It was part of a MASSIVE update to the SDK last month or so. It includes common notifications, custom app inbox creation, a library to manage inboxes and notifications, ACL management (which we needed for sending notifications and so on), better error handling, and even more stuff.
We call it jokingly the Tic Tac Toe release, because there is a TTT game included in the generator now, as an example of data interaction with other users (in real time, even), and some good practices on how to read/write data in Solid, and creating files and so on.
3 Likes