@merged/solid-apollo

A apollo client for solid

Disclaimer

This is a spare time project and I cannot guarantee that it is free of bugs. If you encouter any bugs, feel free to create an issue or (even better) a pull request.

Usage

Usage is very similar to the original apollo react implementation

createQuery, createLazyQuery, createMutation and createSubscription return a resource object.

Adding the ApolloProvider

The ApolloProvider should be placed early in your app

main.tsx

import { ApolloProvider, ApolloClient } from '@merged/solid-apollo'
import { render } from 'solid-js/web'
import { Suspense } from 'solid-js'
import { App } from './App'

const client = new ApolloClient({
  // your client config
})

render(() => (
  <ApolloProvider client={client}>
    <Suspense fallback={<>App is loading…</>}>
      <App />
    </Suspense>
  </ApolloProvider>
), document.getElementById("root"))

createQuery

createQuery can be typed and configured like useQuery.

createQuery creates a live query (ApolloClient.watchQuery) and will automatically update when the data gets updated.

import { gql, createQuery } from '@merged/solid-apollo'
import type { Component } from 'solid-js'

const QUERY = gql`
  ... your query
`

export const App: Component = () => {
  const data = createQuery(QUERY)
  
  return (
    <>
      <h1>Query Response:</h1>
      {JSON.stringify(data())}
    </>
  )
}

createLazyQuery

createLazyQuery can be typed and configured like useLazyQuery

import { gql, createLazyQuery } from '@merged/solid-apollo'
import type { Component } from 'solid-js'

const QUERY = gql`
  ... your query
`

export const App: Component = () => {
  const [execute, data] = createLazyQuery(QUERY)
  
  return (
    <>
      <h1>Query Response:</h1>
      {JSON.stringify(data())}
      <button onClick={() => execute()}>Execute</button>
    </>
  )
}

createMutation

createMutation can be typed and configured like useMutation

import { gql, createMutation } from '@merged/solid-apollo'
import type { Component } from 'solid-js'

const MUTATION = gql`
  ... your mutation
`

export const App: Component = () => {
  const [mutate, data] = createMutation(MUTATION)
  
  return (
    <>
      <h1>Mutation Response:</h1>
      {JSON.stringify(data())}
      <button onClick={() => mutate()}>Execute</button>
    </>
  )
}

createSubscription

createSubscription can be typed and configured like useSubscription

import { gql, createSubscription } from '@merged/solid-apollo'
import type { Component } from 'solid-js'

const SUBSCRIPTION = gql`
  ... your subscription
`

export const App: Component = () => {
  const data = createSubscription(SUBSCRIPTION)
  
  return (
    <>
      <h1>Subscription Data:</h1>
      {JSON.stringify(data())}
    </>
  )
}