Can't use custom fields when using relation widget

[guirreri]

Description

It appears that the only way to do a custom, dynamic, many-to-many relationship with Gridsome and Netlify CMS is via the Relation Widget. However, when dynamically populating the relation widget, you can not use any extra custom-created fields in the data - only ID and Title. If any other field is used in the Graph QL query, a build error occurs.

Example Git

https://github.com/guirreri/gridsome-netlify-cms-issue

The project example is meant to show a many-to-many relationship between dynamically Netlify CMS-created Blogs and Posts. i.e. a user can create many Blogs and each Post can be assigned to one or many Blogs.

To Reproduce

1. Install Gridsome CLI globally
2. Clone the repository and run yarn install
3. Run gridsome develop
4. See build error

When using only id and title in Blog.vue the build works, but after I added the excerpt field, which exists in the each of the /blogs/*.md files, the following build error occurs.

 ERROR  Failed to compile with 1 errors                                                                                                                                          3:54:10 PM

 error  in ./src/templates/Blog.vue?vue&type=custom&index=0&blockType=page-query

Module build failed (from ./node_modules/gridsome/lib/plugins/vue-components/lib/loaders/page-query.js):
Error: Cannot query field "excerpt" on type "Blog".

GraphQL request:20:5
19 |     title
20 |     excerpt
   |     ^
21 |     belongsTo {
    at Object.module.exports (/Users/cguirreri/workspaces/guirreri/gridsome-netlify-cms-issue/node_modules/gridsome/lib/plugins/vue-components/lib/loaders/page-query.js:29:23)

 @ ./src/templates/Blog.vue?vue&type=custom&index=0&blockType=page-query 1:0-330 1:346-349 1:351-678 1:351-678
 @ ./src/templates/Blog.vue
 @ ./src/.temp/routes.js
 @ ./node_modules/gridsome/app/router.js
 @ ./node_modules/gridsome/app/entry.sockjs.js
 @ multi webpack/hot/dev-server webpack-hot-middleware/client?name=app&reload=true&noInfo=true ./node_modules/gridsome/app/entry.client.js ./node_modules/gridsome/app/entry.sockjs.js

[tobymarsden]

@guirreri That error seems to be because Gridsome isn't including your excerpt field in the schema. Adding 'blogs' as a separate @gridsome/source-filesystem plugin instance in gridsome.config.js instead of using create: true from 'posts' made it show up for me in your test repo. Might be worth asking in the Gridsome Discord about this.

Note that Netlify CMS won't be getting your fields from the Gridsome GraphQL schema -- it'll be getting them from your markdown files directly, so this error shouldn't be affecting things on the Netlify CMS side.

[guirreri]

@guirreri That error seems to be because Gridsome isn't including your excerpt field in the schema. Adding 'blogs' as a separate @gridsome/source-filesystem plugin instance in gridsome.config.js instead of using create: true from 'posts' made it show up for me in your test repo.

While this does build (tested here https://github.com/guirreri/gridsome-netlify-cms-issue/commits/fix/blogs-posts-relationship), I get the following warning and when visiting a Blog.vue the belongsTo query returns no Posts.

$ gridsome develop
Gridsome v0.7.12

Initializing plugins...
Blog > Failed to add node: Duplicate key for property path: /blog-test/
Blog > Failed to add node: Duplicate key for property path: /new-blog-test/
Load sources - 0.06s
Create GraphQL schema - 0.05s
Create pages and templates - 0.04s
Generate temporary code - 0.02s
Bootstrap finish - 1.24s

When removing the other create: true in gridsome.config.js (on the Post entry for @gridsome/source-filesystem, in the refs: { blogs } key), I no longer get the warning, but again, no Posts exist on the belongsTo query in Blog.vue.

Same result when removing the create: true on Blogs in config.yml.

Is there something else I'm missing? I'm not quite sure how each of these create keys work.

[tobymarsden]

@guirreri I recommend asking in the Gridsome Discord channel as this bit of the issue isn't related to Netlify CMS or this plugin. I'm closing for now, but if you solve your Gridsome GraphQL issues and see a problem with the plugin integration with Netlify CMS please do reopen!