urql

mizuki-urql-adapter

Custom urql exchange that uses Tauri's IPC system to resolve queries against a GraphQL endpoint.

Install

$ pnpm add mizuki-urql-adapter
# or
$ npm install mizuki-urql-adapter
# or
$ yarn add mizuki-urql-adapter

Usage

You need to register the plugin with Tauri first! Please see the top-level Readme for a full example.

Import and use the custom exchange to connect to the GraphQL endpoint exposed over IPC.

import { getExchanges } from 'mizuki-urql-adapter'
import { createClient, useQuery, useSubscription } from "@urql/preact"

const client = createClient({
  url: 'graphql', // not important but needed to releive some Typescript errors
  exchanges: [...getExchanges('myPlugin')]
})

const heroQuery = `
query {
  hero {
    name
  }
}
`

function Hero() {
  const [result, reexecuteQuery] = useQuery({
    query: heroQuery
  })

  const {data, fetching, error} = result

  if (fetching) return <p>Loading...</p>
  if (error) return <p>Oh no... {error.message}</p>

  return <p>The hero is {data.hero.name}</p>
}

const newMessages = `
  subscription MessageSub {
    helloWorld
  }
`

function handleSubscription(messages = [], response) {
  return [response.helloWorld, ...messages]
}

function TestSubscription() {
  const [res] = useSubscription({query: newMessages}, handleSubscription)

  if (!res.data) {
    return <p>No new messages</p>
  }

  return <p>{res.data}</p>
}

License

MIT © Tony Mushah