"GraphQL query for this page" button

[berekuk]

It'd be cool to have a link to yoga playground on every metaforecast page which would expose a query with data for this page.

Shouldn't be hard if all our pages follow the pattern of "query for data in getServerSideProps" — we'll just need some kind of extension for NextPage object with graphql query as a property on it.

Draft:

export const MyPage: GraphQLPage = () => {
  return (
    <Layout query={MyPage.query}>
      ...
    </Layout>
  );
};

MyPage.query = MyPageDocument;

MyPage.variables = (context) => ({
  id: context.query.id,
});

export const getServerSideProps = getGraphQLServerSideProps(MyPage);

I'm not sure if this example would be flexible enough, and it'd be better to build more various graphql-based pages before doing this.