GraphQL query collection records (relationship)

[chladog]

I have created new relationship graphql query for easy retrieval of relationship objects based on slug and id (the basic information we get from richtext editor with default depth).
This solves the problem between dynamic nature of relationship fields and explicit grahpql collection queries.

For example we add a relationship in richtext and get this payload:

{
    "type": "relationship",
    "value": {
    "id": "61ff57132d079cf8b606226a"
    },
    "relationTo": "pages",
}

but it can have relationTo any collection, like "posts" for example.
With default queries you would have to switch case slugs and choose query per collection on client side, which is not very maintainable especially when editing/adding new collections.

Following query finds record in collection based on slug and resolves type dynamically and return the union type of all collections.

... config,
graphQL: {
    queries: (GraphQL, payload) => {
      const collections = Object.values(payload.collections) as Collection[];
      const collectionTypes = collections.map(
        (collection) =>
          (collection as Collection & { graphQL: any }).graphQL.type
      );
      return {
        FromCollection: {
          type: new GraphQL.GraphQLObjectType({
            name: "FromCollection",
            fields: {
              item: {
                type: new GraphQL.GraphQLUnionType({
                  name: "Item",
                  types: collectionTypes,
                  resolveType: (value) => {
                    return (
                      collections.find(
                        (collection) =>
                          collection.config.slug === value.collection
                      ) as Collection & { graphQL: any }
                    ).graphQL.type;
                  },
                }),
              },
            },
          }),
          args: {
            id: { type: GraphQL.GraphQLString },
            slug: { type: GraphQL.GraphQLString },
            locale: { type: GraphQL.GraphQLString },
            fallbackLocale: { type: GraphQL.GraphQLString },
          },
          resolve: async (
            _,
            args: {
              id: string;
              slug: string;
              locale: string;
              fallbackLocale: string;
            },
            context
          ) => {
            if (args.locale) context.req.locale = args.locale;
            if (args.fallbackLocale)
              context.req.fallbackLocale = args.fallbackLocale;

            const result = await payload.findByID({
              id: args.id,
              collection: args.slug,
              req: context.req,
              locale: context.req.locale,
              fallbackLocale: context.req.fallbackLocale,
            });
            return { item: { collection: args.slug, ...result } };
          },
        },
      };
    },
  }

Then can be used like:

query {
   FromCollection(slug: "pages", id: "61ff57132d079cf8b606226a") {
    item{
      ... on Page {
        __typename
        title
        content
      }
      ... on Post {
        ...PostFragment
      }
    }
  }
}

Might be usefull for different use cases when collection slug is dynamic as well.

[wkentdag]

@chladog thanks for sharing this snippet! I modified it to make a couple of custom queries. However I noticed that if any of your selections on item included nested props (like image { url } they get returned as null, even though the data is present in the API query. Have you managed to get it working in that scenario?