GraphQL error Undefined array key "src"

k-aleksandar commented 1 year ago

Bug description

If you have a simple collection where you have a Responsive field type with validation not required, then you need some entries where in some of them the Responsive filed type is empty.

Then in the entries query in GraphQL if you select data from the Responsive field when executing the query you will get an error with debug message "Undefined array key 'src'".

The root of the error is src/GraphQL/ResponsiveFieldType.php file, and if you add this line of code if (!isset($field['src'])) return []; in the file on line 39 the error is fixed.

How to reproduce

GraphQL query example

query MyQuery { entries(collection: "products") { data { ... on Entry_Products_Products { id overview_image { breakpoints { label ratio } } } } } }

Logs

No response

Environment

Environment
Application Name: Statamic
Laravel Version: 9.52.5
PHP Version: 8.1.12
Composer Version: 2.5.1
Environment: local
Debug Mode: ENABLED
URL: localhost
Maintenance Mode: OFF

Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: CACHED

Drivers
Broadcasting: log
Cache: statamic
Database: mysql
Logs: stack / single
Mail: smtp
Queue: sync
Session: file

Statamic
Addons: 1
Antlers: regex
Stache Watcher: Enabled
Static Caching: Disabled
Version: 3.4.1 PRO

Statamic Addons
spatie/statamic-responsive-images: 3.1.3

Installation

Fresh statamic/statamic site via CLI

Antlers Parser

regex (default)

Additional details

No response

ncla commented 1 year ago

I am unable to reproduce this issue.

I have two entries in a collection, one has default breakpoint image selected, one does not. So the content .md files look like this:

---
id: home
blueprint: pages
title: Home
template: home
author: c8b68d28-46af-4be7-bc4b-9147453f5fc0
updated_by: c8b68d28-46af-4be7-bc4b-9147453f5fc0
updated_at: 1676145264
responsive_field:
  src: poster.jpg
---

and

---
id: 7314f75e-acbc-48b2-aefa-782a8de3b681
blueprint: pages
title: 'Another one'
updated_by: c8b68d28-46af-4be7-bc4b-9147453f5fc0
updated_at: 1680871290
---

Pages blueprint responsive fieldtype configured like so:

      -
        handle: responsive_field
        field:
          use_breakpoints: true
          allow_ratio: true
          allow_fit: true
          restrict: false
          allow_uploads: true
          display: 'Responsive Field'
          type: responsive
          icon: assets
          listable: hidden
          instructions_position: above
          visibility: visible
          breakpoints:
            - lg

GraphQL query I am running on http://localhost/cp/graphiql and the output

Only difference with your query is that you have query MyQuery added at the start, which I do not.

Works for me as expected.

If we are talking about error logs in your log files, then that seems correct according to the code, there is a very generous try .. catch statement in ResponsiveFieldtype, which logs any errors.

Here's the next steps for you:

Is this error appearing in the request output or in laravel.log?
Can you please provide your minimal blueprint and content files?
Please provide full error stack trace.

Any additional information would be great too.

k-aleksandar commented 1 year ago

On a clean Statamic installation, require the responsive image addon

Environment:

Application Name: Statamic
Laravel Version: 9.52.5
PHP Version: 8.1.12
Composer Version: 2.5.1
Environment: local
Debug Mode: ENABLED
URL: responsive_test.test
Maintenance Mode: OFF

Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: CACHED

Drivers
Broadcasting: log
Cache: statamic
Database: mysql
Logs: stack / single
Mail: smtp
Queue: sync
Session: file

Statamic
Addons: 1
Antlers: runtime
Stache Watcher: Enabled
Static Caching: Disabled
Version: 3.4.7 PRO

Statamic Addons
spatie/statamic-responsive-images: 3.1.3

Collection settings:

title: Products
template: default
layout: layout
revisions: false
sort_dir: asc
date_behavior:
  past: public
  future: private
preview_targets:
  -
    label: Entry
    url: '{permalink}'

Blueprint:

title: Product
sections:
  main:
    display: Main
    fields:
      -
        handle: title
        field:
          type: text
          required: true
          validate:
            - required
      -
        handle: content
        field:
          type: markdown
          display: Content
          localizable: true
      -
        handle: responsive_field
        field:
          use_breakpoints: true
          allow_ratio: true
          allow_fit: true
          breakpoints:
            - sm
            - md
            - lg
            - xl
            - 2xl
          restrict: false
          allow_uploads: true
          display: 'Responsive Field'
          type: responsive
          icon: assets
          listable: hidden
          instructions_position: above
          visibility: visible
  sidebar:
    display: Sidebar
    fields:
      -
        handle: slug
        field:
          type: slug
          localizable: true

Entries:

id: 9d0adac2-9c68-4f08-af80-161e6c94a160
blueprint: product
title: 'test 1'
updated_by: 46be6979-a62a-4f6a-baf8-b7a3291fb56f
updated_at: 1680874116

id: 56ab8a8c-380e-4647-86ad-f00e708cfeab
blueprint: product
title: 'test 2'
updated_by: 46be6979-a62a-4f6a-baf8-b7a3291fb56f
updated_at: 1680874123

GraphQL

Screenshot 2023-04-07 at 15 52 35

Laravel log

laravel.log

ncla commented 1 year ago

Can you post the full output of the GraphQL response? I am asking this, because there may be the data you need if you scroll down a bit further down. The errors appear first in the response, then the data.

I am still unable to replicate this issue to behave exactly 1:1, so I am stumped. :confused:

As a test, can you please try commenting this line src/GraphQL/ResponsiveFieldType.php:49 logger()->error($e->getMessage()); and see if:

It displays errors in GraphQL response
Logs the error in laravel.log

I might just have to add your workaround fix if I can't figure out a better way soon.

ncla commented 1 year ago

Even on an empty repository, clean install I am unable to reproduce. If you can try pulling my test repository locally and see if you get the error that would be great! https://github.com/ncla/statamic-graphql-exception-bug

If you can upload your example Statamic site, I will take a look as well.

k-aleksandar commented 1 year ago

I pulled you test repository locally and yes for some reason the error is not present in the Pages collection so I created Products collection where the error is present, you can see the changes that I made here: https://github.com/k-aleksandar/statamic-graphql-exception-bug

Screenshot 2023-04-12 at 12 08 42

ncla commented 1 year ago

I don't know anymore lol. :sob: :joy: I pulled in your changes. Same thing.

k-aleksandar commented 1 year ago

I'm back in the office... Yes you are right when you clone the project the error is not present in graphql. I found a way to recreate it.

In your repository:

create new collection,
in the blueprint add responsive image field,
create one entry(add title) and press Save & Publish
run the graphql query, the error is present
go to the entry and resave it(press again Save & Publish)
run the graphql query, the error is NOT present
delete the entry
create new entry(add title) and press Save & Publish
run the graphql query, the error is present
go to the entry and resave it(press again Save & Publish)
run the graphql query, the error is NOT present

So I'm thinking this error is some how connected with the cache, after the cache kicks in the error is not present in the response. Somehow our frontend team come across this error often(on multiple projects, locally and in production) and looks like double saving the entries will solve this issue.

ncla commented 1 year ago

Thanks, I can reproduce this issue now.

ncla commented 1 year ago

Thanks for being patient. Should be fixed in v4.0.2. Your fix was correct, just wanted this to be reproduce-able on my end.

spatie / statamic-responsive-images