PayloadCMS GraphQL nested fields are null

Question

I'm trying to use the PayloadCMS GraphQL plugin but I'm having issues with the type: "relationship" fields always being null, regardless of what I try. I'm just trying to build a really simple blog, nothing fancy. I asked in the PayloadCMS Discord channel but didn't get a reply.

Here's my config:

export default buildConfig({
  serverURL: "http://localhost:4000",
  admin: {
    user: Users.slug,
  },
  // cors: "*",
  collections: [Users, Posts, Media],
  typescript: {
    outputFile: path.resolve(__dirname, "payload-types.ts"),
  },
  graphQL: {
    schemaOutputFile: path.resolve(__dirname, "schema.graphql"),
  },
});

To keep it simple, I have 3 models:

// Posts.tsx

const Posts: CollectionConfig = {
  slug: "posts",
  // ...
  fields: [
    // ...
    {
      name: "title",
      type: "text",
    },
    {
      name: "author",
      type: "relationship",
      relationTo: "users",
    },
    {
      name: "backgroundImage",
      label: "backgroundImage",
      type: "upload",
      relationTo: "media",
      maxDepth: 2,
    },
    // ...
  ],
};

// Users.tsx

const Users: CollectionConfig = {
  slug: "users",
  auth: {
    depth: 2,
  },
  admin: {
    useAsTitle: "email",
  },
  fields: [
    // ...
    {
      name: "name",
      type: "text",
    },
    // ...
  ],
};

// Media.tsx

const Media: CollectionConfig = {
  slug: "media",
  fields: [
    {
      name: "alt",
      type: "text",
    },
  ],
  upload: {
    staticURL: "/media",
    staticDir: "media",
    imageSizes: [
      {
        name: "thumbnail",
        width: 400,
        height: 300,
        position: "centre",
      },
      {
        name: "card",
        width: 768,
        height: 1024,
        position: "centre",
      },
      {
        name: "tablet",
        width: 1024,
        // By specifying `null` or leaving a height undefined,
        // the image will be sized to a certain width,
        // but it will retain its original aspect ratio
        // and calculate a height automatically.
        height: null,
        position: "centre",
      },
    ],
    adminThumbnail: "thumbnail",
    mimeTypes: ["image/*"],
  },
};

I created a seed file which works well: when I log into the /admin portal I can see all my data, uploads included, and everything looks like its been done manually. I tested creating manually and it does look correct (See below).

Where it gets weird is that the GraphQL playground works fine when I ask for nested and related fields (see below)

but when I try and query it from my front-end app, author and backgroundImage fields are null, despite the query being exactly the same:

{
  __typename: 'Post',
  id: '638522f471c0c4aaced74144',
  title: 'Necessitatibus distinctio suscipit iure eum architecto aspernatur temporibus.',
  backgroundImage: null,
  author: null
}

This also happens from Postman, which leads me to believe there is something I need to send along (I've tried auth tokens and cookies) that I'm missing. I tried adding custom resolvers for { Query: { Author: () => {} } } and a ton more, but the docs are really lacking in the GraphQL department so I'm flying blind and just guessing.

Any help on this would be greatly appreciated, otherwise I'll have to restart with RESTful queries which will defeat the point of learning GraphQL and Payload.

Happy to provide any more info

Answer 1

Answer: it was because my Users collection restricted read access to admins. Setting the Users.access to:

  // access: {
  //   read: Collection.isAdminOrSelf, // blocks access to nested graphql
  // },
  access: {
    read: () => true, // allows access
  },