Network Pipe Manufacturer

    @stnew/prismic-apollo-link
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.4 • Public • Published

    @stnew/prismic-apollo-client

    This package exports:

    • prismicApolloLink - An ApolloLink to connect to Prismic's GraphQL API

    prismicApolloLink

    Install dependencies:

    npm install @stnew/prismic-apollo-link @apollo/client prismic-javascript

    To connect the the GraphQL API, create a new ApolloClient and pass the link to the constructor:

    import { ApolloClient, InMemoryCache } from '@apollo/client'
    import { prismicApolloLink } from ' @stnew/prismic-apollo-link'
    
    export const prismicClient = new ApolloClient({
      cache: new InMemoryCache(),
      link: prismicApolloLink({
        repositoryName: 'your-repository-name',
        accessToken: 'YOUR_ACCESS_TOKEN',
      }),
    })

    Now you can use this client to query the API.

    import { prismicClient } from 'lib/prismic'
    
    const { data } = await prismicClient.query({
      query: gql`
        query($lang: String!, $uid: String!) {
          blog(lang: $lang, uid: $uid) {
            title
          }
        }
      `,
      variables: {
        uid: 'hello-world',
        lang: 'en-us',
      },
    })

    Handling Previews

    The prismicApolloLink takes a second argument which handles preview refs from Prismic. You can handle this case by making your client a function that accepts the preview data as an argument.

    export function prismicClient({ previewData }) {
      return new ApolloClient({
        cache: new InMemoryCache(),
        link: prismicApolloLink({
            repositoryName: 'your-repository-name',
            accessToken: 'YOUR_ACCESS_TOKEN',
          },
          previewData,
        ),
      })
    }

    And for example, in Next.js you would pass this data to the client.

    export async function getStaticProps({ params, preview = false, previewData }) {
      const response = await prismicClient({ previewData }).query({
        query: gql`
          query($lang: String!, $uid: String!) {
            blog(lang: $lang, uid: $uid) {
              title
            }
          }
        `,
        variables: {
          uid: params.uid,
          lang: 'en-us',
        },
      })
    
      const data = response.data.blog
    
      return {
        props: {
          data,
          preview,
        },
      }
    }

    Keywords

    none

    Install

    npm i @stnew/prismic-apollo-link

    DownloadsWeekly Downloads

    0

    Version

    1.2.4

    License

    MIT

    Unpacked Size

    10.4 kB

    Total Files

    10

    Last publish

    Collaborators

    • artofrawr
    • ryanhefner
    • cabe
    • returningsam