[v2][RFC] Deprecate page queries completely and replace with StaticQuery?

Several people have suggested this and it’s started feeling better and better over time.

It’d definitely better to have one pattern for queries rather than two. And the reaction to <StaticQuery> seems positive.

We’d have to add support for <StaticQueries> getting variables passed to them when they’re on pages. Which felt weird as that’s “magical” but… it’s no less magical than the existing page queries. Less since it has a component tied to it.

Oh hmmm… just had a thought — we could create a <PageQuery> component that’s identical to <StaticQuery> except it takes variables 🤔

Thoughts?

[nakedible]

FWIW, I personally would find it much more intuitive if there were just a single query component, and that the entire pageQuery magic would be removed.

As I am used to Apollo, I would absolutely love it if the query component was similar. I will show this with a complete example to clarify my thoughts.

Old style:

export default ({data}) => {
    return (
        <div>
            <div dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }} />
        </div>
    );
}

export const pageQuery = graphql`
query PageQuery($fileAbsolutePath: String!) {
  markdownRemark(fileAbsolutePath: { eq: $fileAbsolutePath }) {
    html
    frontmatter {
      path
      title
    }
  }
}
`;

Suggested style:

const query = gql`
query PageQuery($fileAbsolutePath: String!) {
  markdownRemark(fileAbsolutePath: { eq: $fileAbsolutePath }) {
    html
    frontmatter {
      path
      title
    }
  }
}
`;

export default ({pageContext}) => (
    <Query query={query} variables={pageContext.context}>
        {({ loading, error, data }) => {
            return (
                <div>
                    <div dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }} />
                </div>
            );
        }}
    </Query>
);

Obviously code could be restructured with the query being at the bottom, if desired. It is a little more boilerplate on each page that uses a query - but it would remove all the magic and allow for much more options on how to query.

Also, loading state in Gatsby is now hardcoded to <div>Loading (StaticQuery)</div>, and probably error state causes some error handler to be invoked. The Apollo way lets the page handle both as it sees fit.

[gatsbot[bot]]

This issue is being closed due to inactivity. Is this a mistake? Please re-open this issue or create a new issue.