@relay_test_operation fragment query doesn't work as expected.

[bradmk-1]

originally brought to GraphQL discord, but nobody seems to understand why there so wondering if anybody else can shed light on this.

Getting an error related to a missing fragment with the below test setup. The query works fine when not used in a test setting and hydrates the component with the result, but in my test rig, I get:

Error: Uncaught [Invariant Violation: Relay: Expected to receive an object where ...FileUpload_files was spread, but the fragment reference was not found. This is most likely the result of: - Forgetting to spread FileUpload_files in usePaginationFragment()'s parent's fragment. - Conditionally fetching FileUpload_files but unconditionally passing a fragment reference prop to usePaginationFragment().

Test setup looks like:

const testQuery = graphql`
  query fileUploadTestQuery(
    $first: Int
    $after: String
    $filter: FileUploadFilter
  ) @relay_test_operation {
    ...FileUpload_files
      @arguments(first: $first, after: $after, filter: $filter)
  }
`;

describe("File Upload Intergration", () => {
  const TestRenderer = () => {
    const data = useLazyLoadQuery(testQuery, {
      first: 20,
      after: null,
      filter: null,
    });

    console.log(data);
    return <FileUpload files={data.bank} />;
  };


const filesFragment = graphql`
  fragment FileUpload_files on Query
  @argumentDefinitions(
    first: { type: "Int", defaultValue: 20 }
    after: { type: "String", defaultValue: null }
    filter: { type: "FileUploadFilter", defaultValue: null }
  )
  @refetchable(queryName: "FileUploadPaginationQuery") {
    bank {
      fileUploads(first: $first, after: $after, filter: $filter)
        @connection(key: "FileUpload_fileUploads") {
        edges {
          __typename
        }
        ...FileUploadTable_fileDetails
      }
    }
  }
`;

The filesFragment is consumed by a usePaginationFragment, which I'm unsure makes a difference here since the only difference would be the connection and argument fields.

[tobias-tengler]

You need to pass just data to your component through the files prop, as your fragment is on Query and not on whatever bank returns.

[bradmk-1]

You need to pass just data to your component through the files prop, as your fragment is on Query and not on whatever bank returns.

I've tried this also, however I then get:

Warning: RelayModernSelector: Expected object to contain data for fragment `FileUpload_files`, got `{"files":{"__fragments":{"FileUpload_files":{"after":null,"filter":null,"first":20}},"__id":"client:root","__fragmentOwner":{"identifier":"c19933610e4f7c6eeb5550aa3471ca25{\"after\":null,\"filter\":null,\"first\":20}","node":{"fragment":{"argumentDefinitions":[{"defaultValue":null,"kind":"LocalArgument","name":"after"},{"defaultValue":null,"kind":"LocalArgument","name":"filter"},{"defaultValue":null,"kind":"LocalArgument","name":"first"}],"kind":"Fragment","metadata":null,"name":"fileUploadTes…`. Make sure that the parent operation/fragment included fragment `...FileUpload_files` without `@relay(mask: false)`.

Suggesting my fragment isn't spread, which isn't the case - any idea?