Mapping over query result (nested list) throws "Failed to resolve reference"

[Artur Komaristych]

Hey,

I am currently moving my project over to this library and run into an issue with this query.

query {
  activities {
    nodes {
      id
      title
      duration
    }
  }
}

Here nodes is a list of activities.
The same query using the generated types looks like this:

const activitySelector = selectFromActivityConnection()
  .nodes((t) => t.id.title.duration)
  .toString()

and is correctly executed against my api and returns the correct data.
But when I try to map over these nodes this error is thrown.

Unhandled Runtime Error
Error: Failed to resolve reference 1 to late(function () {
    return _ActivityModel__WEBPACK_IMPORTED_MODULE_9__.ActivityModel;
  })

and points to the .map to be exact.

data.activities.nodes.map(({ id, title, duration }) => {

This is the code from the page.

const activitySelector = selectFromActivityConnection()
  .nodes((t) => t.id.title.duration)
  .toString()

const ActivityViewPage: NextPage<ActivityPageQueryProps> = observer(() => {
  const { loading, error, data, query } = useQuery((store) => {
    return store.queryActivities({}, activitySelector)
  })
  if (error) return <ErrorDisplay error={error} />
  if (!data || loading) return <Loading />

  return (
    <Layout>
      <Form>
        <FormControl type="text" placeholder="Suche" className="mr-sm-2" />
      </Form>
      <Button onClick={query.refetch}>Reload</Button>
      <Table striped bordered hover style={{ marginTop: 5 }}>
        <thead>
          <tr>
            <th>#</th>
            <th>Titel</th>
            <th>Dauer</th>
          </tr>
        </thead>
        <tbody>
          {data.activities.nodes.map(({ id, title, duration }) => {
            return (
              <tr key={id}>
                <td>{id}</td>
                <td>{title}</td>
                <td>{duration}</td>
              </tr>
            )
          })}
        </tbody>
      </Table>
    </Layout>
  )
})

As I am quite new to react, graphql etc. I thought you guys may know that's going on here.

[Iswara Chaitanya]

Can you send a complete minimal replication of the problem? @S0PEX
Perhaps create a temporary public repository on github or some other way?

[Artur Komaristych]

Hey,

I had no time of setting up a special apollo server for this demo but I just dumped my schema and mocked the response, I hope that's good enough.
You can find the demo here: https://github.com/S0PEX/mst-gql-nextjs

Simply start the server inside node ./server/index.js and the web-app with yarn run dev

[Iswara Chaitanya]

Hi @S0PEX
Sorry, I am not able to find the problem with the mocking of the schema... it's difficult to debug around it when the resolvers are not clear...
Are you able to minimize the schema to a basic construct? say, without the edges, just a simple array of activities?

[Artur Komaristych]

Hey, the nodes and edges are auto generated by hotchocolate (an asp. Net core graphql framework).
The issue is that I don't have the source at hand and just consuming.

What's weird is that the query result is fine and works when I am using the old Apollo client.
Or does something look wrong to you?

When I tried mst-gql with the hotchocolate demo today the nodes, edges etc. were handled correctly. I will try to get the source for the api or to get create my own to reproduce the issue.

Thanks for your help so far.

[Artur Komaristych]

Today I had a chat with my college and he mentioned that the GraphQL API node are actually Relay Nodes and that normally the id would be encoded to a unique string identifier ( but in this case a integer was returned ). After we updated the API s that the given types extended the Nodes interface mst-gql was able to generate the correct types and the queries work like a charm.