Add Relay example with TypeScript using Next.js compiler

[tundera]

Bug

• Related issues linked using fixes #number
• Integration tests added
• Errors have helpful link attached, see contributing.md

Feature

• Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
• Related issues linked using fixes #number
• Integration tests added
• Documentation added
• Telemetry added. In case of a feature if it's used or not.
• Errors have helpful link attached, see contributing.md

Documentation / Examples

• Make sure the linting passes by running pnpm lint
• The examples guidelines are followed from our contributing doc

[balazsorban44]

Thanks, I see we already have a relay example here: https://github.com/vercel/next.js/tree/canary/examples/with-relay-modern should we upgrade that one instead? We can also rename to with-relay, just make sure to leave a README in the old location to point to the new one. 👍

[tundera]

@balazsorban44 Thanks for the feedback. I'd like to update that old with-relay-modern example, but it's making requests to this GraphQL API which seems to be broken for certain queries. For example, this is the query that's being executed in the current example in with-relay-modern:

{
  viewer {
    allBlogPosts(first: 10, orderBy: {createdAt: desc}) {
      edges {
        node {
          id
          title
        }
      }
    }
  }
}

Running that returns an error message:

{
  "errors": [
    {
      "message": "Error occurred during query execution:\nConnectorError(ConnectorError { user_facing_error: None, kind: QueryError(Error { kind: Db, cause: Some(DbError { severity: \"ERROR\", parsed_severity: Some(Error), code: SqlState(\"42P01\"), message: \"relation \\\"public.BlogPost\\\" does not exist\", detail: None, hint: None, position: Some(Original(164)), where_: None, schema: None, table: None, column: None, datatype: None, constraint: None, file: Some(\"parse_relation.c\"), line: Some(1173), routine: Some(\"parserOpenTable\") }) }) })",
      "locations": [
        {
          "line": 4,
          "column": 7
        }
      ],
      "path": [
        "viewer",
        "allBlogPosts",
        "edges"
      ]
    }
  ],
  "data": {
    "viewer": {
      "allBlogPosts": {
        "edges": null
      }
    }
  }
}

Since that example doesn't deploy to Vercel either, I'm not sure it provides a whole lot of value in its current state. The new example I've added here as a replacement uses the GitHub GraphQL API which seems like a more reliable option and less likely to break. I'll add a reference to the README of with-relay-modern to refer to this new example. Let me know if that works or if you'd like to go in a different direction. Thanks!

[balazsorban44]

I realized there is already PR for this: #33892

[leerob]

#33892 (comment)