Almost EVERYONE who tried headless systems said they saw benefits. Download the state of CMS now!

Storyblok now on AWS Marketplace: Read more

O’Reilly Report: Decoupled Applications and Composable Web Architectures - Download Now

Empower your teams & get a 582% ROI: See Storyblok's CMS in action

Skip to main content
  • Section titled GraphQL speed improvements GraphQL speed improvements

    Changes in: gapi

    Storyblok's GraphQL api just got huge performance improvements and the possibility to use automatic persisted queries which will save you a lot of traffic.

    Section titled Improvements: Improvements:

    Section titled Usage example in Next.js of persisted queries: Usage example in Next.js of persisted queries:

    To use automatic persisted queries you need to add the library apollo-link-persited-queries like done in the Next.js example https://github.com/storyblok/nextjs-persisted-query-graphql-example.

    import { ApolloClient } from 'apollo-client'
    import { InMemoryCache } from 'apollo-cache-inmemory'
    import withApollo from 'next-with-apollo'
    import { createHttpLink } from 'apollo-link-http'
    import { createPersistedQueryLink } from 'apollo-link-persisted-queries'
    import fetch from 'isomorphic-unfetch'
    
    const GRAPHQL_URL = 'https://gapi.storyblok.com/v1/api'
    
    const link = createPersistedQueryLink({useGETForHashedQueries: true}).concat(createHttpLink({
      fetch, // Switches between unfetch & node-fetch for client & server.
      uri: GRAPHQL_URL,
      headers: {
        'Token': 'YOUR_TOKEN',
        'Version': 'published',
        'Accept': 'application/json'
      }
    }))
    
    export default withApollo(
      ({ initialState }) =>
        new ApolloClient({
          link: link,
          cache: new InMemoryCache()
            //  rehydrate the cache using the initial data passed from the server:
            .restore(initialState || {})
        })
    )