graphql-svelte

Alternate apollo-graphql for Svelte and other native js

setup

$ npm i -d graphql-svelte <br>
$ yarn add --dev graphql-svelte

main config

import { svqlConfig } from "graphql-svelte";

const client = svqlConfig.getClient(url, wsUrl)
svqlConfig.setHeaders({ 'content-type': 'application/json' })

// Graphql Error

client.on('cache', ({ cacheKey, cacheValue: { fetchError, httpError, parseError, graphQLErrors } }) => {
    console.log(fetchError)
})

// WS Error

client.sub.onError(error => {
    console.log(error)
})

export {
    query: client.query,
    mutate: client.mutate,
    subsciption: client.subscription
}
```

how to use for svelte

Layout.svelte

<script>

import { SvGraphQL,svqlConfig } from "graphql-svelte";

// if you have fluent based graphql quert generator for hasura
import Hasura from 'hasura-orm'
export function hasura(schema) {
    Hasura['provider'] = client
    const orm = new Hasura(schema)
    orm['provider'] = client
    return orm
}

const client = svqlConfig.getClient(url,wsUrl)
svqlConfig.setHeaders({ 'content-type': 'application/json' })
// Graphql Error
client.on('cache',({ cacheKey, cacheValue: { fetchError, httpError, parseError, graphQLErrors } }) => {
  console.log(fetchError)
})
// WS Error
client.sub.onError(error => {
    console.log(error)
})
</script>

<SvGraphQL config={client} {hasura}>
  <slot></slot>
</SvGraphQL>

Index

Classes

Interfaces

Type aliases

Variables

Functions

Object literals

_headers

Type aliases

GraphQLCache

GraphQLCache: Record<GraphQLCacheKey, GraphQLCacheValue>

A [GraphQL cache]{@link GraphQL#cache} map of GraphQL operation results.

see: GraphQL constructor accepts this type in options.cache.
see: [GraphQL instance property cache]{@link GraphQL#cache} is this type.

GraphQLCacheKey

GraphQLCacheKey: string

A GraphQL cache key, derived from a hash of the fetch options of the GraphQL operation that populated the value.

GraphQLCacheValue

GraphQLCacheValue: { data?: Object; fetchError?: undefined | string; graphQLErrors?: Array<Object>; httpError?: HttpError; parseError?: undefined | string }

JSON serializable GraphQL operation result that includes errors and data.

Type declaration

Optional data?: Object
Optional fetchError?: undefined | string
Optional graphQLErrors?: Array<Object>
Optional httpError?: HttpError
Optional parseError?: undefined | string

GraphQLFetchOptions

GraphQLFetchOptions: { body?: BodyInit | null; cache?: RequestCache; credentials?: RequestCredentials; headers?: HeadersInit; integrity?: undefined | string; keepalive?: undefined | false | true; method?: undefined | string; mode?: RequestMode; redirect?: RequestRedirect; referrer?: undefined | string; referrerPolicy?: ReferrerPolicy; signal?: AbortSignal | null; url: string; window?: any }

GraphQL API URL and polyfillable fetch options. The url property gets extracted and the rest are used as fetch options.

kind: typedef
name: GraphQLFetchOptions
prop: {string} url GraphQL API URL.
prop: {string|FormData} body HTTP request body.
prop: {object} headers HTTP request headers.
prop: {string} [credentials] Authentication credentials mode.
see: [GraphQLFetchOptionsOverride functions]{@link GraphQLFetchOptionsOverride} accept this type.

Type declaration

Optional body?: BodyInit | null

A BodyInit object or null to set request's body.
Optional cache?: RequestCache

A string indicating how the request will interact with the browser's cache to set request's cache.
Optional credentials?: RequestCredentials

A string indicating whether credentials will be sent with the request always, never, or only when sent to a same-origin URL. Sets request's credentials.
Optional headers?: HeadersInit

A Headers object, an object literal, or an array of two-item arrays to set request's headers.
Optional integrity?: undefined | string

A cryptographic hash of the resource to be fetched by request. Sets request's integrity.
Optional keepalive?: undefined | false | true

A boolean to set request's keepalive.
Optional method?: undefined | string

A string to set request's method.
Optional mode?: RequestMode

A string to indicate whether the request will use CORS, or will be restricted to same-origin URLs. Sets request's mode.
Optional redirect?: RequestRedirect

A string indicating whether request follows redirects, results in an error upon encountering a redirect, or returns the redirect (in an opaque fashion). Sets request's redirect.
Optional referrer?: undefined | string

A string whose value is a same-origin URL, "about:client", or the empty string, to set request's referrer.
Optional referrerPolicy?: ReferrerPolicy

A referrer policy to set request's referrerPolicy.
Optional signal?: AbortSignal | null

An AbortSignal to set request's signal.
url: string
Optional window?: any

Can only be null. Used to disassociate request from any Window.

Variables

Const WS_TIMEOUT

WS_TIMEOUT: 30000 = 30000

Let client

client: { graphql: GraphQL; sub: any; mutate: any; query: any; subscription: any }

Type declaration

graphql: GraphQL
sub: any
mutate: function
- mutate(__namedParameters: { cache: undefined | false | true; key: undefined | ((key: any) => any); query: string; variables: undefined | object }): Promise<any>
- - Defined in src/svqlConfig.ts:16
  Parameters
  - __namedParameters: { cache: undefined | false | true; key: undefined | ((key: any) => any); query: string; variables: undefined | object }
    - cache: undefined | false | true
    - key: undefined | ((key: any) => any)
    - query: string
    - variables: undefined | object
  Returns Promise<any>
query: function
- query(__namedParameters: { cache: undefined | false | true; key: undefined | ((key: any) => any); query: string; variables: undefined | object }): Promise<any>
- - Defined in src/svqlConfig.ts:17
  Parameters
  - __namedParameters: { cache: undefined | false | true; key: undefined | ((key: any) => any); query: string; variables: undefined | object }
    - cache: undefined | false | true
    - key: undefined | ((key: any) => any)
    - query: string
    - variables: undefined | object
  Returns Promise<any>
subscription: function
- subscription(__namedParameters: { query: string; variables: undefined | object }): { subscribe: any }
- - Defined in src/svqlConfig.ts:9
  Parameters
  - __namedParameters: { query: string; variables: undefined | object }
    - query: string
    - variables: undefined | object
  Returns { subscribe: any }
  - [x: number]: () => any
    - - (): any
      - Returns any
  - subscribe: function
    - subscribe(observerOrNext?: any, onError?: any, onComplete?: any): { unsubscribe: () => void }
    - Defined in src/svqlConfig.ts:11
      Parameters
      - Optional observerOrNext: any
      - Optional onError: any
      - Optional onComplete: any
      Returns { unsubscribe: () => void }
      - unsubscribe: () => void
        
        (): void
        
        Returns void

emit

emit: emit

off

off: off

on

on: on

Functions

SubscribeQL

SubscribeQL(url: any, options: WSOptions): SubscriptionClient

- Defined in src/SubscribeQL.ts:574
Parameters
- url: any
- options: WSOptions
Returns SubscriptionClient

getClient

getClient(__namedParameters: { graphqlOptions: { cache?: Record<GraphQLCacheKey, GraphQLCacheValue>; cacheWrapper?: Function }; url: string; wsOptions: WSOptions; wsUrl: undefined | string }): { graphql: GraphQL; sub: any; mutate: any; query: any; subscription: any }

- Defined in src/svqlConfig.ts:48
- Gets default client {@link svqlConfig} for a [GraphQL Client]{@link svqlConfig}.
Parameters
- __namedParameters: { graphqlOptions: { cache?: Record<GraphQLCacheKey, GraphQLCacheValue>; cacheWrapper?: Function }; url: string; wsOptions: WSOptions; wsUrl: undefined | string }
  - graphqlOptions: { cache?: Record<GraphQLCacheKey, GraphQLCacheValue>; cacheWrapper?: Function }
    - Optional cache?: Record<GraphQLCacheKey, GraphQLCacheValue>
    - Optional cacheWrapper?: Function
  - url: string
  - wsOptions: WSOptions
  - wsUrl: undefined | string
Returns { graphql: GraphQL; sub: any; mutate: any; query: any; subscription: any }
- graphql: GraphQL
- sub: any
- mutate: function
  - mutate(__namedParameters: { cache: undefined | false | true; key: undefined | ((key: any) => any); query: string; variables: undefined | object }): Promise<any>
  - - Defined in src/svqlConfig.ts:16
    Parameters
    - __namedParameters: { cache: undefined | false | true; key: undefined | ((key: any) => any); query: string; variables: undefined | object }
      - cache: undefined | false | true
      - key: undefined | ((key: any) => any)
      - query: string
      - variables: undefined | object
    Returns Promise<any>
- query: function
  - query(__namedParameters: { cache: undefined | false | true; key: undefined | ((key: any) => any); query: string; variables: undefined | object }): Promise<any>
  - - Defined in src/svqlConfig.ts:17
    Parameters
    - __namedParameters: { cache: undefined | false | true; key: undefined | ((key: any) => any); query: string; variables: undefined | object }
      - cache: undefined | false | true
      - key: undefined | ((key: any) => any)
      - query: string
      - variables: undefined | object
    Returns Promise<any>
- subscription: function
  - subscription(__namedParameters: { query: string; variables: undefined | object }): { subscribe: any }
  - - Defined in src/svqlConfig.ts:9
    Parameters
    - __namedParameters: { query: string; variables: undefined | object }
      - query: string
      - variables: undefined | object
    Returns { subscribe: any }
    - [x: number]: () => any
      - (): any
        
        Returns any
    - subscribe: function
      - subscribe(observerOrNext?: any, onError?: any, onComplete?: any): { unsubscribe: () => void }
      - Defined in src/svqlConfig.ts:11
        
        Parameters
        
        Optional observerOrNext: any
        
        Optional onError: any
        
        Optional onComplete: any
        
        Returns { unsubscribe: () => void }
        
        unsubscribe: () => void
        
        (): void
        
        Returns void

headers

headers(): { content-type: string }

- Defined in src/svqlConfig.ts:27
Returns { content-type: string }
- content-type: string

isObject

isObject(value: null): boolean

- Defined in src/SubscribeQL.ts:13
Parameters
- value: null
Returns boolean

isString

isString(value: any): boolean

- Defined in src/SubscribeQL.ts:10
Parameters
- value: any
Returns boolean

reportCacheErrors

reportCacheErrors(__namedParameters: { cacheKey: any; cacheValue: { fetchError: any; graphQLErrors: any; httpError: any; parseError: any } }): void

- Defined in src/reportCacheErrors.ts:19
A GraphQL cache event handler that reports fetch, HTTP, parse and GraphQL errors via console.log(). In a browser environment the grouped error details are expandable.
kind

function

name

reportCacheErrors

example
`GraphQL` initialized to report cache errors. ```js import { GraphQL, reportCacheErrors } from 'graphql-react'
const graphql = new GraphQL() graphql.on('cache', reportCacheErrors)
Parameters
- __namedParameters: { cacheKey: any; cacheValue: { fetchError: any; graphQLErrors: any; httpError: any; parseError: any } }
  - cacheKey: any
  - cacheValue: { fetchError: any; graphQLErrors: any; httpError: any; parseError: any }
    - fetchError: any
    - graphQLErrors: any
    - httpError: any
    - parseError: any
