How to access fetched data through graphql query?

Question

The code blow fetches an array of data from the server

fetch('/api/collections/get/posts?token=xxtokenxx', {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
        filter: {published:true},
    })
})
.then(res=>res.json())
.then(res => console.log(res));

I need to store this data and grab specific data by using Graphql and I have no idea how to achieve this ( if even it's possible ) through Gatsby js.

Answer 1

Gatsby distinguishes between the internal GraphQL API, by which you can store and query data internally, and any API it is consuming (such as one provided by a headless CMS), from which you retrieve data by using source plugins .

From the appearance of your URI, it looks like you may be using Cockpit as a CMS, which has a source plugin available for Gatsby: gatsby-source-cockpit . To install the plugin:

npm install --save gatsby-plugin-cockpit

To configure the plugin, add the following to gatsby-config.js , replacing http://localhost:8888 with your own Cockpit site:

  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
    {
      resolve: 'gatsby-plugin-cockpit',
      options: {
        cockpitConfig: {
          baseURL: 'http://localhost:8888',
          folder: '/cockpit',
          accessToken: '4d659efb084077fd24aeb4871d4386',
          collections: ['posts'],
          regions: ['footer'],
          customComponents: [],
        },
      },
    },
  ],

Now, run:

gatsby develop

Your local Gatsby site will be available at eg http://localhost:8000/ , after which point you can navigate to http://localhost:8000/___graphql , where you can explore your GraphQL schema using GraphiQL.