How can my app handle data from a Solid pod?


#1

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?


#2

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 :slight_smile:

If I missed something or you have any questions, feel free to ask for more details :))


#3

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

@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?


#5

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.


#6

Great, just what I was looking for, thanks, works like a charm.


#7

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.


#8

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 ...
}
``

Is there a timeline for adding write functionality to the ld-flex library
#9

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?


#10

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


#11

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>

#12

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.