GraphQL Hot Chocolate Stiching

Question

I have 2 GraphQL servers + 1 that should stick them into one. I cannot get my head around the Stitching.graphql file and how it works. I tried the tutorials on the Hot Chocolate website and webinars but still no luck.

1. Pokemon - is working on its own

schema {
  query: PokemonQuery
}

type PokemonQuery {
  pokemon: [PokemonModel!]!
}

type PokemonModel {
  id: Int!
  pokemon: String!
  species_id: Int!
  height: Float!
  weight: Float!
  base_experience: Int!
  type_1: String!
  type_2: String!
  hp: Int!
  attack: Int!
  defense: Int!
  special_attack: Int!
  special_defense: Int!
  speed: Int!
  color_1: String!
  color_2: String!
  color_f: String!
  egg_group_1: String!
  egg_group_2: String!
  url_icon: String!
  generation_id: Int!
  url_image: String!
}

2. Pokemon Images - is working on its own

type Query {
  pokemonImage: [PokemonImage!]!
  pokemonImageById(id: String!): PokemonImage!
}

type PokemonImage {
  id: String!
  url: String!
}

I'm trying to stitch those 2 into one.

// Pokemon
builder.Services.AddHttpClient(Pokemon, c => c.BaseAddress = new Uri("http://localhost:7071/api/graphql"));

// Pokemon image
builder.Services.AddHttpClient(PokemonImage, c => c.BaseAddress = new Uri("http://localhost:7074/api/graphql"));

builder
    .AddGraphQLFunction()
    .AddRemoteSchema(Pokemon, ignoreRootTypes: true)
    .AddRemoteSchema(PokemonImage, ignoreRootTypes: true)
    .AddTypeExtensionsFromString("type Query { }")
    .AddTypeExtensionsFromFile("Stitching.graphql");

Stitching.graphql

type PokemonMasterDTO {
    id : String!
}

extend type Query {
  pokemonTest: PokemonMasterDTO! @delegate(schema: "PokemonImage", path: "pokemonImageById(id: $fields:id)")
}


schema {
    query: Query
}
 

I cannot figure it out :(

{
  "errors": [
    {
      "message": "A field with the name `id` does not exist.",
      "locations": [
        {
          "line": 2,
          "column": 3
        }
      ],
      "path": [
        "pokemonTest"
      ],
      "extensions": {
        "code": "STITCHING_FLD_NOT_DEFINED"
      }
    }
  ]
}

What I would love to have is PokemonModel + PokemonImage

type PokemonMasterDTO {
    id: Int!
  pokemon: String!
  //... rest of the props from PokemonModel 

  //PokemonImage
  url: String!
}

Answer 1

I have been working with graphql schema stitching in .net 8 using Hot Chocolate.

I usually stitch my schema using the 1st graphql server generated schema and so on, which is incorrect in your case.

extend type Query {
 #Schema stitch from 1st graphql server. Suppose if 1st graphql server schema is pokemonSchema.graphql
 pokemon: [PokemonModel!]! @delegate(schema: "pokemonSchema", path: "pokemon")

 #Schema stitch from 2nd graphql server. Suppose 2nd graphql schema name is pokemonSchema2.graphql
 pokemonImage: [PokemonImage!]! @delegate(schema: "pokemonSchema2", path: "pokemonImage")

 # query where parameters are required is defined in stitched as -
pokemonImageById(id: String!): PokemonImage! @delegate(schema: "pokemonSchema2", path: "pokemonImageById(id: $arguments: id)")
}

Now, when you run this stitched graphql server, you can run PokemonModel + PokemonImage together in your banana cake pop as -

{
 pokemon{
  height
  weight
  attack
  defense
  .....
 }
 pokemonImage{
  id
  url
 }
}

Optionally, you can also write your final schema in your finalSchema.graphql file by adding this in your startup.cs -

var resolver = ActivatorUtilities.GetServiceOrCreateInstance<IRequestExecutorResolver>(app.ApplicationServices);    
IRequestExecutor executor = resolver.GetRequestExecutorAsync().AsTask().Result;
                ISchema schema = executor.Schema;
                File.WriteAllText("finalSchema.graphql", schema.ToString());

I hope this resolve your error for schema stitching provided that you have installed necessary dependencies and added your remote graphql connections successfully.