terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity
next.js/examples
History
Matthew Francis Brunetti 7961946c07 withApollo example - move from old HOC APIs to new function-as-child APIs (#5241) 
Since version 2.1, react-apollo is exposing some new components that use the function-as-child (or render-prop) pattern to let you connect apollo-client magic with your components. See the blog article: [New in React Apollo 2.1](https://www.apollographql.com/docs/react/react-apollo-migration.html)

If I'm not mistaken, it's generally agreed that this pattern is (where it works) superior to the HOC pattern, for reasons that are best explained here: https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce 

So I updated the with-apollo example to use the new API, and IMO this code is much simpler and natural to read and understand, especially if you are not already familiar with Apollo's HOC APIs.

I broke up my changes into separate commits, for easier review. Commits with "Refactor" in the message accomplish the goal of switching to the new APIs while minimizing line-by-line differences (select "Hide whitespace changes" under "Diff settings"). Commits with "Clean up" in the message follow up the refactoring with trivial things like reorganizing code sections, renaming variables, etc.

For the components doing mutations, I chose not to use the `Mutation` component, since that doesn't really make sense to me; a mutation is something that happens at a point in time, so it's not meaningful to represent a mutation in the markup, which exists for a period of time. All that component does is expose a `mutate` function for a single specified mutation, and `result` data for a single firing of the mutation (which we don't need anyways; apollo handles updating the local data with the result). To me it seems simpler and more flexible to just get the apollo client via `ApolloConsumer` and call `.mutate()` on it. 

In case anyone is interested, here's what my version of `PostUpvoter` using the `Mutation` component looked like:

 <details>

```jsx
import React from 'react'
import { Mutation } from 'react-apollo'
import { gql } from 'apollo-boost'

export default function PostUpvoter ({ votes, id }) {
  return (
    <Mutation mutation={upvotePost}>
      {mutate => (
        <button onClick={() => upvote(id, votes + 1, mutate)}>
          {votes}
          <style jsx>{`
            button {
              background-color: transparent;
              border: 1px solid #e4e4e4;
              color: #000;
            }
            button:active {
              background-color: transparent;
            }
            button:before {
              align-self: center;
              border-color: transparent transparent #000000 transparent;
              border-style: solid;
              border-width: 0 4px 6px 4px;
              content: '';
              height: 0;
              margin-right: 5px;
              width: 0;
            }
          `}</style>
        </button>
      )}
    </Mutation>
  )
}

const upvotePost = gql`
  mutation updatePost($id: ID!, $votes: Int) {
    updatePost(id: $id, votes: $votes) {
      id
      __typename
      votes
    }
  }
`
function upvote (id, votes, mutate) {
  mutate({
    variables: { id, votes },
    optimisticResponse: {
      __typename: 'Mutation',
      updatePost: {
        __typename: 'Post',
        id,
        votes
      }
    }
  })
}
```

</details>

###

I'm happy with where things are at here, but I'm more than happy to address any comments, concerns, ideas for improvent!

Thanks!
2018-09-26 01:32:41 +02:00
..
active-class-name #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
basic-css #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
basic-export #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
custom-charset #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
custom-server #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
custom-server-actionhero #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
custom-server-express #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
custom-server-fastify improve custom-server-fastify example (#4805) 2018-07-19 21:27:22 +02:00
custom-server-hapi #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
custom-server-koa #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
custom-server-micro #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
custom-server-nodemon #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
custom-server-polka #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
custom-server-typescript Fix custom-server-typescript not typechecking (#3954) 2018-09-04 17:35:34 +02:00
data-fetch #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
form-handler #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
gh-pages #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
head-elements #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
hello-world #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
layout-component #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
nested-components #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
only-client-render-external-dependencies update client-only-render-external-dependency example (#4822) 2018-07-22 20:53:22 +02:00
page-transitions Remove page-transitions example 2018-05-25 14:19:40 +02:00
parameterized-routing #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
pass-server-data #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
progressive-render #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
root-static-files Fix Example Deploy Links (#5216) 2018-09-20 11:32:16 +02:00
shared-modules #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
ssr-caching #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
svg-components #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
using-inferno #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
using-nerv #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
using-preact #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
using-router #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
using-with-router #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-absolute-imports #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-algolia-react-instantsearch #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-amp #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-ant-design Upgrade next plugins to the latest version in examples 2018-09-20 16:04:32 +02:00
with-ant-design-less Fix for with-ant-design-less for next7.0 (#5263) 2018-09-24 00:03:38 +02:00
with-antd-mobile #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-aphrodite #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-apollo withApollo example - move from old HOC APIs to new function-as-child APIs (#5241) 2018-09-26 01:32:41 +02:00
with-apollo-and-redux Lint examples (#4985) 2018-08-20 08:31:24 +02:00
with-apollo-and-redux-saga Fix Example Deploy Links (#5216) 2018-09-20 11:32:16 +02:00
with-apollo-auth Merge branch 'canary' 2018-09-19 18:15:57 +02:00
with-app-layout #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-asset-imports update with-asset-import example (#4830) 2018-07-24 19:11:21 +02:00
with-babel-macros #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-carbon-components Upgrade next plugins to the latest version in examples 2018-09-20 16:04:32 +02:00
with-cerebral #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-componentdidcatch #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-configured-preset-env Upgrade Babel to 7.0.0-rc.1 (major) (#4937) 2018-08-13 10:34:08 -07:00
with-context-api Add with-context-api example (#5154) 2018-09-14 12:04:29 +02:00
with-custom-babel-config Upgrade Babel to 7.0.0-rc.1 (major) (#4937) 2018-08-13 10:34:08 -07:00
with-custom-reverse-proxy Fix with-custom-reverse-proxy example (#5064) 2018-08-30 23:32:19 +02:00
with-cxs #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-data-prefetch #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-docker #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-dotenv Rewrite with-dotenv example (#4924) 2018-08-08 09:01:00 -07:00
with-draft-js #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-dynamic-import Update with-dynamic-import example (#5201) 2018-09-23 16:01:54 +02:00
with-electron #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-emotion #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-emotion-fiber #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-external-scoped-css Deprecate css examples 2018-01-31 11:19:34 +01:00
with-fela #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-firebase-authentication #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-firebase-hosting Upgrade Babel to 7.0.0-rc.1 (major) (#4937) 2018-08-13 10:34:08 -07:00
with-firebase-hosting-and-typescript #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-flow Remove unused flow definitions (#5094) 2018-09-05 13:38:28 +02:00
with-freactal #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-glamor Improve glamor example (#4893) 2018-08-05 16:13:28 -07:00
with-glamorous #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-global-stylesheet Remove with-global-stylesheet example (#4913) 2018-08-07 18:36:28 -07:00
with-global-stylesheet-simple Remove with-global-stylesheet example (#4913) 2018-08-07 18:36:28 -07:00
with-google-analytics Lint examples (#4985) 2018-08-20 08:31:24 +02:00
with-hashed-statics Merge branch 'canary' 2018-09-19 18:15:57 +02:00
with-higher-order-component Lint examples (#4985) 2018-08-20 08:31:24 +02:00
with-i18next #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-immutable-redux-wrapper #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-ioc Replace deprecated props.url in examples (#4953) 2018-08-13 14:12:03 -07:00
with-jest Upgrade with-jest dependencies (#5149) 2018-09-12 15:29:17 +02:00
with-jest-typescript #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-kea Update with-kea example (#5259) 2018-09-23 16:01:37 +02:00
with-loading Update routing samples (#4864) 2018-08-13 14:17:39 -07:00
with-markdown update with-markdown example (#4839) 2018-07-25 20:06:40 +02:00
with-material-ui docs: removes npx info & moves src link up (#4972) 2018-08-19 22:26:50 +02:00
with-mobx Update with-mobx example (#5229) 2018-09-20 14:29:57 +02:00
with-mobx-state-tree Fix with-mobx-state-tree example (#5258) 2018-09-22 22:21:54 +02:00
with-mobx-state-tree-typescript Fix Example Deploy Links (#5216) 2018-09-20 11:32:16 +02:00
with-mocha add mocha example (#5182) 2018-09-17 00:12:39 +02:00
with-next-css Upgrade next plugins to the latest version in examples 2018-09-20 16:04:32 +02:00
with-next-less Upgrade next plugins to the latest version in examples 2018-09-20 16:04:32 +02:00
with-next-page-transitions #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-next-routes Replace deprecated props.url in examples (#4953) 2018-08-13 14:12:03 -07:00
with-next-sass Upgrade next plugins to the latest version in examples 2018-09-20 16:04:32 +02:00
with-noscript #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-now-env #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-pkg #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-polyfills #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-portals #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-prefetching update with-prefetching example (#4850) 2018-07-27 22:08:09 +02:00
with-pretty-url-routing #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-react-ga update with-react-ga example (#4816) 2018-07-21 19:27:48 +02:00
with-react-helmet #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-react-i18next #5620: Fix react-i18next example to properly SSR (#5265) 2018-09-24 12:13:38 +02:00
with-react-intl Fix react-intl example (#4840) 2018-09-02 23:53:43 +02:00
with-react-jss Fix Example Deploy Links (#5216) 2018-09-20 11:32:16 +02:00
with-react-md #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-react-native-web [change] Update RNW example (#4787) 2018-07-15 20:59:20 +02:00
with-react-toolbox #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-react-uwp #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-react-with-styles #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-reasonml example with-reasonml dependency updates (#5048) 2018-09-03 01:38:54 +02:00
with-rebass #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-recompose #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-redux Lint examples (#4985) 2018-08-20 08:31:24 +02:00
with-redux-code-splitting Fix failing linter tests (#5257) 2018-09-22 21:41:07 +02:00
with-redux-observable Fixed server status message in with-redux-observable-example. (#4900) 2018-08-05 10:56:04 -07:00
with-redux-reselect-recompose Fix Example Deploy Links (#5216) 2018-09-20 11:32:16 +02:00
with-redux-saga FIX #5234 (#5235) 2018-09-20 21:09:29 +02:00
with-redux-wrapper #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-reflux #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-refnux #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-relay-modern Fixed package.json (#4654) 2018-09-04 17:50:44 +02:00
with-rematch #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-scoped-stylesheets-and-postcss Deprecate css examples 2018-01-31 11:19:34 +01:00
with-segment-analytics #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-semantic-ui Upgrade next plugins to the latest version in examples 2018-09-20 16:04:32 +02:00
with-sentry example with-sentry note that server side logging available too (#5261) 2018-09-23 21:06:05 +02:00
with-shallow-routing Fix shallow routing examples using old React lifecycle and deprecated props.url (#4950) 2018-08-13 11:09:45 -07:00
with-sitemap-and-robots-express-server Update example: with-sitemap-and-robots-express-server (#4579) 2018-09-04 17:18:05 +02:00
with-sitemap-and-robots-express-server-typescript Add with-sitemap-and-robots-express-server-typescript example (#5076) 2018-09-03 16:43:19 +02:00
with-slate Add slate.js example (#4899) 2018-08-06 21:00:31 -07:00
with-socket.io #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-static-export Upgrade serve (#4857) 2018-07-27 21:13:55 +02:00
with-storybook #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-strict-csp Add with-strict-csp example (#4858) 2018-08-06 20:19:16 -07:00
with-strict-csp-hash Factor out NextScript inline source (#4934) (#4939) 2018-08-14 11:05:25 -07:00
with-styled-components Update .babelrc (#5063) 2018-08-30 23:33:08 +02:00
with-styled-jsx-plugins #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-styled-jsx-postcss Make styled-jsx configurable (#3050) 2017-10-15 19:54:57 +02:00
with-styled-jsx-scss #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-styletron #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-sw-precache Missing babel configuration in sw-precache example (#4856) 2018-07-27 22:54:01 +02:00
with-tailwindcss #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-typescript #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-typestyle Added example: with-typestyle (#4926) 2018-08-08 21:36:34 -07:00
with-universal-configuration #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-universal-configuration-runtime Fix Example Deploy Links (#5216) 2018-09-20 11:32:16 +02:00
with-unstated #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-url-object-routing #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-videojs Upgrade next plugins to the latest version in examples 2018-09-20 16:04:32 +02:00
with-webassembly doc: fix deploy link (#5223) 2018-09-20 11:30:23 +02:00
with-webpack-bundle-analyzer Update next.config in with-webpack-bundle-analyzer example to avoid issue with Next.js in CI (#5135) 2018-09-10 12:00:45 +02:00
with-webpack-bundle-size-analyzer #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-yarn-workspaces Add with-yarn-workspaces example (#5034) 2018-09-03 23:41:45 +02:00
with-zones #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
.babelrc Add componentDidCatch example 2018-04-23 14:22:36 -07:00
.gitignore Remove yarn.lock from examples (#912) 2017-01-29 05:48:53 +05:30