Usage of the Solid React SDK v2 - docs examples

Build a Solid App Instructions
1

Hello,

I was trying to run the examples of usage from the documentation and I can’t make them work, more specifically the Reading and Writing Data part. The CombinedDataProvider with a Text inside of it do not render anything in the end.

Here is my code:

import { 
  SessionProvider, 
  LoginButton, 
  useSession, 
  CombinedDataProvider, 
  Text 
} from "@inrupt/solid-ui-react";

function App() {
  return (
    <SessionProvider sessionId="some-id">
      <LoginButton
        oidcIssuer="https://solidcommunity.net/"
        redirectUrl={window.location.href}
      />
      <Name></Name>
    </SessionProvider>
  )
}

function Name() {
  const { session, sessionRequestInProgress } = useSession();
  if (sessionRequestInProgress) return "Loading...";

  const webId = session.info.webId;

  <CombinedDataProvider datasetUrl={webId} thingUrl={webId}>
    <Text propertyUrl="http://www.w3.org/2006/vcard/ns#fn" />
  </CombinedDataProvider>
}

export default App

Am I doing something wrong or is the documentation outdated?

2

I expect that the WebID you’re connected with does not have a http://www.w3.org/2006/vcard/ns#fn listed - my solidcommunity.net WebID doesn’t have it either. It does have a http://xmlns.com/foaf/0.1/name listed, so you could try that instead for the propertyUrl?

3

Thanks, but my profile does have the needed property. There must be an issue elsewhere.

When I try to log in to the demo application, it works and it is able to read my profile. I saw here and also in the demo’s repository that the Text’s property has other name than the one in the documentation. Switching it from propertyUrl to property fixes one of the errors that VS code shows.

I also get this error:

image
image1347×635 46.3 KB

I don’t know what I should change datasetUrl to. I will play around with the provided hooks and see if I can get it to work.

4

Looking at the type definitions and the errors you show, the problem is that webId might be undefined (i.e. its type is string | undefined) in your code, whereas CombinedDataProvider expects datasetUrl to be a string. You can fix that by changing this line:

  if (sessionRequestInProgress) return "Loading...";

to

   if (sessionRequestInProgress || typeof session.info.webId === "undefined") return "Loading...";

Unfortunately, that probably won’t fix your issue, and I’m not really familiar with @inrupt/solid-ui-react, so I can’t really help you there - but the fact that the prop is indeed called property rather than propertyUrl leads me to think that the documentation is indeed outdated. Maybe report a bug? (And it could be helpful to also share the WebID you’re trying it with, if you’re willing to share.)

5

The WebID is returned by a WebID provider. I am able to display it when someone logs in. In the developer tools I can see that a card is returned which is the whole profile. I do not get any errors in the console.

I will create a new issue and report what I have experiened and maybe someone will be able to explain what the current state of the SDK and the documentation is.

6

Hi, I work on the SDKs at Inrupt, and whilst the components based way of interacting with RDF datasets does exist, I personally would not recommend using this pattern, and instead recommend taking the dataset and transforming it into the shapes you need for your application to function, that way you centralise your interactions with the dataset in known ways, rather than scattering access to the dataset throughout your application codebase.

(In this case, I’m not sure what the error is, but if you are on the latest SDK, could you try downgrading to a previous release? I know we recently updated some typescript stuff, and whilst this shouldn’t have caused a regression, there is a potential for that in this particular code)

1 Like