GraphQL Error: Cannot query field "userSummary"

// templates/project.js

export const query = graphql`
  query ProjectTemplateQuery($id: String!) {
    sampleProject: sanitySampleProject(id: { eq: $id }) {
...
      projectSummary {
        userSummary {
          _rawUserContent
        }
        problemSummary {
          _rawProblemContent
        }
        solutionSummary {
          _rawSolutionContent
        }
        tldr {
          _rawTldrContent
        }
      }
...
    }
  }
`;

There was an error in your GraphQL query:

Cannot query field "userSummary" on type "SanityProblemSummaryOrSolutionSummaryOrTldrOrUserSummary".

...

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "SanityProblemSummaryOrSolutionSummaryOrTldrOrUserSummary":

query ProjectTemplateQuery {
    sampleProject: SampleProject(id: "791d011b-71ab-4a17-96e7-bd442663002e" ) {
      _id
      publishedAt
      categories {
        _id
        title
      }
      methods {
        _id
        name
        description
      }
      relatedProjects {
        _id
        title
        mainImage {
          asset {
            _id
          }
          alt
        }
        slug {
          current
        }
      }
      mainImage {
        crop {
          _key
          _type
          top
          bottom
          left
          right
        }
        hotspot {
          _key
          _type
          x
          y
          height
          width
        }
        asset {
          _id
        }
        alt
      }
      title
      excerptRaw
      slug {
        current
      }
      myRole
      client
      startedAt
      endedAt
      devices {
        _id
        name
        image {
          asset {
            _id
            }
          alt
          }
        }
      projectSummary {
        __typename
      }
      bodyRaw
      members {
        _key
        person {
          image {
            crop {
              _key
              _type
              top
              bottom
              left
              right
            }
            hotspot {
              _key
              _type
              x
              y
              height
              width
            }
            asset {
              _id
            }
          }
          name
        }
        roles
      }
    }
  }

projectSummary {
        __typename
        ... on ProblemSummary {
          _type
          _key
          problemContentRaw
        }
        ... on SolutionSummary {
          _type
          _key
          solutionContentRaw
        }
        ... on Tldr {
          _type
          _key
          tldrContentRaw
        }
        ... on UserSummary {
          _type
          _key
          userContentRaw
        }
      }

...
      projectSummary {
        ... on SanityProblemSummary {
          _type
          _key
          _rawProblemContent
        }
        ... on SanitySolutionSummary {
          _type
          _key
          _rawSolutionContent
        }
        ... on SanityTldr {
          _type
          _key
          _rawTldrContent
        }
        ... on SanityUserSummary {
          _type
          _key
          _rawUserContent
        }
      }
...

function ProjectSummaryChecker(projectSummaryItem) {
  const summaryItemType = projectSummaryItem;
  let output = '';

  switch (summaryItemType) {
    case 'backgroundSummary':
      output = <BlockContent blocks={projectSummaryItem.backgroundContent || []} />
      break;
    case 'userSummary':
      output = <BlockContent blocks={projectSummaryItem.userContent || []}/>
      break;
    case 'problemSummary':
      output = <BlockContent blocks={projectSummaryItem.problemContent || []}/>
      break;
    case 'solutionSummary':
      output = <BlockContent blocks={projectSummaryItem.solutionContent || []}/>
      break;
    case 'tldr':
      output = <BlockContent blocks={projectSummaryItem.tldrContent || []}/>
      break;
    default:
      output = `Nothing in ProjectSummary found!`
      break;
  }
  return (
    `<section key=${projectSummaryItem}>${output}</section>`
  )
}


function Project(props) {
  const { _rawBody, _rawExcerpt, projectSummary, title, myRole, client, devices, startedAt, endedAt, categories, mainImage, members, publishedAt, relatedProjects } = props;
  const monthAndYearRange = projectMonthandYearRange(startedAt, endedAt);
  const projectSummaryItem = projectSummary.children;
  return (
...
        <main className={styles.mainContent}>
          <div>{projectSummary.map(ProjectSummaryChecker(projectSummaryItem))}</div>
          {_rawBody && <BlockContent blocks={_rawBody || []} />}
        </main>
...
  )
};

export default Project;

<section key=undefined>Nothing in ProjectSummary found!</section> is not a function

./src/components/project.js:138
Open in Editor
  136 |         </section>
  137 |         <main className={styles.mainContent}>
> 138 |           <div>{projectSummary.map(ProjectSummaryChecker(projectSummaryItem))}</div>
      |                               ^
  139 |           {_rawBody && <BlockContent blocks={_rawBody || []} />}
  140 |         </main>
  141 |         {relatedProjects && relatedProjects.length > 0 && (