Gatsby: Field with `resolve` (using custom Node interface) doesn't appear in filtering

[LekoArts]

Description

When adding a resolve on a field that extends a custom Interface, the field isn't accessible for filtering:

https://github.com/LekoArts/gatsby-themes/blob/362ca8c0df0645bf5509c65f9151d50f069d1f99/themes/gatsby-theme-emma-core/gatsby-node.js#L79

With the title - which comes from the frontmatter - it works:

Steps to reproduce

Clone https://github.com/LekoArts/gatsby-themes/tree/362ca8c0df0645bf5509c65f9151d50f069d1f99 and run yarn workspace emma develop and see the individual project pages not working.

Expected result

Filterable by slug.

---

As per Slack discussion with @freiksenet

[freiksenet]

@stefanprobst At first I thought it should be solvable by your PR, but the slug doesn't materialize on mdxProject either. Not sure what's wrong.

[stefanprobst]

yes this is the sort of issue that #16679 was supposed to fix. it doesn't?

[stefanprobst]

ok so this is what i get with #16679 on the theme-core/emma branch:

[LekoArts]

👍🏻

But I shouldn’t expect this to be merged soon, right? I'm fine with using something else as filter in the meantime

[stefanprobst]

@LekoArts What you can do in the meantime is put the resolver on the interface.
You could either use buildInterfaceType for Project, similar to buildObjectType for MdxProject. Or preferably just wrap the slugify helper function in a custom fieldextension and use it on the Project.slug field:

actions.createFieldExtension({
  name: `slugify`,
  extend() {
    return {
      resolve(source) {
        return slugify(source);
      },
    };
  },
});

and then:

actions.createTypes(`
  interface Project @nodeInterface {
    id: ID!
    slug: String! @slugify
  }
`)

[LekoArts]

Ah, good to know, thanks! Will try that tomorrow

[LekoArts]

Following your instructions throws this error:

There was an error loading your projects or pages Cannot return null for non-nullable field MdxProject.slug.



  Error: Cannot return null for non-nullable field MdxProject.slug.

  - Array.forEach

  - index.js:83 forEach
    [gatsby-themes]/[iterall]/index.js:83:25

[stefanprobst]

hmm, this works for me:
https://github.com/stefanprobst/gatsby-themes/commit/24651ee4c0e1aa5c714625d1dca747e2742802a1

[LekoArts]

return {
  resolve: slugify,
}

And

return {
  resolve(source) {
    return slugify(source);
  },
}

Are different though 😆 Is this the reason?

[stefanprobst]

that shouldn't make a difference. do you have the stuff that errors committed somewhere? I could take a look later today.

btw you could also wrap the mdx passthrough stuff in an extension so you can write all typedefs in plain sdl: https://github.com/stefanprobst/gatsby-themes/commit/696f165c55552162d2a12160ea4f5628b51ceb88

[LekoArts]

Ahh, I know what you didn't change but I changed:

https://github.com/stefanprobst/gatsby-themes/blob/696f165c55552162d2a12160ea4f5628b51ceb88/themes/gatsby-theme-emma-core/src/templates/project-query.tsx#L7-L8

Change the id here to slug. As the initial problem was that I can't use that for filtering, and in your example you placed the slugify somewhere else but don't use the slug for filtering.

[stefanprobst]

filtering by slug should work fine now: https://github.com/stefanprobst/gatsby-themes/commit/89aad2e6ee3f6cd139f64923a9f13a32e82e319f just to clarify: this does or still doesn't work for you?

[LekoArts]

Reviewing your file in more detail, I also didn't place the @slugify on the MdxProject type as your snippet only showed the Project nodeInterface. So if it works for you, it should do so for me, too. I'll check.

[LekoArts]

Yeah, works now: https://github.com/LekoArts/gatsby-themes/commit/0e8d3336aad527dac37e930b3a8552bb3226ce2f

Thanks!