Options
All
  • Public
  • Public/Protected
  • All
Menu

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

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>
    • 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>
    • 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 }
    • 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 }
        • 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

getClient

  • getClient(url: string, wsUrl?: undefined | string, wsOptions?: WSOptions): { graphql: GraphQL; sub: any; mutate: any; query: any; subscription: any }
    • Gets default client {@link svqlConfig} for a [GraphQL Client]{@link svqlConfig}.

    Parameters

    • url: string
    • Optional wsUrl: undefined | string
    • Default value wsOptions: WSOptions = {}

    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>
      • 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>
      • 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 }
      • 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 }
          • Parameters

            • Optional observerOrNext: any
            • Optional onError: any
            • Optional onComplete: any

            Returns { unsubscribe: () => void }

            • unsubscribe: () => void
                • (): void
                • Returns void

headers

  • headers(): { content-type: string }

isObject

  • isObject(value: null): boolean

isString

  • isString(value: any): boolean

reportCacheErrors

  • reportCacheErrors(__namedParameters: { cacheKey: any; cacheValue: { fetchError: any; graphQLErrors: any; httpError: any; parseError: any } }): void
  • 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

Object literals

Let _headers

_headers: object

content-type

content-type: string = "application/json"

Legend

  • Constructor
  • Property
  • Method
  • Property

Generated using TypeDoc