Upload File showing empty array

[jordanlewis9]

Hello!

I'm having an issue with the Upload functionality of the plugin, and I've tried just about everything to no avail.

I'm running a Gatsby front-end utilizing Apollo Upload Client. Here is my dependency list:

"dependencies": {
    "@apollo/client": "^3.5.9",
    "@fortawesome/fontawesome-free": "^5.15.4",
    "@fortawesome/fontawesome-svg-core": "^6.1.0",
    "@fortawesome/free-brands-svg-icons": "^6.1.0",
    "@fortawesome/free-solid-svg-icons": "^6.1.0",
    "@fortawesome/react-fontawesome": "^0.1.18",
    "@loadable/component": "^5.15.2",
    "aos": "^3.0.0-beta.6",
    "apollo-upload-client": "^17.0.0",
    "chokidar": "^3.5.2",
    "cross-fetch": "^3.1.5",
    "framer-motion": "^6.2.8",
    "gatsby": "^4.1.4",
    "gatsby-background-image": "^1.6.0",
    "gatsby-image": "^3.11.0",
    "gatsby-plugin-apollo": "^4.0.2",
    "gatsby-plugin-gatsby-cloud": "^4.19.0",
    "gatsby-plugin-google-gtag": "^4.20.0",
    "gatsby-plugin-image": "^2.24.0",
    "gatsby-plugin-minify-html": "^1.0.4",
    "gatsby-plugin-react-helmet": "^5.20.0",
    "gatsby-plugin-react-helmet-canonical-urls": "^1.4.0",
    "gatsby-plugin-robots-txt": "^1.7.1",
    "gatsby-plugin-sass": "^5.7.0",
    "gatsby-plugin-sharp": "^4.24.0",
    "gatsby-plugin-sitemap": "^5.19.0",
    "gatsby-source-wordpress": "^6.1.2",
    "gatsby-transformer-sharp": "^4.24.0",
    "html-react-parser": "^3.0.4",
    "isomorphic-fetch": "^3.0.0",
    "jquery": "^3.6.1",
    "lity": "^2.4.1",
    "lodash.clonedeep": "^4.5.0",
    "lodash.uniq": "^4.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-easy-marquee": "^1.2.4",
    "react-helmet": "^6.1.0",
    "react-select": "^5.2.2",
    "react-slick": "^0.29.0",
    "rellax": "^1.12.1",
    "sass": "^1.49.7"
  },

Here is my apolloClient.js:

import { ApolloClient, InMemoryCache } from "@apollo/client";
import { createUploadLink } from 'apollo-upload-client';

export const client = new ApolloClient({
  link: createUploadLink({
    uri: `**URL**`
  }),
  cache: new InMemoryCache(),
});

I'm using React Context to store form values in, and upon submit, inserting those as variables to the mutation. Here is my dispatch function for File Uploads:

onChange={event => {
          dispatch({
            type: ACTION_TYPES.updateUploadFieldValue,
            fieldValue: {
              id,
              fileUpload: event.target.files[0],
            },
          })
        }}

And then how I'm storing those values in Context:

    case ACTION_TYPES.updateUploadFieldValue: {
      const { id, fileUpload } = action.fieldValue;
      return [...getOtherFieldValues(id), { id, fileUploadValues: [fileUpload] }];
    }

So theoretically, the File Object should be in state in an array as a value of fileUploadValues. And it shows up as that whenever I log state to the console. Here is the mutation sending the form values back to WP:

const SUBMIT_FORM = gql`
  mutation submitForm($formId: ID!, $fieldValues: [FormFieldValuesInput]!) {
    submitGfForm(input: {
      id: $formId
      fieldValues: $fieldValues
    }) {
      entry {
        id
        ... on GfSubmittedEntry {
          databaseId
        }
      }
      errors {
        id
        message
      }
    }
  }
`;

And lastly, the function to submit the mutation:

  function handleSubmit(event) {
    event.preventDefault();
    if (loading) return 'Submitting...';

    console.log(state);

    submitForm({
      variables: {
        formId: `${form.databaseId}`,
        fieldValues: state
      }
    }).catch(error => {
      if (process.env.NODE_ENV === 'development') {
        // graphQLErrors, clientErrors, networkError, message, extraInfo
        console.log(Object.values(error));
      }
    })
  }

My WP install is just Local by Flywheel, using PHP 7.4, MySQL 8.0.16, server nginx, WP version 6.0.3.
The relevant WP plugins I'm using are:

Advanced Custom Fields PRO 6.0.3
Gravity Forms 2.6.7
WP Gatsby 2.3.3
WP GraphQL 1.12.0
WPGraphQL for ACF 0.5.2
WPGraphql for Gravity Forms 0.11.5
WPGraphQL Upload 0.1

I've tried 3 main methods. The method laid out above returns an Internal Server Error, with debug message of:

"Variable "$fieldValues" got invalid value [{"id":1,"nameValues":{"first":"Jordan","last":"Lewis"}},{"id":3,"fileUploadValues":[[]]}]; Expected type Upload at value[1].fileUploadValues[0]; Could not get uploaded file, be sure to conform to GraphQL multipart request specification. Instead got: []"

FWIW, the location of the error says "Line 1 Column 35". It seems like there is an empty array inside of the array, instead of the File object inside of the array, as is expected. I'm not sure if something is turning the object into an empty array, for whatever reason, or if the File natively turns into this blank array? The console.log statement before executing the mutation shows the following for the File Object:

File
lastModified: 1638298756633
lastModifiedDate: Tue Nov 30 2021 13:59:16 GMT-0500 (Eastern Standard Time) {}
name: "equallyodd.pdf"
size: 7318
type: "application/pdf"
webkitRelativePath: ""
[[Prototype]]: File

The other 2 methods I've tried include making the Upload object myself, which would submit the entry with all of the fields filled out, except the file would not be attached or copied over (living nowhere on WP). The other method has been not wrapping the File Object in an array, IE:

    case ACTION_TYPES.updateUploadFieldValue: {
      const { id, fileUpload } = action.fieldValue;
      return [...getOtherFieldValues(id), { id, fileUploadValues: fileUpload }];
    }

This does submit the entry, but completely omits the uploaded file, and the entry does not know that there ever was a file that was supposed to be uploaded with it. Any help is greatly appreciated, thanks!

[neff1337]

@jordanlewis9 Hey! Did you resolve this? Im stuck on the same problem.

[justlevine]

Hey @jordanlewis9,

At a glance, nothing is popping out at me. Only thing I can think of is an issue with a different part of your ApolloClient config or a race condition with your reducer.

If you or @neff1337 are able to share an example reproduction (using the latest versions of WPGraphQL, GF, etc ), I'd be happy to dive in and take a look.