delegateToSchema returns null

[amityweb]

I just can't figure this out and hoping someone could help...

I have stitched two schemas together and run it's graphql server on localhost to query it. But the query returns null for the data in the second schema and I am not sure why.

I have the following code to stitch to remote schemas together and run a localhost graphql server to serve it. It should add the linked data from the second schema under cmsMetaData in the main Product data. But cmsMetaData is always null.

I think delegateToSchema() returning null but can't figure out why. I have even passed args as id:1 just to be absolutely sure the args will result in data that exists, but it does not get anything.

import { ApolloServer } from 'apollo-server-micro';
import { ApolloServerPluginInlineTraceDisabled, ApolloServerPluginLandingPageLocalDefault } from "apollo-server-core";
import { stitchSchemas } from '@graphql-tools/stitch';
import { delegateToSchema } from '@graphql-tools/delegate';
import { RenameTypes, RenameRootFields } from '@graphql-tools/wrap';

import createRemoteSchema from '../../utils/createRemoteExecutor';

// Configuration for Next.js API Routes
export const config = {
    api: {
        bodyParser: false,
    },
};

// Export as a Next.js API Route
export default async (req, res) => {
    
    // Setup subschema configurations
    const productsSubschema = await createRemoteSchema({
        url: 'https://schema1.com/graphql/'
    });
    
    const cmsSubschema = await createRemoteSchema({
        url: 'https://schema2.com/graphql/',
        transforms: [
            new RenameRootFields(
                (operationName, fieldName, fieldConfig) => `strapi_${fieldName}`,
            ),
            new RenameTypes((name) => `Strapi_${name}`),
        ],
    });
    
    // Build the combined schema and set up the extended schema and resolver
    const schema = stitchSchemas({
        subschemas: [productsSubschema, cmsSubschema],
        typeDefs: `
        extend type Product {
            cmsMetaData: [Strapi_Product]
        }
        `,
        resolvers: {
            Product: {
                cmsMetaData: {
                    selectionSet: `{ id }`,
                    resolve(product, args, context, info) {
                        
                        // Get the data for the extended type from the subschema for Strapi
                        const result =  delegateToSchema({
                            schema: cmsSubschema,
                            operation: 'query',
                            //fieldName: 'strapi_products', // this is the list of all strapi_products and the following args fetch one
                            //args: { filter: { SaleorID: "UHJvZHVjdDoxMjc=" } },
                            fieldName: 'strapi_product', // this is the list of a single strapi_product and the following args fetch one
                            args: { id: 1 } }
                            context,
                            info,
                        });

                        console.log(result); // result is NULL, but strapi_product with id = 1 exists on my local schema as shown below
                        return result;

                    },
                },
            },
        },
    });

    // Set up the GraphQL server
    const apolloServer = new ApolloServer({
        schema,
        plugins: [
            ApolloServerPluginInlineTraceDisabled(),
            ApolloServerPluginLandingPageLocalDefault({ embed: true }),
        ],
    });
    await apolloServer.start();
    const apolloServerHandler = apolloServer.createHandler({
        path: '/api/graphql',
    });

    // Return the GraphQL endpoint
    return apolloServerHandler(req, res);
};

utils/createRemoteExecutor.js is:

import { introspectSchema, wrapSchema } from '@graphql-tools/wrap';
import { print } from 'graphql';

// Builds a remote schema executor function,
// customize any way that you need (auth, headers, etc).
// Expects to recieve an object with "document" and "variable" params,
// and asynchronously returns a JSON response from the remote.
export default async function createRemoteSchema({ url, ...filters }) {
    const executor = async ({ document, variables }) => {
        const query = print(document);
        const fetchResult = await fetch(url, {
            method: 'POST',
            headers: {
                // We can also do Authentication here
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ query, variables }),
        });
        return fetchResult.json();
    };

    return wrapSchema({
        schema: await introspectSchema(executor),
        executor,
        ...filters,
    });
}

The query is:

products(first: 100, channel: "default-channel")
{
    edges
    {
        node
        {
            id
            name        
            cmsMetaData
            {
                Title
                SaleorID
            }
        }
    }
}

