trusktr / solid-apollo

Apollo client for solid

@merged/solid-apollo

A apollo client for solid

Disclaimer

This is still under heavy development and not really "final".

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] = createQuery(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())}
    </>
  )
}