GraphQL implementation

[AlbertSmit]

Hey there!

Been playing around, and really liking microsite so far.

One thing I would love though, is having a GraphQL client implemented in some way. I tried to set some up with microsite myself, but ran into various issues:

• @apollo/client
  Ran into issues with fetch.
  When polyfilling this, ran into issues with XMLHttpRequest, sadly.

• urql/preact
  Due to the simplicity of microsite (which I love, by the way. Simplicity is good.), I found this setup to be too hard to do. I need to wrap something top level (i.e. App) with a Provider, which isn't really possible unless I modify the microsite code(?) (i.e. dist/document.js), if I'm not mistaken.

• graphql-request
  Works fine in dev mode, but gets confused about window not existing on build.

Edit:
Alright, guess I overcomplicated things. 😅 Using fetch works just fine in both environments.

Cheers! ✨

[natemoo-re]

Glad you got something working!

• What ended up being the issue with fetch and @apollo/client? This is definitely a good candidate for an official example.

• If urql/preact relies on a top-level provider, it might work in v1.1.0, which will add support for a custom _document.tsx file. That assumes that everything is statically rendered, though. The tough thing about Providers is that client-side partial hydration mounts many mini Preact apps on the document rather than a single app tree with shared state. There is a useGlobalState hook, but I have yet to come up with a solution that allows folks to use the normal context as usual.

• graphql-request choking on window might indicate that it's not meant for SSR? window will never be defined on the server. I realize that dev mode makes that behavior a bit confusing, which I'd like to fix.

[AlbertSmit]

Edit:
Turns out I was wrong again, and overlooked Apollo's SSR doc. I'll wait until Microsite v1.1.0 is out so i can (try to) wrap the document and give it another shot. 🙂

I'll leave everything I wrote regardless for future reference.

---

Hey! Thanks for getting back to me.

I feel kind of stupid saying this; but I never figured that native fetch can run GraphQL queries before making this topic. Oops. 😕

Anyway, made an (albeit very basic) example repo for GraphQL with native fetch.

graphql-request does work in my Next.js SSR setup, and it should work in Node.
It seems that during a build, it doesn't recognize that it should run for Node (and indeed chokes on window).

@apollo/client (Example repo / apollo branch)

All efforts required adding this to the snowpack config.

  alias: {
    "react": "preact/compat",
    "react-dom": "preact/compat"
  }

Otherwise, I would get this issue:

 [snowpack] node_modules/@apollo/client/react/context/ApolloConsumer.js
 Module "react" could not be resolved by Snowpack (Is it installed?).

When having added the alias for Preact Compat, Apollo throws this:

 (node:76839) UnhandledPromiseRejectionWarning:
 Invariant Violation: Invariant Violation: 22
 ------
 22: {
   file: "@apollo/client/link/http/checkFetcher.js",
   node: new InvariantError("\n\"fetch\" has not been found globally and no fetcher has been configured. To fix this, install a fetch package (like https://www.npmjs.com/package/cross-fetch), instantiate the fetcher, and pass it into your HttpLink constructor. For example:\n\nimport fetch from 'cross-fetch';\nimport { ApolloClient, HttpLink } from '@apollo/client';\nconst client = new ApolloClient({\n  link: new HttpLink({ uri: '/graphql', fetch })\n});\n    ")
 },

Which can be resolved as per error message, by adding a fetch method to Apollo, like this:

import fetch from 'cross-fetch';
const GraphQL = new ApolloClient({
  link: new HttpLink({ uri: 'https://countries-274616.ew.r.appspot.com', fetch }),
  cache: new InMemoryCache(),
});

Despite, when linking a fetch package, all packages I've tried seem to run into the same issue

• isomorphic-fetch + node-fetch (same error)
  (node:77386) UnhandledPromiseRejectionWarning: Error: unable to locate global object

• cross-fetch + unfetch (same error)
  (node:77444) UnhandledPromiseRejectionWarning: Error: XMLHttpRequest is not defined

[natemoo-re]

This is super helpful reference, thanks so much! I'll be testing the next version against your repo.

I suspect this has something to do with the preact/compat alias, as well. I think it'd be great to add a compat mode to Microsite so users can easily use React packages without needing to configure everything manually.