birkir / gatsby-source-prismic-graphql Goto Github PK

View Code? Open in Web Editor NEW

138.0 138.0 75.0 9.68 MB

Gatsby source plugin for Prismic GraphQL

License: MIT License

TypeScript 100.00%

gatsby graphql preview prismic

gatsby-source-prismic-graphql's Issues

StaticQuery preview support

Hi and thanks again for all the work with this library!

Is it possible to enable preview on a StaticQuery somehow? I tried wrapping it in withPreview() manually but it didn't seem to work.

Thanks!

Error warning regarding persisting state function

Error appears in console on gatsby develop every 30 seconds or so and reads:

warning Error persisting state: function () {
    return (0, _utils.PrismicLink)({
      uri: "https://".concat(options.repositoryName, ".prism...<omitted>... } could not be cloned.

Versions in use:

gatsby-source-prismic-graphql - 3.1.3
gatsby - 2.3.34

Happy to provide any other information needed

UID param not passed into the template page query?

Hi! I'm facing issues when configuring the plugin to generate pages with templates. All seems to work except that the uid variable is not present in the page query, resulting in an empty edges array. Here's the gatsby-config plugin section:

  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-typescript`,
    {
      resolve: 'gatsby-source-prismic-graphql',
      options: {
        repositoryName: 'foobar',
        accessToken:
          'bazquux',
        lang: '*',
        pages: [{
          type: "Seo_page",
          match: "/pages/:uid",
          path: "/page",
          component: require.resolve("./src/templates/seo-page.tsx")
        }]
      },
    },
  ],

The data returned:

 "data": {
  "prismic": {
   "allSeo_pages": {
    "edges": []
   }
  }

However, when I do a similar thing via gatsby-node, everything works without a hitch:

  const { createPage } = actions;

  const prismicSeoPages = await graphql(`
          {
            prismic {
              allSeo_pages {
                edges {
                  node {
                    _meta {
                      uid
                    }
                  }
                }
              }
            }
          }
        `)


  prismicSeoPages.data.prismic.allSeo_pages.edges.forEach((edge: any) => {
    const node: any = edge.node;
    createPage({
      path: `/pages/${node._meta.uid}`,
      component: path.resolve(`./src/templates/seo-page.tsx`),
      context: {
        // Data passed to context is available
        // in page queries as GraphQL variables.
        uid: node._meta.uid,
      },
    });
  });

Any ideas on what the problem might be?

EDIT Here's the template page query:

export const query = graphql`
  query SeoPageQuery($uid: String) {
    prismic {
      allSeo_pages(uid: $uid) {
        edges {
          node {
            admin_page_title
            navigationStyle
            footerStyle
            content: content {
              __typename
            }
          }
        }
      }
    }
  }
`;

EDIT 2 package versions

    "gatsby": "^2.0.19",
     //   version "2.10.0"
    "gatsby-source-prismic-graphql": "^3.2.0",
     //   version "3.2.0"

Changes in Prismic data structures don't populate?

Hello! Thank you for this great plugin. I am relatively new to GraphQL, Gatsby and Prismic, but excited about what I'm learning.

One issue I've encountered is that when I am developing in Gatsby using this plugin and I change my types or data structure in Prismic, I am not able to immediately use the new properties or types in Gatsby. It seems the GraphQL schema does not sync? Or perhaps its on the Prismic side?

I appreciate any clarification you can provide!

Best,
Phil

[Question] Custom match variable

Sorry if this is in the docs. I tried to look for it but couldn't find it.

I have a custom type, that is Article, but want to publish the route under different Authors.

{
  pages: [{
    type: 'Article',
    match: '/article/:author/:uid',
    path: '/article',
    component: require.resolve('./src/templates/article.js'),
  }],
}

Example generated urls

/article/christian/foo-bar
/article/christian/hello-world
/article/sakai/leet
/article/sakai/uber-hacker

Is this possible?

Better README documentation for :lang param

See: https://github.com/birkir/gatsby-source-prismic-graphql/blob/master/packages/gatsby-source-prismic-graphql/README.md#generated-pages

This shows how you can interpolate the uid. But I didn't know there was a second param for :lang until I started digging into the code.

I may knock this one out, but we could use better documentation around allowed URL params. (Seems like it's just :uid and :lang for now.)

414 (Request-URI Too Large)

Just ran into this problem with a longer page query. It seems the GraphQL GET request has a limitation on the query length in Prismic.

Could we send the query using POST instead? I noticed the Gatbsy graphql tool uses that to send the query and the same query works fine there.

My query as a reference below.

curl 'https://antlerco.prismic.io/graphql?query=query%20TeamPageQuery(%24filter%3A%20Boolean!%20%3D%20false%2C%20%24industryFilter%3A%20String%2C%20%24first%3A%20Int%20%3D%201%2C%20%24afterAdvisor%3A%20String)%20%7B%0A%20%20team_page(uid%3A%20%22team-page%22%2C%20lang%3A%20%22en-us%22)%20%7B%0A%20%20%20%20hero_title%0A%20%20%20%20introduction%0A%20%20%20%20body%20%7B%0A%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20...%20on%20Team_pageBodyAll_team_members%20%7B%0A%20%20%20%20%20%20%20%20type%0A%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20...%20on%20Team_pageBodyAdvisor_list%20%7B%0A%20%20%20%20%20%20%20%20type%0A%20%20%20%20%20%20%20%20fields%20%7B%0A%20%20%20%20%20%20%20%20%20%20featured_advisor%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20...%20on%20Advisor%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20_meta%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20id%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20name%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20title%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20company%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20headshot%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20industry%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20...%20on%20Industry_tag%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20_meta%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20id%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20uid%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20...%20on%20Team_pageBodyAdvisor_testimonials%20%7B%0A%20%20%20%20%20%20%20%20type%0A%20%20%20%20%20%20%20%20fields%20%7B%0A%20%20%20%20%20%20%20%20%20%20advisor%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20...%20on%20Advisor%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20_meta%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20id%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20name%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20title%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20company%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20headshot%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20industry%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20...%20on%20Industry_tag%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20_meta%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20id%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20uid%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20advisor_image%0A%20%20%20%20%20%20%20%20%20%20testimonial_text%0A%20%20%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20__typename%0A%20%20%7D%0A%20%20allLocations%20%7B%0A%20%20%20%20totalCount%0A%20%20%20%20pageInfo%20%7B%0A%20%20%20%20%20%20startCursor%0A%20%20%20%20%20%20endCursor%0A%20%20%20%20%20%20hasPreviousPage%0A%20%20%20%20%20%20hasNextPage%0A%20%20%20%20%20%20__typename%0A%20%20%20%20%7D%0A%20%20%20%20edges%20%7B%0A%20%20%20%20%20%20node%20%7B%0A%20%20%20%20%20%20%20%20_meta%20%7B%0A%20%20%20%20%20%20%20%20%20%20id%0A%20%20%20%20%20%20%20%20%20%20uid%0A%20%20%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20name%0A%20%20%20%20%20%20%20%20body%20%7B%0A%20%20%20%20%20%20%20%20%20%20...%20on%20LocationBodyTeam_grid%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20fields%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20team_member%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20...%20on%20Team_member%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20name%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20title%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20headshot%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20__typename%0A%20%20%20%20%7D%0A%20%20%20%20__typename%0A%20%20%7D%0A%20%20allIndustry_tags%20%7B%0A%20%20%20%20edges%20%7B%0A%20%20%20%20%20%20node%20%7B%0A%20%20%20%20%20%20%20%20name%0A%20%20%20%20%20%20%20%20_meta%20%7B%0A%20%20%20%20%20%20%20%20%20%20id%0A%20%20%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20__typename%0A%20%20%20%20%7D%0A%20%20%20%20__typename%0A%20%20%7D%0A%20%20allAdvisors(first%3A%20%24first%2C%20after%3A%20%24afterAdvisor)%20%40skip(if%3A%20%24filter)%20%7B%0A%20%20%20%20totalCount%0A%20%20%20%20pageInfo%20%7B%0A%20%20%20%20%20%20startCursor%0A%20%20%20%20%20%20endCursor%0A%20%20%20%20%20%20hasPreviousPage%0A%20%20%20%20%20%20hasNextPage%0A%20%20%20%20%20%20__typename%0A%20%20%20%20%7D%0A%20%20%20%20edges%20%7B%0A%20%20%20%20%20%20node%20%7B%0A%20%20%20%20%20%20%20%20_meta%20%7B%0A%20%20%20%20%20%20%20%20%20%20id%0A%20%20%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20name%0A%20%20%20%20%20%20%20%20industry%20%7B%0A%20%20%20%20%20%20%20%20%20%20...%20on%20Industry_tag%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20name%0A%20%20%20%20%20%20%20%20%20%20%20%20_meta%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20id%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20__typename%0A%20%20%20%20%7D%0A%20%20%20%20__typename%0A%20%20%7D%0A%20%20filteredAdvisors%3A%20allAdvisors(first%3A%20%24first%2C%20after%3A%20%24afterAdvisor%2C%20where%3A%20%7Bindustry%3A%20%24industryFilter%7D)%20%40include(if%3A%20%24filter)%20%7B%0A%20%20%20%20totalCount%0A%20%20%20%20pageInfo%20%7B%0A%20%20%20%20%20%20startCursor%0A%20%20%20%20%20%20endCursor%0A%20%20%20%20%20%20hasPreviousPage%0A%20%20%20%20%20%20hasNextPage%0A%20%20%20%20%20%20__typename%0A%20%20%20%20%7D%0A%20%20%20%20edges%20%7B%0A%20%20%20%20%20%20node%20%7B%0A%20%20%20%20%20%20%20%20_meta%20%7B%0A%20%20%20%20%20%20%20%20%20%20id%0A%20%20%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20name%0A%20%20%20%20%20%20%20%20__typename%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20__typename%0A%20%20%20%20%7D%0A%20%20%20%20__typename%0A%20%20%7D%0A%7D%0A&operationName=TeamPageQuery&variables=%7B%22filter%22%3Afalse%2C%22first%22%3A2%2C%22afterAdvisor%22%3A%22YXJyYXljb25uZWN0aW9uOjA%3D%22%7D' -X OPTIONS -H 'Access-Control-Request-Method: GET' -H 'Origin: http://localhost:8000' -H 'Referer: http://localhost:8000/team' -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36' -H 'Access-Control-Request-Headers: content-type,prismic-ref' --compressed

Lots of whitespace in there but, even if that could be stripped out, it doesn't feel good to have to worry about query lengths.

I guess Fragments support #10 would help reduce the size, but that is also not fixing the real problem.

gatsby-plugin-sharp support?

A quick question while waiting for graphql support in my repo... do you plan on adding gatsby-plugin-sharp support or is there some hurdle that prevents it? Or could you give some pointers on how to add it?

bump gatsby-source-graphql

Gatsby build and develop pushes this warning on each page

Calling "createPageDependency" directly from actions in deprecated. Use "createPageDependency" from "gatsby/dist/redux/actions/add-page-dependency".

This warning is due to gatsby-source-graphql. Please upgrade to min 2.0.19 https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-graphql/CHANGELOG.md#2019-2019-06-10

fragment preview support

Is there a recommended way of defining GraphQL fragments so that the Apollo client knows about them?

Currently when I defined a fragment in a component like this:

export const query = graphql`
  fragment SiteSettings on PRISMIC_Site_settings {
    ...
  }
`

The preview throws this error:

index.js:2177 Failed to fetch preview Error: Network error: Response not successful: Received status code 500
    at new ApolloError (bundle.esm.js:60)

Response:

{"message":"Query does not pass validation. Violations:\n\nUnknown fragment 'SiteSettings'. (line 30, column 5):\n    ...SiteSettings\n    ^"}

So it seems as if the fragment is unknown at this point.

Sorry for the storm of new issues. We really hope to use this plugin on a project to enable the preview functionality. I'm reporting what I find and hope it helps someone in the future :)

Previews failing with 500 error

Hello, Previews have been working great with this plugin, but now they are no longer working for our team. I get a 500 error on the fetch to get the preview, a notice that it has been blocked by CORS policy. We haven't updated anything recently, and it has been working fine with Gatsby and Prismic. Any ideas?

GET ... 500 (Internal Server Error)

Access to fetch at 'https://xxxx.prismic.io/graphql?query=...from origin 'http://localhost:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Error: Network error: Failed to fetch
    at new ApolloError

Error on build

First time looking at this source plugin, seem to be getting this error on build

 ERROR #11321  PLUGIN

"gatsby-source-prismic-graphql" threw an error while running the sourceNodes lifecycle:

The "options.agent" property must be one of type Agent-like Object, undefined, or false. Received type function

Steps to reproduce:

cd /examples/static-query
npm install
npm run develop

thanks!

Updating from 2.2.0 -> 3.0.2

Hey again,

I tried updating to the latest version, but gatsby develop throws:

error Plugin gatsby-source-prismic-graphql returned an error

SyntaxError: Unexpected token, expected "," (206:39)

index.js:3831 Object.raise
[Website]/[@babel]/parser/lib/index.js:3831:17
index.js:5143 Object.unexpected
[Website]/[@babel]/parser/lib/index.js:5143:16
index.js:5135 Object.expect
[Website]/[@babel]/parser/lib/index.js:5135:28
index.js:6419 Object.parseParenAndDistinguishExpression
[Website]/[@babel]/parser/lib/index.js:6419:14
index.js:2670 Object.parseParenAndDistinguishExpression
[Website]/[@babel]/parser/lib/index.js:2670:18
index.js:6215 Object.parseExprAtom
[Website]/[@babel]/parser/lib/index.js:6215:21
index.js:3552 Object.parseExprAtom
[Website]/[@babel]/parser/lib/index.js:3552:20
index.js:5862 Object.parseExprSubscripts
[Website]/[@babel]/parser/lib/index.js:5862:23
index.js:5842 Object.parseMaybeUnary
[Website]/[@babel]/parser/lib/index.js:5842:21
index.js:5802 Object.parseExprOpBaseRightExpr
[Website]/[@babel]/parser/lib/index.js:5802:34
index.js:5795 Object.parseExprOpRightExpr
[Website]/[@babel]/parser/lib/index.js:5795:21
index.js:5774 Object.parseExprOp
[Website]/[@babel]/parser/lib/index.js:5774:27
index.js:5739 Object.parseExprOps
[Website]/[@babel]/parser/lib/index.js:5739:17
index.js:5702 Object.parseMaybeConditional
[Website]/[@babel]/parser/lib/index.js:5702:23
index.js:5647 Object.parseMaybeAssign
[Website]/[@babel]/parser/lib/index.js:5647:21
index.js:2621 Object.parseMaybeAssign
[Website]/[@babel]/parser/lib/index.js:2621:18

Do you have any advice on how to debug this further? Same error with both the latest gatsby version and 2.1.37

Preview not working with multi language

I'm unable to access the preview functionality for any of the languages.
I have set up the project similarly to the languages example.
My gatsby config:

{
  resolve: 'gatsby-source-prismic-graphql',
  options: {
    repositoryName: 'scenarex', 
    accessToken : `${process.env.API_KEY}`,
    defaultLang: 'en-ca', 
    langs: ['en-ca', 'fr-ca'],
    path: '/preview', 
    previews: true, 
    pages: [{ 
      type: 'Member',
      match: '/:lang/:uid', 
      path: '/member', 
      component: require.resolve('./src/templates/member.js'),
    },
    { 
      type: 'Home', 
      match: '/:lang', 
      path: '/home', 
      component: require.resolve('./src/templates/home.js'),
    },
  ],
  }
}

This is my home template:

import React from "react"
import { graphql, Link } from "gatsby";
import Layout from "../components/layout"
import { RichText } from 'prismic-reactjs'
import { linkResolver } from "../prismic/linkResolver";


const IndexPage = ({ data }) => {
  console.log(data);
  const doc = data.prismic.allHomes.edges.slice(0,1).pop();
  if(!doc) return null;
  let page = doc.node;
  let tools;
  let partners;
  for (let i=0; i<page.body.length; i++) {
    if (page.body[i].__typename === "PRISMIC_HomeBodyPartners") {
      partners = page.body[i]
    }
    else {
      tools = page.body[i]
    }
  }
  return (
  <Layout title={page.title[0].text} path="/">
    <main>
      <section className="masthead">
        {RichText.render(page.text)}
      </section>
      <section className="masthead upper-border">
        <div className="big">{RichText.render(page.partnerstitle)}</div>
        {partners.fields.length > 0 &&
        <div className="row flex-item ml-4 mb-4">
          {(partners.fields).map((partner,i) =>
            <div className="flex-item pl-2 p-0" key={i}>
              <a href={partner ? partner.link.url : ""}>
                <img className="grey" src={partner.img.url} style={{maxHeight: "60px"}} alt=""/>
              </a>
            </div>
          )}
        </div>
        }
      </section>
      <section className="masthead upper-border">
        <div className="big">{RichText.render(page.toolstitle)}</div>
        {tools.fields.length > 0 &&
        <div className="row flex-item">
          {(tools.fields).map((tool,i) =>
            <div className="md:w-3/12 w-full ml-0 pl-6 block md:flex-item" key={i}>
              <span className="fa-layers fa-fw fa-8x">
                <i className="fa fa-circle icon-background"></i>
                <i className={tool.icon[0].text} data-fa-transform="shrink-6"></i>
              </span>
              <h2><a href={tool.link.url}>{RichText.render(tool.name)}</a></h2>
              {RichText.render(tool.text1)}
            </div>
            )}
        </div>
        }
      </section>
    </main>
  </Layout>
  )
}

export const homeQuery = graphql`
query homeQuery($id: String) {
prismic {
  allHomes(id: $id) {
    edges {
      node {
        title
        _meta {
          uid
          id
          lang
          }
        text
        partnerstitle
        toolstitle
        body {
          __typename
          ... on PRISMIC_HomeBodyTools {
            fields {
              name
              icon
              text1
              link {
              ... on PRISMIC__ExternalLink{
                    url
                  }
              }
            }
          }
          ... on PRISMIC_HomeBodyPartners{
            fields {
              link {
                ... on PRISMIC__ExternalLink{
                      url
                    }
              }
              img
            }
          }
        }
        }
      }
    }
  }
}
`
IndexPage.query = homeQuery;
export default IndexPage

and my member template:

import React from "react";
import { graphql } from "gatsby";
import Layout from "../components/layout";
import { RichText } from 'prismic-reactjs';

export const MemberTemplate = props => {
  return (
    <div className="row">
     <div className="row">
       <div className="md:w-6/12 w-full px-12">
         <img src={props.page.img.url} alt=""/>
         <a href={`mailto:${props.page.email[0].text}`}><i className="fas fa-envelope"></i> {props.page.email[0].text}</a>
       </div>
       <div className="md:w-6/12 w-full px-12 mt-0">
         <div className="big">{RichText.render(props.page.name)}</div>
         {RichText.render(props.page.description)}
       </div>
     </div>
   </div>
  )
}

const MemberPage = ({ data }) => {
  console.log(data)
  const doc = data.prismic.allMembers.edges.slice(0,1).pop();
  if(!doc) return null;
  return (
    <Layout title={doc.node.name.text} path="/" >
      <MemberTemplate page={doc.node} />
    </Layout>
  );

};

export const peopleQuery = graphql`
query peopleQuery($id: String) {
prismic {
  allMembers(id: $id) {
    edges {
      node {
        name
        description
        img
        email
        _meta {
          uid
          id
          lang
          }
        }
      }
    }
  }
}
MemberPage.query = peopleQuery;
export default MemberPage

I am using Gatsbyv2.12.2 and gatsby-source-prismic-graphqlv3.4.0-beta.0.
When trying to access the preview from the prismic dashboard I receive this error in the gatsby-browser:

StaticQuery example mounts twice

Hi,

I wanted to share my findings on using this plugin with StaticQuery.

When using the example syntax the wrapped component will mount multiple times for some reason, I'm not exactly sure why. I solved it by using this syntax:

class StaticQueryWithPreview extends React.PureComponent {
  // Make sure updated props are passed correctly
  renderComponent = withPreview(data => {
    return <Layout {...this.props} prismic={data.prismic}/>
  }, query, fragments)

  render () {
    return (
      <StaticQuery
        query={query}
        render={this.renderComponent}
      />
    )
  }
}

load() pagination returns old data on last page

Hey,

I was just testing out pagination/filtering using the provided load() function and noticed what I think is a bug:

When reaching the last page, the result will contain old data merged with the last page if the last page result is less than the pageSize. I'm seeing data from lastPage-1 merged with the single item from the last page.

I think it's because of this line? https://github.com/birkir/gatsby-source-prismic-graphql/blob/master/src/withPreview.tsx#L108

Is there any way we could get it to only return the new items on the last page?

This also becomes a problem when trying to filter the results.

Suggestion for documentation update

Hi - we spent a good amount of time spelunking through the code because we couldn't get this to work - the prismic preview widget was loading but the updated content wasn't displaying on the page. Eventually realised it's because our graphql queries weren't called query.

In hindsight it's pretty clear from the example code, but especially as we were coming over from a site that was kicked off from a Gatsby starter where most of the examples tend to be called pageQuery it took a while to click. Might save someone else some time to call this out explicitly somewhere?

Thanks!

'gatsby-plugin-modal-routing' is not showing modals under 'gatsby-source-prismic-graphql'

When I change it to 'gatsby-source-prismic' works as expected

Preview not working with Prismic's private API

The preview functionality of this plugin is only working when the repository settings of Prismic are set to Open API. When you select either Private API or Public API for Master only the plugin is not working (due to missing auth tokens). Can we add support for this?

3.0.0-alpha.14 PreviewPage js error if `pages` not defined in config

https://www.dropbox.com/s/pjovh1s835trsz1/Screenshot%202019-03-20%2010.17.10.png?dl=0

Is the pages field mandatory instead of manually using createPages?

Builds broken due to JavaScript TypeError

I'm seeing an uncaught TypeError in the javascript console when running built Gatsby projects while using this plugin.

It does look like the error is in the gatsby-source-graphql-universal package (so maybe this issue belongs there?) but is originating from this package's WrapPage component.

When spinning up the Gatsby development server everything works great, but when I run the build command, the built javascript is throwing the following error:

Uncaught TypeError: Cannot set property 'query' of undefined

In doing a little bit of digging with Chrome's debugger, it looks like the package is trying to set the query prop type on StaticQuery, which isn't working since StaticQuery isn't an object, it's a function:

(Again, this is technically in the gatsby-source-graphql-universal package, so I'm happy to port this issue over to that package).

I'm experiencing this issue on all built projects I'm working on, including the arnaud example project in this repo (the above screenshots are from a build from that example). That example is using:

gatsby version 2.13.27
gatsby-source-prismic-graphql version 3.3.0
gatsby-source-graphql-universal version 3.1.3 (as a dependency of gatsby-source-prismic-graphql).

I'm also working in Chrome version 75.0.3770.100.

Only 20 dynamic routes generated

I'm guessing we'll have to add pagination when creating all the page routes. Prismic has a result limit of 20.

Pagination

Long time no see 👋

I'm using this plugin with the preview disabled, and was trying out the pagination. In your example prismic.load() gets passed as prop to the React Component, but the only prop that gets passed down for me is the graphql data in data.prismic.

I tried enabling the preview and even checking the props in the preview/ version, but it's not there... do I need to do some other undocumented magic to get access to the load function and does it work with the preview disabled?

Thanks again!

Match pages for locales?

Hello,

I see we have

   pages: [{ // (optional)
      type: 'Article',         // TypeName from prismic
      match: '/article/:uid',  // Pages will be generated under this pattern
      path: '/article',        // Placeholder page for unpublished documents
      component: require.resolve('./src/templates/article.js'),
    }],

Which will allow you to say Article = /article/slug/ however is there a way to say

Article EN = /article/slug
Article FR = /articleinfrench/slug

etc?

Pagination

Hello,

My prismic has 200 pages. I need to create them all on gatsby-node. How do you run the pagination on that page?

Doesn't work with Gatsby 2.9.0

Just upgraded Gatsby to 2.9.0 and get the following error

error Plugin gatsby-source-prismic-graphql returned an error

TypeError: createPageDependency is not a function

gatsby-node.js:100 NamespaceUnderFieldTransform.resolver
[greatstate]/[gatsby-source-graphql]/gatsby-node.js:100:7

Avoid loading prismic.min.js when not in preview

Would be great to avoid this extra request in production, but also keep the option to preview in production. Can we include it on demand when there is a preview cookie?

GraphQL api conflict?

I am already using the gatsby-source-graphql plugin with Shopify. It seems to have an issue with the page creation conflict, but I'm already a little lost trying to understand the root of the problem.

Enabling gatsby-source-graphql results in the error below. Disabling it completes the build just fine.

error Plugin gatsby-source-graphql returned an error


  Error: The plugin "gatsby-source-graphql" created a node of a type owned by another plugin.
          The node type "GraphQLSource" is owned by "gatsby-source-prismic-graphql".
          If you copy and pasted code from elsewhere, you'll need to pick a new type name
          for your new node(s).
          The node object passed to "createNode":
          {
      "id": "70a87664-0538-5739-87f6-ec3b13239436",
      "typeName": "Shopify",
      "fieldName": "shopify",
      "parent": null,
      "children": [],
      "internal": {
          "type": "GraphQLSource",
          "contentDigest": "2b604d8d767435561bfb1249116b468d",
          "ignoreType": true,
          "owner": "gatsby-source-graphql"
      }
  }
          The plugin creating the node:
          {
      "resolve": "/Users/olliejt/Documents/GitHub/VBI/gatsby-starter-shopifypwa/node_modules/gatsby-source-graphql",
      "id": "b9f70474-1178-5378-9955-dbbd3d4b9314",
      "name": "gatsby-source-graphql",
      "version": "2.0.18",
      "pluginOptions": {
          "plugins": [],
          "typeName": "Shopify",
          "fieldName": "shopify",
          "url": "https://visuals-by-impulse.myshopify.com/api/graphql",
          "headers": {
              "X-Shopify-Storefront-Access-Token": "REMOVED-TOKEN"
          }
      },
      "nodeAPIs": [
          "sourceNodes"
      ],
      "browserAPIs": [],
      "ssrAPIs": [],
      "pluginFilepath": "/Users/olliejt/Documents/GitHub/VBI/gatsby-starter-shopifypwa/node_modules/gatsby-source-graphql"
  }

  - actions.js:542 actions.createNode
    [gatsby-starter-shopifypwa]/[gatsby]/dist/redux/actions.js:542:148

  - redux.js:468
    [gatsby-starter-shopifypwa]/[redux]/lib/redux.js:468:35

  - api-runner-node.js:63 doubleBoundActionCreators.(anonymous function).args
    [gatsby-starter-shopifypwa]/[gatsby]/dist/utils/api-runner-node.js:63:13

  - gatsby-node.js:97 Object.<anonymous>
    [gatsby-starter-shopifypwa]/[gatsby-source-graphql]/gatsby-node.js:97:5

  - Generator.next


warning The gatsby-source-graphql plugin has generated no Gatsby nodes. Do you need it?

gatsby-source-prismic-graphql, causing a build error on NOW and Netlify

`1:48:57 PM: success Build manifest and related icons — 0.291

1:48:57 PM: success onPostBootstrap — 0.305

1:48:57 PM: info bootstrap finished - 5.389 s

1:48:57 PM: success run static queries — 0.350 — 3/3 8.95 queries/second

1:48:58 PM: success Generating image thumbnails — 6/6 - 0.851 s

1:48:58 PM: error #98123 WEBPACK

1:48:58 PM: Generating JavaScript bundles failed

1:48:58 PM: Cannot read property 'options' of undefined

1:48:58 PM: File: .cache/production-app.js

1:48:58 PM: See our docs page for more info on this error: https://gatsby.dev/issue-how-to

1:48:58 PM: npm

1:48:58 PM: ERR! code ELIFECYCLE`

This error is thrown whenever I tried to integrate the CD/CI of both NOW and Netlify.
I know that the plugin is causing the error because whenever I remove it from the gatsby-config.js it all goes trough.

Here is a repo where this error can be reproduced:
https://github.com/solabels/solabels

out of alpha

I noticed the version has bumped up to 3.2.0 without the 'alpha' tag. Does this means it's out of alpha?

Issue with page generation

Hi,

I'm having a very weird issue with this plugin.

On gatsby-config.js, I'm using the code below to generate pages :

pages: [{ // (optional)
          type: 'Post',         // TypeName from prismic
          match: '/blog/:uid',  // Pages will be generated under this pattern (optional)
          path: '/blog-preview',        // Placeholder page for unpublished documents
          component: require.resolve('./src/templates/post.js')
        }]

When trying to access the /blog/first-post page (for example), I'm not getting any data though I'm using this GraphQL query (which should work normally) :

query getPosts($uid: String!) {
  prismic {
    allPosts(uid: $uid) {
      edges {
        node {
          image
          title
          content
          _meta {
            type
            alternateLanguages {
              lang
              type
              id
              uid
            }
          }
        }
      }
    }
  }
}

As soon as I stop the gatsby process, change gatsby-config.js page generation to '/post/:uid', and do npm start, I still cannot access '/post/first-post' BUT can access '/blog/first-post' (the previous pathname I provided on the previous build). And anytime I change the path in page generation, the previous path is working and not the new one.

I'm not sure why it happens this way. I've tried removing the public folder so it rebuilds the whole folder from zero but it's still happening.

Does anyone have an idea of how to solve this?

Thanks a lot!

yarn install fails on v2.3

Hæ,

I noticed that yarn add gatsby-source-prismic-graphql results in the following error for some reason:

error An unexpected error occurred: "could not find a copy of gatsby to link

npm install seems to work fine though. Any ideas?

Cheers

Can't launch preview from Prismic dashboard

I've been unable to get content in my previews when launched from the Prismic dashboard.

This is my gatsby-config.js

{
      resolve: 'gatsby-source-prismic-graphql',
      options: {
        repositoryName: 'cartolab',
        accessToken: `${process.env.PRISMIC_API_TOKEN}`,
        path: '/preview',
        previews: true,
        pages: [
          {
            type: 'Blog_post',
            match: '/blog/:uid',
            path: '/blog-preview',
            component: require.resolve('./src/templates/blog-post.js'),
          },
        ],
      },
    },

This is my blog-post template, modeled after the pagination example:

import React from 'react';
import { Container, Header, Image, Responsive } from 'semantic-ui-react';
import { graphql } from 'gatsby';
import { withLayout } from '../layouts/Layout';
import SharingButtons from '../components/SharingButtons';
import { RichText } from 'prismic-reactjs';
import { get } from 'lodash';

export const query = graphql`
  query BlogPostByUIDQuery($uid: String!) {
    prismic {
      blog_post(uid: $uid, lang: "en-us") {
        _meta {
          uid
          type
          tags
          lastPublicationDate
        }
        post_title
        post_author
        thumbnail
        post_body
      }
    }
  }
`;

const BlogPostTemplate = ({ data, location }) => {
  const title = get(data, 'prismic.blog_post.post_title[0].text', []);
  const author = get(data, 'prismic.blog_post.post_author', []);
  const publishDate = get(
    data,
    'prismic.blog_post._meta.lastPublicationDate',
    []
  );
  const postImage = get(data, 'prismic.blog_post.thumbnail.url', []);
  const postBody = get(data, 'prismic.blog_post.post_body', []);

  return (
    <div style={{ marginTop: '7em', marginBottom: '5em' }}>
      <Container text>
        <Header as="h1">{title}</Header>
        <p>by: {author}</p>
        <p>
          <i>{publishDate}</i>
        </p>
        <Responsive maxWidth={767}>
          <SharingButtons url={location.href} text={title} mobile />
        </Responsive>
        <Responsive minWidth={768}>
          <SharingButtons url={location.href} text={title} />
        </Responsive>

        <Image src={postImage} style={{ marginTop: '1em' }} />
        <div className="blog-post-body" style={{ marginTop: '1em' }}>
          <RichText render={postBody} />
        </div>
      </Container>
    </div>
  );
};

export default withLayout(BlogPostTemplate);

When I launch the Preview by clicking the button in Prismic, I see this:

The page loads, but the unpublished content doesn't.

If I then manually change the preview URL to be structured like .../blog-preview?uid=post-uid, then I see the content:

So, previews are sort of working, but not directly from the dashboard. Is there something obvious I'm missing to make sure they launch correctly from the Prismic dashboard?

Edit: Gatsby v2.4.3, plugin v 3.2

build not working

I have an issue using the prismic plugin. Everything works fine in develop mode. Data is coming back and preview seems to work fine. However if i build it looks like the data isn;'t available at build time?

error Building static HTML failed for path "/events"

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html

8 | return (
9 | <>
> 10 | <SEO title={Event: ${data.event_title[0].text}} />
| ^
11 | <h1>{data.event_title[0].text}</h1>
12 | <p>{Event date: ${data.event_date}}</p>
'13 | <p>{Location: ${data.location[0].text}}</p>

WebpackError: TypeError: Cannot read property 'event_title' of null'

Component looks like this
const Event = ({ data: { prismic } }) => {
const data = prismic.event
return (
<>
<SEO title={Event: ${data.event_title[0].text}} />
h1>{data.event_title[0].text}</h1>
<p>{Event date: ${data.event_date}}</p>
<p>{Location: ${data.location[0].text}}</p>
<Link to="/events">Back to Events</Link>
</>
)
}

Event.query = query'

using
"gatsby": "2.3.16", "gatsby-source-prismic-graphql": "^3.1.3",

I'm console logging the data in the component and it looks fine in the build process but fails when it gets the component bit <SEO title={Event: ${data.event_title[0].text}} />. This is happening for lots of components

3.0.0-alpha.14 Preview not updating page content

I can't get the Preview to update the page content using 3.0.0-alpha.14

This is a static page where the Prismic toolbar shows the preview content but not the page:

https://www.dropbox.com/s/75ha7wo2h4803m8/Screenshot%202019-03-20%2011.00.45.png?dl=0

Same for dynamically created pages using the pages: property, it's not updating the content.

You can see the Prismic toolbar has the updated title, but not the page content:
https://www.dropbox.com/s/3q8m3jrdo62yley/Screenshot%202019-03-20%2010.26.41.png?dl=0

Better Link Resolver Example

Hello, I just wanted to share this LinkResolver helper that I made because the current RichText in prismic-reactjs doesn't seem to work with the LinkResolver in this README - I've tried adding the snippet in gatsby-browser.js and could not get it to work. I then found out that I can use the RichText with serializeHyperlink from prismic-reactjs to conditionally render a Gatsby Link or a regular link if it's to an external URL. I think it would be great to either provide this example (or better one) on the README or somehow bake this into the library because it seems like something that should "just work", since Prismic gives you clear distinction between local document links and external links, it shouldn't require everyone to write custom code to render these embedded links in RichText.

import { Link } from "gatsby"
import { RichText } from "prismic-reactjs"
import React from "react"

export function LinkResolver(type, element, content, children, index) {
  if (element.data.link_type === "Web") {
    return <a href={element.data.url}>{content}</a>
  }
  return (
    <Link key={element.data.id} to={element.data.uid}>
      {content}
    </Link>
  )
}

// Usage
function PageContent({doc}) { 
    return <RichText render={doc} serializeHyperlink={LinkResolver} />
}

Support of template ?

Hello,

I dont use pages but only templates.

Do you think it is possible to use it?

TypeError: Cannot read property 'prismic' of undefined

Everything seems to be working fine locally, I'm getting pages generate perfectly and previews working well, but I keep getting the same error which stops me deploying to netlify.

My repo can be found here - https://github.com/jodiedoubleday/HX-Gatsby/tree/previews

I contacted prismic who told me it was a problem with my setup but couldn't explain what. Was wondering if this is a known issue or if someone can spot a glaring error.

TypeError: createContentDigest is not a function

Moi,

So I've had preview: false until now, when I tried to enable it now I get this error with gatsby develop at the refetchInterval:

success extract queries from components — 0.189 s
error UNHANDLED EXCEPTION

TypeError: createContentDigest is not a function

gatsby-node.js:146 createSchemaNode
[Website]/[gatsby-source-graphql]/gatsby-node.js:146:29
gatsby-node.js:121 Timeout.refetcher [as _onTimeout]

The first build works fine, it's only whatever refetchInterval triggers that doesn't.

I can try to find the time later to dig deeper into the error and/or create a reproduction, but any pointers where to look are welcome. I've tried with both gatsby v2.1.37 and the newest.

Is it possible to change match: '/:uid' to something else?

More of a question than an issue (sorry if ive raised this in the wrong way)

Is there a way of changing
match: '/:uid'
to something like
match: '/:slug (or any other returned node from prismic?)

Uncaught TypeError: Cannot set property 'query' of undefined

I'm getting this JS error when running in production ie gatsby build && gatsby serve. (gatsby develop works fine.)

This issue seems to be fixed in this commit: f05a5e6

But since it hasn't been released and there is no issue I thought I'd add one to help other people with the same errors.

app-81af51e12fde343aa4e9.js:1 Uncaught TypeError: Cannot set property 'query' of undefined
    at Object.<anonymous> (app-81af51e12fde343aa4e9.js:1)
    at u (webpack-runtime-17c45135f10339e5f97e.js:1)
    at Object.<anonymous> (app-81af51e12fde343aa4e9.js:1)
    at u (webpack-runtime-17c45135f10339e5f97e.js:1)
    at Object.<anonymous> (app-81af51e12fde343aa4e9.js:1)
    at u (webpack-runtime-17c45135f10339e5f97e.js:1)
    at Module.<anonymous> (app-81af51e12fde343aa4e9.js:1)
    at u (webpack-runtime-17c45135f10339e5f97e.js:1)
    at r (webpack-runtime-17c45135f10339e5f97e.js:1)
    at Array.t [as push] (webpack-runtime-17c45135f10339e5f97e.js:1)

Comments in GraphQL queries break Previews

With a simple template query:

export const query = graphql`
    query PageByUid($uid: String!) {
        prismic {
            page(uid: $uid, lang: "en-us") {
                title
                #ingress <--- without the comment this works
            }
        }
    }
`;

the preview functionality breaks if # comments are inserted with the following error in the browser:

Support for Prismic slices / Linked documents?

The query for getting slice content requires an inline fragment:
https://prismic.io/docs/graphql/query-the-api/retrieve-slice-content

which will throw:
index.js:2177 You are using the simple (heuristic) fragment matcher, but your queries contain union or interface types. Apollo Client will not be able to accurately map fragments. To make this error go away, use the IntrospectionFragmentMatcher as described in the docs: https://www.apollographql.com/docs/react/advanced/fragments.html#fragment-matcher
WARNING: heuristic fragment matching going on!

I didn't test this (because all my links are inside slices :) ), but the linked documents also require inline fragments:
https://prismic.io/docs/graphql/query-the-api/retrieve-link-content

So I assume they would throw the same error?

Preview path interferes with static page

I have a news index page published under src/pages/news

Each article is published below this folder using this configuration:

    {
            type: 'News_article',
            match: '/news/:uid',
            path: '/news', // CONFLICT in static building
            component: require.resolve('./src/templates/article.js')
     },

This configuration works in dev mode, but the Preview route overrides the static page when building for production.

I guess this is because both the static page and the preview route wants to use /news.

I tried setting the preview route with a trailing slash /news/ instead which preserves the static page, BUT then the article UID is not resolved properly in Preview mode for some reason. When entering preview the route is resolved as: news/?uid=... and it displays the index page.

To work around this I created a separate preview config and modified the link resolver to pick the correct one when previewing:

   {
            type: 'News_article', // TypeName from prismic
            match: '/news/:uid', // Pages will be generated under this pattern
            path: '/news/', // Placeholder page for unpublished documents - NOT USED
            component: require.resolve('./src/templates/article.js')
          },
          // Map for unpublished New Articles
          {
            type: 'News_article', // TypeName from prismic
            match: '/preview-article/:uid', // Pages will be generated under this pattern
            path: '/preview-article', // Placeholder page for unpublished documents
            component: require.resolve('./src/templates/article.js')
          },

// link resolver
if (doc.type === 'news_article') {
    if (doc.href) {
      // Preview path
      pathname = `/preview-article/${doc.uid}`
    } else {
      // Normal path
      pathname = `/news/${doc.uid}`
    }
  }

Not sure if it's safe to detect preview using the href property on the doc?

If it is safe, it would have been great if I could do this instead:

    {
            type: 'News_article',
            match: '/news/:uid',
            path: '/preview-article', // uid is not correctly resolved here
            component: require.resolve('./src/templates/article.js')
     }

However the UID seems to be lost when doing that - the article data is empty when loading an article under /preview-article/my-article

Any ideas on how to improve this?

Data not being returned during create pages and dependencies missing

Looks like I'm not getting any data back during the create pages phase of the build process.

gatsby-config.js:

{
  resolve: `gatsby-source-prismic-graphql`,
  options: {
    repositoryName: `ihavebeenreplaced`,
    accessToken: `${process.env.PRISMIC_ACCESS_TOKEN}`,
    path: '/preview',
    previews: true,
    refetchInterval: 60,
    pages: [
      {
        type: 'home_page',
        match: '/',
        path: '/',
        component: require.resolve('./src/templates/Home/Home.jsx'),
      },
      {
        type: 'contact_page',
        match: '/contact',
        path: '/contact',
        component: require.resolve('./src/templates/Contact/Contact.jsx'),
      },
      {
        type: 'blog_article',
        match: '/blog/:uid',
        path: '/blog',
        component: require.resolve('./src/templates/BlogArticle/BlogArticle.jsx'),
      },
      {
        type: 'case_study',
        match: '/work/:uid',
        path: '/work',
        component: require.resolve('./src/templates/CaseStudy/CaseStudy.jsx'),
      },
      {
        type: 'event',
        match: '/events/:uid',
        path: '/events',
        component: require.resolve('./src/templates/Event/Event.jsx'),
      },
      {
        type: 'job_listing',
        match: '/careers/:uid',
        path: '/careers',
        component: require.resolve('./src/templates/JobListing/JobListing.jsx'),
      },
    ],
  },
},

I've installed the gatsby-source-prismic-graphql to my dependences, package.json:

"dependencies": {
...
"gatsby-source-prismic-graphql": "^3.0.5",
...

The error I'm getting in the console reads:

error Plugin gatsby-source-prismic-graphql returned an error


  TypeError: Cannot read property 'prismic' of undefined
  
  - gatsby-node.js:91 _callee$
    [GreatState]/[gatsby-source-prismic-graphql]/gatsby-node.js:91:30
  
  - util.js:16 tryCatcher
    [GreatState]/[bluebird]/js/release/util.js:16:23
  
  - promise.js:512 Promise._settlePromiseFromHandler
    [GreatState]/[bluebird]/js/release/promise.js:512:31
  
  - promise.js:569 Promise._settlePromise
    [GreatState]/[bluebird]/js/release/promise.js:569:18
  
  - promise.js:606 Promise._settlePromiseCtx
    [GreatState]/[bluebird]/js/release/promise.js:606:10
  
  - async.js:142 _drainQueueStep
    [GreatState]/[bluebird]/js/release/async.js:142:12
  
  - async.js:131 _drainQueue
    [GreatState]/[bluebird]/js/release/async.js:131:9
  
  - async.js:147 Async._drainQueues
    [GreatState]/[bluebird]/js/release/async.js:147:5
  
  - async.js:17 Immediate.Async.drainQueues [as _onImmediate]
    [GreatState]/[bluebird]/js/release/async.js:17:14

I also get a warning that the gatsby-source-prismic-graphql plugin is missing dependencies in it's /utils directory:

 ERROR  Failed to compile with 2 errors                                                                                                                                                                                                        11:57:34 AM

These dependencies were not found:

* apollo-boost in ./node_modules/gatsby-source-prismic-graphql/utils/getApolloClient.js
* apollo-cache-inmemory in ./node_modules/gatsby-source-prismic-graphql/utils/getApolloClient.js

To install them, you can run: npm install --save apollo-boost apollo-cache-inmemory
✖ ｢wdm｣: 
ERROR in ./node_modules/gatsby-source-prismic-graphql/utils/getApolloClient.js
Module not found: Error: Can't resolve 'apollo-boost' in '/Users/jonjames/Sites/GreatState/node_modules/gatsby-source-prismic-graphql/utils'
 @ ./node_modules/gatsby-source-prismic-graphql/utils/getApolloClient.js 14:19-42
 @ ./node_modules/gatsby-source-prismic-graphql/components/WrapPage.js
 @ ./node_modules/gatsby-source-prismic-graphql/gatsby-browser.js
 @ ./.cache/api-runner-browser-plugins.js
 @ ./.cache/api-runner-browser.js
 @ ./.cache/app.js
 @ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

ERROR in ./node_modules/gatsby-source-prismic-graphql/utils/getApolloClient.js
Module not found: Error: Can't resolve 'apollo-cache-inmemory' in '/Users/jonjames/Sites/GreatState/node_modules/gatsby-source-prismic-graphql/utils'
 @ ./node_modules/gatsby-source-prismic-graphql/utils/getApolloClient.js 16:27-59
 @ ./node_modules/gatsby-source-prismic-graphql/components/WrapPage.js
 @ ./node_modules/gatsby-source-prismic-graphql/gatsby-browser.js
 @ ./.cache/api-runner-browser-plugins.js
 @ ./.cache/api-runner-browser.js
 @ ./.cache/app.js
 @ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app
ℹ ｢wdm｣: Failed to compile.
error Plugin gatsby-source-prismic-graphql returned an error

If I can provide any more information to help, please let me know.

3.0.0-alpha.14 typename did not match an object type: PRISMICExternalLink

The GraphQL type PRISMIC__ExternalLink seems to be missing in this version. All queries for documents with external links fails.

Internal Document links seem to resolve properly.

Reference error:

__typename did not match an object type: PRISMIC__ExternalLink
https://www.dropbox.com/s/ge7nkq8jaj0onko/Screenshot%202019-03-20%2011.06.21.png?dl=0

Failed to fetch preview

Hi again!

Finally got access to GraphQL in Prismic, but didn't get too far...

With a super simple pages/index fetched based on the uid:

export const query = graphql`
    query {
        prismic {
            page(uid: "my-index", lang: "en-us") {
                title
            }
        }
    }
`;

I've setup the preview in url in prismic to "http://localhost:8000" & "/preview"

a )When I navigate to http://localhost:8000, I see the published title ("My index") and even the draft one ("My index (DRAFT EDIT)") in the preview thingie from prismic:

Is it supposed to show the page with preview content from the sidebar link? If so, it just reloads the same page when clicking the "draft preview".

b) When I navigate to the preview page from prismic's preview button, I can see it redirect to the preview/token=bla page correctly and then to http://localhost:8000, but there it throws:

I didn't dig into it deeper yet, thought I'd ask first if I'm missing something obvious in my setup? If it's nothing obvious I can create a smaller reproduction and actually try to look into what's causing the error.

(I also tried setting the API to public, had no effect)

Preview mode not working with Gatsby's wrapPageElement

If I use Gatsby's wrapPageElement, or a plugin that does, like @TylerBarnes gatsby-plugin-transition-link to create a persistent template layout, the Prismic preview mode feature stops working.

When I click the "Preview" button from the CMS with a persistent template setup on my Gatsby site (with wrapPageElement), I get the following:

Disabling the gatsby-plugin-transition-link plugin, or removing the use of wrapPageElement in my own gatsby-browser.js file (as the case may be) restores the preview functionality.

gatsby - ^2.3.16
gatsby-source-prismic-graphql - ^3.1.3

EDIT: typos

Variables in GraphQL queries?

Hæ!

So, I'm using templates with graphQL variables in the queries, like in this starter example:
https://github.com/LekoArts/gatsby-starter-prismic/blob/master/src/templates/post.jsx

The query I'm making in the page.tsx template looks like this:

export const query = graphql`
    query PageByUid($uid: String!) {
        prismic {
            page(uid: $uid, lang: "en-us") {
                title
            }
        }
    }
`;

And that works for the published content, but the preview query fails, because it doesn't add the variables:

Testing the same query with "query variables" { "uid": "my-first-page" } in the Prismic GraphiQL (https://my-repo.prismic.io/graphql) adds them correctly:

a) Am I missing something or is this not supported?
b) If it's not supported: Do you use something else to setup dynamic pages? If there's no workaround, it's a big blocker for me :(
b) If there's no workaround: Is it a big thing to add? Could I help?
c) If it's possible to add: How many other features are missing compared to gatsby-source-prismic? I'm just getting started with gatsby and graphQL, so I don't even know what features I will need, but this project I'm setting up is quite large, so probably a lot of them, whatever they are?

Thanks!

IE11 not supported when running gatsby develop

No need to fix this, but just in case anyone else tries to test their page in IE11 with gatsby develop and gets a heart attack when the page doesn't render at all throwing the following error (this is with examples/pagination):

(Syntax error, File: commons.js, Line: 15673, Column: 26)

Fear not, it does work with gatsby serve.

Gatsby develop works with angeloashmore/gatsby-source-prismic.

Also, great work with all the improvements, need to test them out soon :)

birkir / gatsby-source-prismic-graphql Goto Github PK

gatsby-source-prismic-graphql's Issues

Steps to reproduce:

Recommend Projects

Recommend Topics

Recommend Org