0

I am attempting to get a quick prototype up using strapi and gatsby. None of the starters seem to work, so I've tried the quick start quides on the strapi site.

First I followed this quick start guide to get the strapi backend up. https://docs.strapi.io/developer-docs/latest/getting-started/quick-start.html

And then this one to get gatsby running. https://docs.strapi.io/developer-docs/latest/developer-resources/content-api/integrations/gatsby.html#create-a-gatsby-app

And have run into 2 errors.

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

Request failed with status code 403
...

warn The gatsby-source-strapi plugin has generated no Gatsby nodes. Do you need it? This
 could also suggest the plugin is misconfigured.

and

There was an error in your GraphQL query:

Cannot query field "allStrapiRestaurant" on type "Query".

I have enabled find/findOne for both restaurants and categories.

All of the assets have been published.

And I tried adding an API access token to the gatsby config and get the same results.

My gatsby config looks like

...
  plugins: [
    {
      resolve: "gatsby-source-strapi",
      options: {
        apiURL: "http://localhost:1337",
        accessToken: process.env.STRAPI_API_TOKEN,
        collectionTypes: ["restaurant", "category"],
        queryLimit: 1000,
      },
    },
...

and my package json looks like

{
  "name": "gatsby-starter-default",
  "private": true,
  "description": "A simple starter to get up and developing quickly with Gatsby",
  "version": "0.1.0",
  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
  "dependencies": {
    "gatsby": "^4.15.0",
    "gatsby-plugin-gatsby-cloud": "^4.15.0",
    "gatsby-plugin-image": "^2.15.0",
    "gatsby-plugin-manifest": "^4.15.0",
    "gatsby-plugin-offline": "^5.15.0",
    "gatsby-plugin-react-helmet": "^5.15.0",
    "gatsby-plugin-sharp": "^4.15.0",
    "gatsby-source-filesystem": "^4.15.0",
    "gatsby-source-strapi": "^2.0.0",
    "gatsby-transformer-remark": "^5.15.0",
    "gatsby-transformer-sharp": "^4.15.0",
    "prop-types": "^15.8.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0"
  },
  "devDependencies": {
    "prettier": "^2.6.2"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "0BSD",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md,css}\"",
    "start": "gatsby develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

Another thing I have noticed is that the queries in the quick start guide don't exist when using graphiql. localhosthost:1337/api/restaurants returns the data (minus the relation bit). And in graphiql I can query the data like this:

query { 
  restaurants{
    data{
      attributes{
        name
      }
    }
  }
}

(this still doesn't allow me to do anything meaningful with strapi because I can't get relations or sort anything, and this also doesn't work in gatsby, just graphiql)

Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
yankeedoodle
  • 353
  • 2
  • 11
  • Are you setting properly the environment variables? – Ferran Buireu May 27 '22 at 05:18
  • yes, I've also tried just putting the access token directly into the config – yankeedoodle May 27 '22 at 15:04
  • Does this answer your question? [Strapi API calling error: {"statusCode":403,"error":"Forbidden","message":"Forbidden"}](https://stackoverflow.com/questions/53956118/strapi-api-calling-error-statuscode403-errorforbidden-messageforbi) – Ferran Buireu May 27 '22 at 15:27
  • unfortunately not, I have all of the permissions allowed. find/findone for all resources, everything has been published, and I have a full access token – yankeedoodle May 28 '22 at 17:43

3 Answers3

0

It seems that you need to give permissions to content types builder.

settings > roles > content types builder -getComponent -getComponents -getContentType -getContentTypes

Omar
  • 1
  • I have the permissions enabled already. – yankeedoodle Jun 30 '22 at 18:12
  • 1
    As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 06 '22 at 04:36
0

So I ran into the same issue and was able to resolve it by using this strapi starter in my gatsby-config.js. The collection and single types are now a array of objects rather than array of strings as you used above. Hope this helps!

 {
      resolve: "gatsby-source-strapi",
      options: {
        apiURL: process.env.STRAPI_API_URL || "http://localhost:1337",
        accessToken: process.env.STRAPI_TOKEN,
        collectionTypes: [
          {
            singularName: "article",
            queryParams: {
              publicationState:
                process.env.GATSBY_IS_PREVIEW === "true" ? "preview" : "live",
              populate: {
                cover: "*",
                blocks: {
                  populate: "*",
                },
              },
            },
          },
          {
            singularName: "author",
          },
          {
            singularName: "category",
          },
        ],
        singleTypes: [
          {
            singularName: "about",
            queryParams: {
              populate: {
                blocks: {
                  populate: "*",
                },
              },
            },
          },
          {
            singularName: "global",
            queryParams: {
              populate: {
                favicon: "*",
                defaultSeo: {
                  populate: "*",
                },
              },
            },
          },
        ],
      },
    },
    },
luuma1215
  • 1
0

The way I got it working was:

  1. npm run --prefix backend develop and login to Strapi at http://localhost:1337/admin/
  2. Created an API Token at http://localhost:1337/admin/settings/api-tokens and copied it for later
  3. In the project's frontend folder created a .env.develop file based on the .env.example file and added the api token to STRAPI_TOKEN=
  4. Checked all options under the "Content types builder" for the "public" user role. Should be at the following url: http://localhost:1337/admin/settings/users-permissions/roles/2

So I have no idea if the quickstart npx option is just setup wrong or what. Hopefully this is still secure, but it got up and running. Hope this helps.

Ursus Aquaticus
  • 1