diff --git a/README.md b/README.md index 9659e78..7d8f7e1 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,20 @@ -# Welcome to Remix! +# Welcome to Remix + GraphQL! - [Remix Docs](https://remix.run/docs) +- [Apollo CLient Docs](https://www.apollographql.com/docs) + +Proof of concept for Remix app with Apollo Client to leverage GraphQL. + +This tutorial has 2 parts: + +- [Part 1 - Remix and Graphql](https://docs.google.com/document/d/1TEulxj7MldSw10dd-8RJX3cg0muIDbRMfDWlghqpGuA) + +- [Part 2 - Refactoring Styles and Routes](https://docs.google.com/document/d/1RZ0wHD82IeRwif6_HzewXNKzAV-7gQ9nzmukYSxxslc) + +This project uses the following data source: +[countries@current](https://studio.apollographql.com/public/countries/home) + +To get started, clone the repo and then: ## Development @@ -28,26 +42,3 @@ npm start Now you'll need to pick a host to deploy it to. -### DIY - -If you're familiar with deploying node applications, the built-in Remix app server is production-ready. - -Make sure to deploy the output of `remix build` - -- `build/` -- `public/build/` - -### Using a Template - -When you ran `npx create-remix@latest` there were a few choices for hosting. You can run that again to create a new project, then copy over your `app/` folder to the new project that's pre-configured for your target server. - -```sh -cd .. -# create a new project, and pick a pre-configured host -npx create-remix@latest -cd my-new-remix-app -# remove the new project's app (not the old one!) -rm -rf app -# copy your app over -cp -R ../my-old-remix-app/app app -``` diff --git a/app/entry.server.tsx b/app/entry.server.tsx index 90fcd61..e66c96f 100644 --- a/app/entry.server.tsx +++ b/app/entry.server.tsx @@ -8,7 +8,7 @@ import { InMemoryCache, createHttpLink, } from "@apollo/client"; - +import { ServerStyleSheet } from "styled-components"; interface Request { headers: Record; @@ -31,6 +31,7 @@ export default function handleRequest( credentials: request.credentials ?? "same-origin", }), }); + const App = ( @@ -40,9 +41,10 @@ export default function handleRequest( return getDataFromTree(App).then(() => { const initialState = client.extract(); + const sheet = new ServerStyleSheet(); - const markup = renderToString( - <> + let markup = renderToString( + sheet.collectStyles(<> {App}