Unexpected token M in JSON at position 0

Linny3D commented 2 years ago

Hi, I just tried your plugin with almost bare skeleton Scrapi and Gatsby apps. If i start the development server, the following error occurs, during the build process (createSchemaCustomization lifecycle).

ERROR #11321  PLUGIN

"@relate-app/gatsby-source-strapi" threw an error while running the createSchemaCustomization lifecycle:

Unexpected token M in JSON at position 0

  Error: Unexpected token M in JSON at position 0

  - index.js:29 new ApolloError
    [react_strapi]/[@apollo]/client/errors/index.js:29:28

  - QueryManager.js:611 
    [react_strapi]/[@apollo]/client/core/QueryManager.js:611:19

  - asyncMap.js:16 both
    [react_strapi]/[@apollo]/client/utilities/observables/asyncMap.js:16:53

  - asyncMap.js:9 
    [react_strapi]/[@apollo]/client/utilities/observables/asyncMap.js:9:72

  - new Promise

  - asyncMap.js:9 Object.then
    [react_strapi]/[@apollo]/client/utilities/observables/asyncMap.js:9:24

  - asyncMap.js:17 Object.error
    [react_strapi]/[@apollo]/client/utilities/observables/asyncMap.js:17:49

  - Observable.js:140 notifySubscription
    [react_strapi]/[zen-observable]/lib/Observable.js:140:18

  - Observable.js:179 onNotify
    [react_strapi]/[zen-observable]/lib/Observable.js:179:3

  - Observable.js:240 SubscriptionObserver.error
    [react_strapi]/[zen-observable]/lib/Observable.js:240:7

  - iteration.js:4 
    [react_strapi]/[@apollo]/client/utilities/observables/iteration.js:4:68

  - Array.forEach

  - iteration.js:4 iterateObserversSafely
    [react_strapi]/[@apollo]/client/utilities/observables/iteration.js:4:25

  - Concast.js:36 Object.error
    [react_strapi]/[@apollo]/client/utilities/observables/Concast.js:36:21

  - Observable.js:140 notifySubscription
    [react_strapi]/[zen-observable]/lib/Observable.js:140:18

  - Observable.js:179 onNotify
    [react_strapi]/[zen-observable]/lib/Observable.js:179:3

This is, what my Plugin Config looks like:

{
      resolve: 'gatsby-source-strapi',
      options: {
        apiURL: 'http://localhost:1337/api/',
        collectionTypes: ['Bestellung', 'Slideshow'],
        // Extract images from markdown fields.
        markdownImages: {
          typesToParse: {
            Article: ['body'],
            ComponentBlockBody: ['text'],
          },
        },
        // Only include specific locale.
        locale: 'en', // default to all
        // Include drafts in build.
        preview: true, // defaults to false
        // Use application token.
        token: 'deleted for web on purpose',
        // Add additional headers.
        headers: {},
      },
    },

I am using the latest 4.2.1 version of your plugin, using npm 8.1.2. I don't know if it is a problem with the plugin or if i'm making a mistake here, because i'm quite new to Gatsby.

Best Regards Linny

pepijn-vanvlaanderen commented 2 years ago

You should check your config, the error is a bit unclear here, but I had this when I used wrong collection type names. (check the plural / singular variants and make sure permissions are open)

Linny3D commented 2 years ago

Thanks you were right. Didn't notice that i had to use apiURL: 'http://localhost:1337', instead of apiURL: 'http://localhost:1337/api/',

I already tried that before, but i thought it would not work, because then i get another strange error:

ERROR 

UploadFileQuery failed – Forbidden access

===== QUERY =====
query UploadFileQuery($pagination: PaginationArg, $updatedAt: DateTime) {
  uploadFiles(pagination: $pagination, filters: {updatedAt: {gt: $updatedAt}}) {
    __typename
    data {
      __typename
      id
      attributes {
        __typename
        name
        alternativeText
        caption
        width
        height
        formats
        hash
        ext
        mime
        size
        url
        previewUrl
        provider
        provider_metadata
        createdAt
        updatedAt
      }
    }
    meta {
      pagination {
        total
      }
    }
  }
}
===== VARIABLES =====
{
  "pagination": {
    "start": 0,
    "limit": 1000
  },
  "updatedAt": "1990-01-01T00:00:00.000Z"
}
===== ERROR =====
 Forbidden access

Although this error occurs during startup, my queries are working now. I don't know where this error comes from though. It even occurs with a fresh Gatsby app.

I guess i still have a lot to learn about Gatsby an Strapi ;)

pepijn-vanvlaanderen commented 2 years ago

For the other error to go away you have to set the find/findOne permissions open for Upload for public access in Strapi, guess it is necessary for media file downloads.

t-kietzmann commented 2 years ago

I'm facing the same issue and have currently no idea how to solve it. Simple Gatsby-Starter with Strapi 4.0.5 with one Collection Type:

API ID (Singular): job API ID (Plural): jobs

Permissions: find and findOne

Api Token: Read-only

{
      resolve: 'gatsby-source-strapi',
      options: {
        apiURL: 'http://localhost:1337',
        collectionTypes: ['jobs'],
        locale: 'de', // default to all
        headers: {},
        token:
       '29ab2473e23a57dc3a42b56af422de14b7c95b94c31566345ddea34f695c6fc2885f02269962b9287f8457246820d00192c6c2574606c3debc97cfa3f827b6e05a5d17c18211f691ee26ca67d8e229478270d45021016d22e65847b0dea806f676da388fa0fd46b63267f492215238a2d58db8fe4585bce443c250d2bf96fedf',
      },
    },

bigoper commented 2 years ago

I was able to resolve this issue by:

installing the graphql plugin on Strapi

using the following config in gatsby-config.js

{
  resolve: `gatsby-source-strapi`,
  options: {
    apiURL: `http://127.0.0.1:1337`,
    queryLimit: 50,
    collectionTypes: [`page`, `category`],
  }
}

relate-app / gatsby-source-strapi-graphql

Unexpected token M in JSON at position 0 #5