1.0.0-beta.19 • Published 2 years ago

swrlit v1.0.0-beta.19

Weekly downloads
30
License
MIT
Repository
github
Last release
2 years ago

swrlit

swirl the web in your cup

what's this?

swrlit combines the power of useSWR with magic of Inrupt's lit-podsolid-client to create the swirliest Solid data access library out there

how do I use it?

see the examples below or read the docs

you can get support by filing an issue

install in an existing project

npm install swrlit

get data from a pod

import { useThing } from "swrlit"
import {
  getUrlAll, getUrl, getStringNoLocale
} from '@inrupt/solid-client'
import { vcard, foaf } from 'rdf-namespaces'

function Profile({webId}){
  const { thing: profile } = useThing(webId)
  const profileImage = profile && getUrl(profile, vcard.hasPhoto)
  const name = profile && getStringNoLocale(profile, foaf.name)
  return (
  <div>
    <h1>{name}</h1>
    <img src={profileImage} alt={name}/>
  </div>
  )
}

create data in a pod

import { useWebId, useContainer, useProfile, useEnsured, AuthenticationProvider } from "swrlit"
import {
  createThing, setThing, addUrl, setStringNoLocale,
  saveSolidDatasetInContainer, createSolidDataset
} from '@itme/solid-client'
import { WS } from '@inrupt/vocab-solid-common'

export function useStorageContainer(webId) {
  const { profile } = useProfile(webId)
  return profile && getUrl(profile, WS.storage)
}

export function useTimelogContainerUri(webId, path = 'public') {
  const storageContainer = useStorageContainer(webId)
  return useEnsured(storageContainer && `${storageContainer}${path}/timelogs/`)
}

function TimeLogCreator(){
  const myWebId = useWebId()
  const timelogContainerUri = useTimelogContainerUri(myWebId, 'private')
  const { resources: timelogs, mutate: mutateTimelogs } = useContainer(timelogContainerUri)

  const createTimelog = async ({ name = "Time Tracker"}) => {
    var log = createThing({ name: 'log' });
    log = addUrl(log, RDF.type, TIMELOG.Log)
    log = setStringNoLocale(log, RDFS.label, name)

    var dataset = createSolidDataset()
    dataset = setThing(dataset, log)

    await saveSolidDatasetInContainer(timelogContainerUri, dataset, { slugSuggestion: name })
    mutateTimelogs()
  }

  return (
    <div>
      <button onClick={createTimelog}>Create Timelog</button>
    </div>
  )
}

function App(){
  return (
    <AuthenticationProvider>
      <TimeLogCreator/>
    </AuthenticationProvider>
  )
}

See

https://github.com/itme/swrlit-example

https://github.com/itme/swrlit-timetracker

for functioning examples.

1.0.0-beta.19

2 years ago

1.0.0-beta.17

2 years ago

1.0.0-beta.18

2 years ago

1.0.0-beta.15

2 years ago

1.0.0-beta.16

2 years ago

1.0.0-beta.11

3 years ago

1.0.0-beta.12

3 years ago

1.0.0-beta.10

3 years ago

1.0.0-beta.9

3 years ago

1.0.0-beta.13

3 years ago

1.0.0-beta.14

3 years ago

1.0.0-beta.6

3 years ago

1.0.0-beta.7

3 years ago

1.0.0-beta.3

3 years ago

1.0.0-beta.2

4 years ago

1.0.0-beta.0

4 years ago

1.0.0-beta.1

4 years ago

0.15.0

4 years ago

0.12.0

4 years ago

0.13.0

4 years ago

0.14.0

4 years ago

0.11.0

4 years ago

0.10.0

4 years ago

0.9.0

4 years ago

0.8.0

4 years ago

0.7.0

4 years ago

0.6.0

4 years ago

0.5.0

4 years ago

0.4.0

4 years ago

0.3.0

5 years ago

0.2.0

5 years ago

0.1.8

5 years ago

0.1.7

5 years ago

0.1.6

5 years ago

0.1.5

5 years ago

0.1.4

5 years ago

0.1.3

5 years ago

0.1.2

5 years ago

0.1.0

5 years ago

0.1.1

5 years ago

0.0.11

5 years ago

0.0.10

5 years ago

0.0.9

5 years ago

0.0.8

5 years ago

0.0.5

5 years ago

0.0.4

5 years ago

0.0.7

5 years ago

0.0.6

5 years ago

0.0.3

5 years ago

0.0.2

5 years ago

0.0.1

5 years ago