docs.webiny.com icon indicating copy to clipboard operation
docs.webiny.com copied to clipboard

"Extend the GraphQL API" example is outdated and does not work

Open AlekseyMalakhov opened this issue 2 years ago • 2 comments

I tried to repeat example Extend the GraphQL API but it was impossible to make it run due to it's very much outdated.

  1. There is no apps/api/headlessCMS/src/plugins/posts.ts route. It should probably be changed to apps/api/graphql/src/plugins/posts.ts.

  2. import { CmsEntry, CmsEntryMeta } from "@webiny/api-headless-cms/types"; does not work - TS says:

Module '"@webiny/api-headless-cms/types"' has no exported member 'CmsContentEntry'.

Module '"@webiny/api-headless-cms/types"' has no exported member 'CmsContentEntryMeta'.

  1. listMyPosts has TS error:

Type '(: any, args: { id: string; }, context: Context) => Promise<ListResponse<CmsContentEntry, CmsContentEntryMeta>>' is not assignable to type 'Resolvers<Context>'. Type '(: any, args: { id: string; }, context: Context) => Promise<ListResponse<CmsContentEntry, CmsContentEntryMeta>>' is not assignable to type 'GraphQLFieldResolver<any, Record<string, any>, Context>'. Types of parameters 'args' and 'args' are incompatible. Property 'id' is missing in type 'Record<string, any>' but required in type '{ id: string; }'.ts(2322)

  1. const model = await cms.models.get("post"); has the error

Property 'models' does not exist on type 'HeadlessCms'.

Probably it has to be changed to const model = await cms.getModel("post");

I reducedlistMyPosts resolver to

listMyPosts: async () => {
        return new ListResponse<string, string>(["hello world"]);
}

and used // @ts-nocheck just to be able to run the file. But after refreshing the page I still got an error in the browser Network console

{ "type": "Error", "name": "Error", "message": "Unknown type "PostListResponse". Did you mean "FbFormListResponse", "PbMenuListResponse", "PbPageListResponse", "FmFileListResponse", or "FmTagsListResponse"?", "stack": "Error: Unknown type "PostListResponse". Did you mean "FbFormListResponse", "PbMenuListResponse", "PbPageListResponse", "FmFileListResponse", or "FmTagsListResponse"?\n at assertValidSDLExtension (/var/task/webpack:/check-webiny2/node_modules/graphql/validation/validate.mjs:103:1)\n at extendSchema (/var/task/webpack:/check-webiny2/node_modules/graphql/utilities/extendSchema.mjs:49:28)\n at buildSchemaFromTypeDefinitions (/var/task/webpack:/check-webiny2/dist/schema/src/buildSchemaFromTypeDefinitions.js:14:30)\n at makeExecutableSchema (/var/task/webpack:/check-webiny2/dist/schema/src/makeExecutableSchema.js:107:32)\n at createGraphQLSchema (/var/task/webpack:/check-webiny2/node_modules/@webiny/handler-graphql/createGraphQLSchema.js:63:1)\n at Object. (/var/task/webpack:/check-webiny2/node_modules/@webiny/handler-graphql/createGraphQLHandler.js:73:1)\n at preHandlerCallback (/var/task/webpack:/check-webiny2/node_modules/fastify/lib/handleRequest.js:128:1)\n at next (/var/task/webpack:/check-webiny2/node_modules/fastify/lib/hooks.js:168:1)\n at handleResolve (/var/task/webpack:/check-webiny2/node_modules/fastify/lib/hooks.js:185:1)\n at processTicksAndRejections (internal/process/task_queues.js:95:5)" }

AlekseyMalakhov avatar Aug 31 '23 15:08 AlekseyMalakhov

I reduced the code to

// @ts-nocheck
import { GraphQLSchemaPlugin } from "@webiny/handler-graphql/plugins";
import { Context } from "~/types";

export default [
    new GraphQLSchemaPlugin<Context>({
        typeDefs: /* GraphQL */ `
            extend type Query {
                listMyPosts: String
            }
        `,
        resolvers: {
            Query: {
                listMyPosts: () => "hello world"
            }
        }
    })
];

When I make requests using Thunder Client in VSCode i get

"Cannot query field "listMyPosts" on type "Query". Did you mean "listPosts", "listHouses", or "listStreets"?",

AlekseyMalakhov avatar Sep 01 '23 08:09 AlekseyMalakhov

I managed to get response. It appeared to be not on the Headless CMS - Manage API URL /cms/manage/en-US where the rest of Posts requests are. Unexpectedly it appeared to be on the Main API /graphql

AlekseyMalakhov avatar Sep 01 '23 14:09 AlekseyMalakhov