The args I use do work on the stitched GraphQL when fetching the second original GraphQL data, for strapi_products, its just the data is not added to the first GraohQL for products, its null.

// Fetching from list strapi_products

query FetchProductBySaleorID
{
	strapi_products(filters: { SaleorID:{ eq: "UHJvZHVjdDoxMjc=" } } )
	{
		data
		{
			id
			attributes
			{
				Title
				SaleorID
			}
		}
	}
}

// Result: 

{
  "data": {
    "strapi_products": {
      "data": [
        {
          "id": "1",
          "attributes": {
            "Title": "My Product 1",
            "SaleorID": "UHJvZHVjdDoxMjc="
          }
        }
      ]
    }
  }
}

// Fetching single from strapi_product

query FetchProduct
{
	strapi_product(id: 1)
	{
		data
		{
			id
			attributes
			{
				Title
				SaleorID
			}
		}
	}
}

// Result

{
  "data": {
    "strapi_product": {
      "data": {
        "id": "1",
        "attributes": {
          "Title": "My Product 1",
          "SaleorID": "UHJvZHVjdDoxMjc="
        }
      }
    }
  }
}

In my api.tsx, which I generate using codegen.yaml, Product contains cmsMetaData as follows, which is of type Strapi_Product:

export type Product = Node & ObjectWithMetadata & {
    __typename?: 'Product';
    ... 
    cmsMetaData?: Maybe<Array<Maybe<Strapi_Product>>>;
    ...
}

Strapi_Product is as follows which contains Title, SaleorID etc.:

export type Strapi_Product = {
    __typename?: 'Strapi_Product';
    SaleorID?: Maybe<Scalars['String']>;
    Title?: Maybe<Scalars['String']>;
    createdAt?: Maybe<Scalars['Strapi_DateTime']>;
    publishedAt?: Maybe<Scalars['Strapi_DateTime']>;
    updatedAt?: Maybe<Scalars['Strapi_DateTime']>;
};

But the date in GraphQL shows null for cmsMetaData as null:

{
  "data": {
    "products": {
      "edges": [
        {
          "node": {
            "id": "UHJvZHVjdDoxMjc=",
            "name": "My Product 1",
            "cmsMetaData": null
          }
        },
        {
          "node": {
            "id": "UHJvZHVjdDoxMjg=",
            "name": "My Product 2",
            "cmsMetaData": null
          }
        }
      ]
    }
  }
}

[yaacovCR]

1. Generally, I would first suggest avoiding delegateToSchema entirely by creating a third subschema with the new fields you need.
2. Try creating a minimal reproduction as a code sandbox and/or GitHub repo. Schemas, types, etc should be pruned to the minimum necessary to show the error,

[amityweb]

Thank you for your reply. Yes good idea to make a minimal application with the code, I shall try to fit it in!

My only question on this is what to use instead of delegateToSchema? All the tutorials online, which are not many, demonstrate using delegateToSchema to stitch two schemas together based on a mutual field (e.g. ID). I can't find any info how to do it without delegateToSchema.

Thanks

[yaacovCR]

https://www.graphql-tools.com/docs/schema-stitching/stitch-combining-schemas

[amityweb]

@yaacovCR

Hi Yaacov

Thanks for the link to the documentation that does not use delegateToSchema. The problem I have with that (and other examples) is I could see no where where the relationship is defined to merge data together. As I need to match Strapi products to Saleor products by Saleor ID, the only example code I can ever find online that shows this is always inside delegateToSchema. So I have stuck to using that for now.

I have created a Git repo with my (next.js) stitching example. It is here https://github.com/amityweb/saleor-strapi-stiching/

I described the issue on the Readme.

I left the herokuapp data sources in there as I could not figure out to reproduce them locally. Its free Heroku so it takes some time to fire up the heroku servers before the Graphql shows.

Do you think its possible to look at the issue? If there is a cost element then happy to discuss.

Thanks a lot

[yaacovCR]

https://www.graphql-tools.com/docs/schema-stitching/stitch-type-merging

[amityweb]

I have started to use Stepzen and got all this working with them now, they were really helpful in overcoming some issues too, so all working with Stepzen instead of GraphQL.