Get stylesheets and scripts from API.

[antarr]

Previously I've used the graphpql API to get stylesheets and scripts for a give page or post. Is it possible with this approach?

Query for Previous Attempt

const result = await graphql(`
    {
      wpgraphql {
        pages {
          nodes {
            id
            uri
            elementorData
            enqueuedStylesheets {
              nodes {
                src
              }
            }
            enqueuedScripts {
              nodes {
                src
                id
              }
            }
          }
        }
        posts {
          nodes {
            title
            id
            slug
            content
            uri
            elementorData
            enqueuedStylesheets {
              nodes {
                src
              }
            }
            enqueuedScripts {
              nodes {
                src
                id
              }
            }
          }
        }
      }
    }
  `);

Layout Component

import React from 'react';
import PropTypes from 'prop-types';
import Header from './header';
import Footer from './footer';
import '@wordpress/block-library/build-style/style.css';
import '../scss/layout/fonts.css';
import { CssBaseline } from '@material-ui/core';

const BlogLayout = ({ children, styles, scripts }) => {
  return (
    <>
      <CssBaseline />
      {styles.map((node, id) => (
        <link key={`style-${id}`} href={node.src} rel="stylesheet" />
      ))}
      <Header />
      <main>{children}</main>
      <Footer />
      {scripts.map((node, id) => (
        <script key={`script-${id}`} src={node.src} />
      ))}
    </>
  );
};

BlogLayout.propTypes = {
  children: PropTypes.node.isRequired,
  scripts: PropTypes.array,
  styles: PropTypes.array,
};

export default BlogLayout;

[TylerBarnes]

Hi @antarr ,
thanks for opening this issue. It's not yet possible for these types to work in the source plugin. The problem is that there's no way to get all of these kinds of nodes in a list so there's no current way to fetch them reliably.
Currently the way this plugin works is it will fetch all nodes that are available to fetch in lists, then anywhere where there is a connection from one type to another, only the id is fetch, and it's linked Gatsby side. So for example your query would be for WpPage.enqueueAssets. Since EnqueuedAsset is a node type, only the id would be fetched. But the problem here is we wont actually have the data for those nodes since the root field for registeredScripts wont return all possible nodes of this type.
I'm currently brainstorming on an API that would allow this via config on node type options and this config would be enabled by default for these types.

For example it might look something like

{
  options: {
    type: {
      EnqueuedAsset: {
        fetchNodesAsFieldObjects: true
      }
    }
  }
}

This would mean we wouldn't try to fetch these as nodes (by just fetching the id on WpPage.enqueuedAssets) but instead we would fetch the full node object that's available on WpPage.enqueuedAssets. Currently this isn't possible but it will be possible once this API is in.

[KeviinCosmos]

Do you know if anyone has created a guide for this?
I can only find a video from WP crafter, but it's about recreating all elementor widgets as your own components, and then redesign everything.

Came from this post: #102

[moonmeister]

Was really hoping to access enqueued style sheets and couldn't...I'm looking forward to this working.

[smthomas]

Thank you for opening this issue. We recently moved this plugin over to the gatsbyjs monorepo and are trying to clean out this issue queue. We documented this feature to look at for a future roadmap item and are going to close this issue out. If you want to add additional visibility to this feature, you can request it at https://portal.gatsbyjs.com/