solid-urql

URQL support for Solid JS projects.

Usage no npm install needed!

<script type="module">
  import solidUrql from 'https://cdn.skypack.dev/solid-urql';
</script>

README

Solid URQL

URQL support for Solid JS projects.

Installation

yarn add solid-urql @urql/core graphql
# or
npm i solid-urql @urql/core graphql

Usage

import { createClient, Provider } from 'solid-urql'

const client = createClient({
  url: 'http://localhost:8000/graphql',
})

const App = (props) => {
  return (
    <Provider value={client}>
      <TodoList />
    </Provider>
  )
}
import { Show } from 'solid-js'
import { createQuery } from 'solid-urql'

const TodosQuery = `
  query {
    todos {
      id
      title
    }
  }
`

const TodoList = (props) => {
  const [items, itemsState, reexecuteQuery] = createQuery({
    query: TodosQuery,
  })

  return (
    <Show when={!itemsState().fetching} fallback={<p>Loading...</p>}>
      <p>
        Items are:{' '}
        {items()
          .map((item) => item.title)
          .join(', ')}
      </p>
    </Show>
  )
}

Read more at the URQL Official Documentation.

Contributing 🙌

Contributions are more than welcome. If you see any changes fit, go ahead and open an issue or PR.


Any support is a huge motivation, thank you very much!

Buy Me A Coffee