Returns void

setHeaders

setHeaders(headers: any): void

- Defined in src/svqlConfig.ts:23
Parameters
- headers: any
Returns void

Object literals

Let _headers

_headers: object

content-type

content-type: string = "application/json"

Generated using TypeDoc

graphql-svelte

setup

main config

how to use for svelte

Layout.svelte

Index

Classes

Interfaces

Type aliases

Variables

Functions

Object literals

Type aliases

GraphQLCache

GraphQLCacheKey

GraphQLCacheValue

Type declaration

Optional data?: Object

Optional fetchError?: undefined | string

Optional graphQLErrors?: Array<Object>

Optional httpError?: HttpError

Optional parseError?: undefined | string

GraphQLFetchOptions

Type declaration

Optional body?: BodyInit | null

Optional cache?: RequestCache

Optional credentials?: RequestCredentials

Optional headers?: HeadersInit

Optional integrity?: undefined | string

Optional keepalive?: undefined | false | true

Optional method?: undefined | string

Optional mode?: RequestMode

Optional redirect?: RequestRedirect

Optional referrer?: undefined | string

Optional referrerPolicy?: ReferrerPolicy

Optional signal?: AbortSignal | null

url: string

Optional window?: any

Variables

Const WS_TIMEOUT

Let client

Type declaration

graphql: GraphQL

sub: any

mutate: function

Parameters

__namedParameters: { cache: undefined | false | true; key: undefined | ((key: any) => any); query: string; variables: undefined | object }

cache: undefined | false | true

key: undefined | ((key: any) => any)

query: string

variables: undefined | object

Returns Promise<any>

query: function

Parameters

__namedParameters: { cache: undefined | false | true; key: undefined | ((key: any) => any); query: string; variables: undefined | object }

cache: undefined | false | true

key: undefined | ((key: any) => any)

query: string

variables: undefined | object

Returns Promise<any>

subscription: function

Parameters

__namedParameters: { query: string; variables: undefined | object }

query: string

variables: undefined | object

Returns { subscribe: any }

[x: number]: () => any

Returns any

subscribe: function

Parameters

Optional observerOrNext: any

Optional onError: any

Optional onComplete: any

Returns { unsubscribe: () => void }

unsubscribe: () => void

Returns void

emit

off

on

Functions