gridsome-firebase-starter icon indicating copy to clipboard operation
gridsome-firebase-starter copied to clipboard

Graphql when running `gridsome develop`

Open gianpaj opened this issue 4 years ago • 8 comments

$ yarn start
 ERROR  Failed to compile with 1 errors                                                   06:46:55

 error  in ./src/pages/Index.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 "name" on type "FireTopics".

GraphQL request:119:9
118 |         id
119 |         name
    |         ^
120 |         image (width: 300, height: 200)
gridsome info

  System:
    OS: macOS 10.15.3
    CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
  Binaries:
    Node: 13.11.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.13.7 - /usr/local/bin/npm
  Browsers:
    Chrome: 80.0.3987.149
    Firefox: 74.0
    Safari: 13.0.5
  npmPackages:
    gridsome: ^0.7.12 => 0.7.13
    gridsome-plugin-tailwindcss: ^2.2.30 => 2.2.43
    gridsome-source-firestore: ^1.1.12 => 1.1.12

I didn't change the gridsome.config.js file and I created the collections on Firestore:

Screenshot 2020-03-31 at 06 52 41

gianpaj avatar Mar 31 '20 05:03 gianpaj

Hi, so just to check are you able to query the id field? Just to check that data actually comes in.

On Tue, 31 Mar 2020, 07:53 Gianfrancø Palumbo, [email protected] wrote:

ERROR Failed to compile with 1 errors 06:46:55

error in ./src/pages/Index.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 "name" on type "FireTopics".

GraphQL request:119:9 118 | id 119 | name | ^ 120 | image (width: 300, height: 200)

gridsome info

System: OS: macOS 10.15.3 CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz Binaries: Node: 13.11.0 - /usr/local/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.13.7 - /usr/local/bin/npm Browsers: Chrome: 80.0.3987.149 Firefox: 74.0 Safari: 13.0.5 npmPackages: gridsome: ^0.7.12 => 0.7.13 gridsome-plugin-tailwindcss: ^2.2.30 => 2.2.43 gridsome-source-firestore: ^1.1.12 => 1.1.12

I didn't change the gridsome.config.js file and I created the collections on Firestore:

[image: Screenshot 2020-03-31 at 06 52 41] https://user-images.githubusercontent.com/899175/77991593-41e49780-731c-11ea-9f80-7d097ea21728.png

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/u12206050/gridsome-firebase-starter/issues/11, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABSVMWTWBVJFK2A7KNF423TRKGAM7ANCNFSM4LXID5BA .

u12206050 avatar Mar 31 '20 06:03 u12206050

yes. in that case works. I have remove all the other fields in all the templates as in the Index.vue file

As soon as I add the name field into the query for allFireTopics in the Index.vue, I get that error:

An error occurred while executing query for src/pages/Index.vue

Error: Cannot query field "name" on type "FireTopics".

GraphQL request:6:9
5 |         id
6 |         name
  |         ^
7 |       }

Same error in the GraphQL Playground http://localhost:8080/___explore:

{
  "error": {
    "errors": [
      {
        "message": "Cannot query field \"name\" on type \"FireTopics\".",
        "stringified": "Cannot query field \"name\" on type \"FireTopics\".\n\nGraphQL request:6:9\n5 |         id\n6 |         name\n  |         ^\n7 |       }"
      }
    ]
  }
}

for

query Topics {
  allFireTopics {
    edges {
      node {
        id
        name
        # image (width: 300, height: 200)
        # path
        # posts: belongsTo {
        #   count: totalCount
        # }
      }
    }
  }
}

Docs: Screenshot 2020-03-31 at 16 00 22

gianpaj avatar Mar 31 '20 14:03 gianpaj

What about the other fields, if you ignore name and try image, does that field work?

u12206050 avatar Mar 31 '20 19:03 u12206050

okay.. i don't what the hell happened. but not the world is spinning the right way and it works 😂

cheers. for the troubleshooting & nice OSS library :)

gianpaj avatar Apr 01 '20 08:04 gianpaj

Actually it looks like it's related to the data on Firestore.

Could you please provide an example of what fields (and its type) should each Document have for?

  • authors
  • posts
  • tags
  • topics

gianpaj avatar Apr 01 '20 08:04 gianpaj

Authors fname: string image: string

Posts author: reference title: string excerpt: string body: string image: string tags: array topic: reference

Tags name: string

Topics name: string info: string image: string

u12206050 avatar Apr 01 '20 08:04 u12206050

Have you been able to solve this? Can you close it if you did?

u12206050 avatar Apr 06 '20 07:04 u12206050

Found the issue from above. The code doesn't handle an empty post collection. So if there are no posts found, it errors on pulling the records. Additionally, you need to have the status (String) field in the posts collection set to '1' to return the posts within the collection, as filtered within the gridsome.config.js.

Grateful for the work @u12206050 - experimenting with incorporating gridsome and firebase on a new project. Appreciate the work on providing a template!

justinleapline avatar Jul 03 '20 21:07 justinleapline