+ refetching.
[@steelbrain](https://github.com/steelbrain) in [#2493](https://github.com/apollographql/react-apollo/pull/2493) ### Improvements diff --git a/LICENSE b/LICENSE index 0808d68832..8c09781ba7 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2015 Ben Newman +Copyright (c) 2019 Meteor Development Group, Inc. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 02362bb58a..55d2a5951e 100644 --- a/README.md +++ b/README.md @@ -151,7 +151,7 @@ import 'core-js/fn/object/assign'; The `react-apollo` package is designed to be effectively consumed by bundlers that understand either CommonJS `require` syntax or ECMASCript `import` and `export` syntax, such as [Rollup](https://rollupjs.org), [Webpack](https://webpack.js.org), or [Parcel](https://parceljs.org). If your bundler supports tree-shaking, it should be able to eliminate unused code from the `react-apollo` package, regardless of which module syntax you're using. -You should (almost) never need to reach into the `react-apollo/...` internals to import specific modules. The only supported exceptions are `react-apollo/test-links`, `react-apollo/test-utils`, and `react-apollo/walkTree` (deprecated). +You should (almost) never need to reach into the `react-apollo/...` internals to import specific modules. The only supported exceptions are `react-apollo/test-links`, `react-apollo/test-utils`. When minifying your application, you can make the `react-apollo` package noticeably smaller by configuring your minifier to replace the expression `process.env.NODE_ENV` with a string literal (typically `"production"`). Other packages such as [React](https://reactjs.org) use the same convention, so there's a good chance you already have your minifier configured in this way. diff --git a/ROADMAP.md b/ROADMAP.md deleted file mode 100644 index 0fe9b28905..0000000000 --- a/ROADMAP.md +++ /dev/null @@ -1,115 +0,0 @@ -# Roadmap - -This file is intended to be an up to date roadmap for future work on react-apollo. It does not cover patch level changes and some minor changes may be missed. Checkout the [Changelog](./Changelog.md) for detailed release information. - -## 2.0 - -In the 2.0 we want to ensure support for Apollo Client 2.0. It will remove the direct dependency of apollo-client to prevent the need for a breaking change with Apollo Client has one in the future. Since React Apollo exports Apollo Client, the 2.0 of Apollo Client requires a semver breaking change of React Apollo. - -Nothing should actually change in your React app with the 2.0 (expect it'll be faster :tada:). The 2.0 is nearly 100% backwards compatiable with the 1.\* expect for the removal of Redux store management in the Provider! - -## 2.1 - -The 2.1 of react-apollo will feature quite a lot of new features while being 100% backwards compatiable to the 2.0 version so its just a minor version bump. The 2.1 will be a large reorganization of this project and include first class support for Preact and Inferno usage. - -The 2.1 will split up this project into a lerna repository with both examples and multiple packages. What is currently react-apollo will be split into the following new (planned) packages: - -* apollo-component -* react-apollo -* preact-apollo -* inferno-apollo -* react-server-async (getDataFromTree and improved versions) -* preact-server-async (if needed to be different from ^^) -* reason-react-apollo (Bucklescript bindings) -* apollo-component-test-utils - -### Apollo Component - -Apollo Component is the new underlying library that powers all of the view level packages. It will export out an `ApolloProvider` for putting apollo in the context of the react tree, a new component based suite of API's, and an expanded HOC suite. The raw components will be used by the libraries to determine what Component class to use. - -**ApolloProvider** -The ApolloProvider will remove any reference to Redux and a concept of the `store`. Instead, it will accept a client and include it the context. QueryRecycler should be able to be removed in favor of first class recycle support in the 2.1 of Apollo Client. - -**Higher Order Components** -The current `graphql` API will stay the same with the one change of allowing a function instead of just a `DocumentNode` for the first argument. This will no longer be the reccomended way to use react-apollo, instead we will promote the new HOC's and/or the Component methods. However, this will allow for dynamic operations based on props. - -```js -graphql(DocumentNode || (props) => DocumentNode, { - skip: (props) => boolean, - options: (props) => boolean, - name: string - props: ({ ownProps, data }) => any -}); -``` - -Along with `graphql`, the new package will export out `query`, `mutation`, and `subscription` which will be tuned for the specific operations. - -```js -// query -query((ownProps) => ({ - query: DocumentNode - options: QueryOptions - skip: boolean, - props: (data) => any -})) - -// mutation -mutation((ownProps) => ({ - mutation: DocumentNode, - options: MutationOptions, - props: (data) => any -})) - -// subscription -subscription((ownProps) => ({ - subscription: DocumentNode, - options: SubscriptionOptions, - skip: boolean, - props: (data) => any -})) -``` - -They're may be more features added to these HOC's during full design. - -**Query** -A new way to interact with Apollo and React, the `Query` component will allow using Apollo without an higher order component. It will allow for dynamic queries and options driven by props while using a render prop to manage controlling props. A rough draft of this component looks like this: - -```js -
' + codeToInclude + '';
- type(`Please ensure that ${strict} is enabled on: ${files}`);
- }
-};
-
-const authors = commits.map(x => x.author && x.author.login);
-const isBot = authors.some(x => ['greenkeeper', 'renovate'].indexOf(x) > -1);
-
-if (!isBot) {
- // Rules
- // When there are app-changes and it's not a PR marked as trivial, expect
- // there to be CHANGELOG changes.
- const changelogChanges = includes(modified, 'Changelog.md');
- if (modifiedAppFiles.length > 0 && !trivialPR && !changelogChanges) {
- fail('No CHANGELOG added.');
- }
-
- // No PR is too small to warrant a paragraph or two of summary
- if (pr.body.length === 0) {
- fail('Please add a description to your PR.');
- }
-
- const hasAppChanges = modifiedAppFiles.length > 0;
-
- const hasTestChanges = modifiedTestFiles.length > 0;
-
- // Warn when there is a big PR
- const bigPRThreshold = 500;
- if (danger.github.pr.additions + danger.github.pr.deletions > bigPRThreshold) {
- warn(':exclamation: Big PR');
- }
-
- // Warn if there are library changes, but not tests
- if (hasAppChanges && !hasTestChanges) {
- warn(
- "There are library changes, but not tests. That's OK as long as you're refactoring existing code",
- );
- }
-
- // Be careful of leaving testing shortcuts in the codebase
- const onlyTestFiles = modifiedTestFiles.filter(x => {
- const content = fs.readFileSync(x).toString();
- return (
- content.includes('it.only') ||
- content.includes('describe.only') ||
- content.includes('fdescribe') ||
- content.includes('fit(')
- );
- });
- raiseIssueAboutPaths(fail, onlyTestFiles, 'an `only` was left in the test');
-}
diff --git a/examples/base/.env b/examples/base/.env
new file mode 100644
index 0000000000..6f809cc254
--- /dev/null
+++ b/examples/base/.env
@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true
diff --git a/examples/base/README.md b/examples/base/README.md
index 8266b6cf1c..52a99fc141 100644
--- a/examples/base/README.md
+++ b/examples/base/README.md
@@ -4,5 +4,3 @@
npm install
npm start
```
-
-This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
diff --git a/examples/base/package.json b/examples/base/package.json
index 5a987a4596..c3cc5b5e08 100644
--- a/examples/base/package.json
+++ b/examples/base/package.json
@@ -3,10 +3,10 @@
"version": "0.1.0",
"private": true,
"dependencies": {
+ "@apollo/react-hoc": "beta",
"apollo-boost": "^0.4.0",
- "react": "^16.3.0",
- "react-apollo": "../../lib",
- "react-dom": "^16.3.0",
+ "react": "../../node_modules/react",
+ "react-dom": "../../node_modules/react-dom",
"react-scripts": "2.1.8"
},
"scripts": {
diff --git a/examples/base/public/favicon.ico b/examples/base/public/favicon.ico
deleted file mode 100644
index 5c125de5d8..0000000000
Binary files a/examples/base/public/favicon.ico and /dev/null differ
diff --git a/examples/base/public/index.html b/examples/base/public/index.html
index 7bee027101..f93133dc78 100644
--- a/examples/base/public/index.html
+++ b/examples/base/public/index.html
@@ -1,24 +1,12 @@
-
+
-
-
-
-
-
-
-
+
+
+
- {friend.name}: {friend.appearsIn.map(x => x && x.toLowerCase()).join(', ')} + {friend.name}:{' '} + {friend.appearsIn.map(x => x && x.toLowerCase()).join(', ')}
- ), + ) )} )} diff --git a/examples/base/src/index.js b/examples/base/src/index.js index a40e42ac41..1d6917b302 100644 --- a/examples/base/src/index.js +++ b/examples/base/src/index.js @@ -1,18 +1,18 @@ -import React from 'react'; -import { render } from 'react-dom'; -import ApolloClient from 'apollo-boost'; -import { ApolloProvider } from 'react-apollo'; - -import { App } from './App'; - -const client = new ApolloClient({ - uri: 'https://ojo6385vn6.sse.codesandbox.io', -}); - -const WrappedApp = ( -james : +
diff --git a/examples/components/src/__tests__/app.js b/examples/components/src/__tests__/app.js index c7b71a6c96..c768387d9a 100644 --- a/examples/components/src/__tests__/app.js +++ b/examples/components/src/__tests__/app.js @@ -1,14 +1,13 @@ import React from 'react'; -import renderer from 'react-test-renderer'; -import { MockedProvider } from 'react-apollo/test-utils'; -import { render, wait, cleanup } from 'react-testing-library'; +import { MockedProvider } from '@apollo/react-testing'; +import { render, wait } from '@testing-library/react'; import App, { HERO_QUERY } from '../app'; import { full } from '../__mocks__/data'; const request = { query: HERO_QUERY, - variables: { episode: 'EMPIRE' }, + variables: { episode: 'EMPIRE' } }; const mocks = [ @@ -16,17 +15,17 @@ const mocks = [ request, result: { data: { - hero: full, - }, - }, - }, + hero: full + } + } + } ]; const mocksWithError = [ { request, - error: new Error('Something went wrong'), - }, + error: new Error('Something went wrong') + } ]; describe('App', () => { @@ -34,7 +33,7 @@ describe('App', () => { const { container } = render(Latest News
+
+ Oh no! {error.message} : null}
+ {data && data.saveRocket ? (
+
+ Model {data.saveRocket.model} added!
+
+ ) : null}
+
+
+ );
+}
diff --git a/examples/hooks/client/src/RocketInventoryList.tsx b/examples/hooks/client/src/RocketInventoryList.tsx
new file mode 100644
index 0000000000..6204082b92
--- /dev/null
+++ b/examples/hooks/client/src/RocketInventoryList.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { useQuery } from '@apollo/react-hooks';
+import gql from 'graphql-tag';
+import { Row, Col } from 'reactstrap';
+
+import { RocketInventory } from './types';
+
+const GET_ROCKET_INVENTORY = gql`
+ query getRocketInventory {
+ rocketInventory {
+ id
+ model
+ year
+ stock
+ }
+ }
+`;
+
+export function RocketInventoryList() {
+ const { loading, data } = useQuery(GET_ROCKET_INVENTORY);
+ return (
+ Add a Rocket
+ {error ?Available Inventory
+ {loading ? ( +Loading ...
+ ) : ( +| Model | +Year | +Stock | +
|---|---|---|
| {inventory.model} | +{inventory.year} | +{inventory.stock} | +
+ Apollo Dealer Network{' '} + + 🚀 + +
+Helping people go places - fast.
++ +
, + + ]; +}; + ReactDOM.render(
, - , - ]} -
- {friend.name}: {friend.appearsIn.map(x => x.toLowerCase()).join(', ')} + {friend.name}:{' '} + {friend.appearsIn.map(x => x.toLowerCase()).join(', ')}
))} diff --git a/examples/ssr/imports/schema.js b/examples/ssr/hoc/imports/schema.js similarity index 96% rename from examples/ssr/imports/schema.js rename to examples/ssr/hoc/imports/schema.js index d032033fdb..78343f4876 100644 --- a/examples/ssr/imports/schema.js +++ b/examples/ssr/hoc/imports/schema.js @@ -1,458 +1,458 @@ -// This is the Star Wars schema used in all of the interactive GraphiQL -// examples on GraphQL.org. License reproduced at the bottom. - -/** - * Copyright (c) 2015, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the license found in the - * LICENSE file in the root directory of this source tree. - */ - -import { makeExecutableSchema } from 'graphql-tools'; - -const schemaString = ` -schema { - query: Query - mutation: Mutation -} -# The query type, represents all of the entry points into our object graph -type Query { - hero(episode: Episode): Character - reviews(episode: Episode!): [Review] - search(text: String): [SearchResult] - character(id: ID!): Character - droid(id: ID!): Droid - human(id: ID!): Human - starship(id: ID!): Starship -} -# The mutation type, represents all updates we can make to our data -type Mutation { - createReview(episode: Episode, review: ReviewInput!): Review -} -# The episodes in the Star Wars trilogy -enum Episode { - # Star Wars Episode IV: A New Hope, released in 1977. - NEWHOPE - # Star Wars Episode V: The Empire Strikes Back, released in 1980. - EMPIRE - # Star Wars Episode VI: Return of the Jedi, released in 1983. - JEDI -} -# A character from the Star Wars universe -interface Character { - # The ID of the character - id: ID! - # The name of the character - name: String! - # The friends of the character, or an empty list if they have none - friends: [Character] - # The friends of the character exposed as a connection with edges - friendsConnection(first: Int, after: ID): FriendsConnection! - # The movies this character appears in - appearsIn: [Episode]! -} -# Units of height -enum LengthUnit { - # The standard unit around the world - METER - # Primarily used in the United States - FOOT -} -# A humanoid creature from the Star Wars universe -type Human implements Character { - # The ID of the human - id: ID! - # What this human calls themselves - name: String! - # Height in the preferred unit, default is meters - height(unit: LengthUnit = METER): Float - # Mass in kilograms, or null if unknown - mass: Float - # This human's friends, or an empty list if they have none - friends: [Character] - # The friends of the human exposed as a connection with edges - friendsConnection(first: Int, after: ID): FriendsConnection! - # The movies this human appears in - appearsIn: [Episode]! - # A list of starships this person has piloted, or an empty list if none - starships: [Starship] -} -# An autonomous mechanical character in the Star Wars universe -type Droid implements Character { - # The ID of the droid - id: ID! - # What others call this droid - name: String! - # This droid's friends, or an empty list if they have none - friends: [Character] - # The friends of the droid exposed as a connection with edges - friendsConnection(first: Int, after: ID): FriendsConnection! - # The movies this droid appears in - appearsIn: [Episode]! - # This droid's primary function - primaryFunction: String -} -# A connection object for a character's friends -type FriendsConnection { - # The total number of friends - totalCount: Int - # The edges for each of the character's friends. - edges: [FriendsEdge] - # A list of the friends, as a convenience when edges are not needed. - friends: [Character] - # Information for paginating this connection - pageInfo: PageInfo! -} -# An edge object for a character's friends -type FriendsEdge { - # A cursor used for pagination - cursor: ID! - # The character represented by this friendship edge - node: Character -} -# Information for paginating this connection -type PageInfo { - startCursor: ID - endCursor: ID - hasNextPage: Boolean! -} -# Represents a review for a movie -type Review { - # The number of stars this review gave, 1-5 - stars: Int! - # Comment about the movie - commentary: String -} -# The input object sent when someone is creating a new review -input ReviewInput { - # 0-5 stars - stars: Int! - # Comment about the movie, optional - commentary: String -} -type Starship { - # The ID of the starship - id: ID! - # The name of the starship - name: String! - # Length of the starship, along the longest axis - length(unit: LengthUnit = METER): Float -} -union SearchResult = Human | Droid | Starship -`; - -/** - * This defines a basic set of data for our Star Wars Schema. - * - * This data is hard coded for the sake of the demo, but you could imagine - * fetching this data from a backend service rather than from hardcoded - * JSON objects in a more complex demo. - */ - -const humans = [ - { - id: '1000', - name: 'Luke Skywalker', - friends: ['1002', '1003', '2000', '2001'], - appearsIn: ['NEWHOPE', 'EMPIRE', 'JEDI'], - height: 1.72, - mass: 77, - starships: ['3001', '3003'], - }, - { - id: '1001', - name: 'Darth Vader', - friends: ['1004'], - appearsIn: ['NEWHOPE', 'EMPIRE', 'JEDI'], - height: 2.02, - mass: 136, - starships: ['3002'], - }, - { - id: '1002', - name: 'Han Solo', - friends: ['1000', '1003', '2001'], - appearsIn: ['NEWHOPE', 'EMPIRE', 'JEDI'], - height: 1.8, - mass: 80, - starships: ['3000', '3003'], - }, - { - id: '1003', - name: 'Leia Organa', - friends: ['1000', '1002', '2000', '2001'], - appearsIn: ['NEWHOPE', 'EMPIRE', 'JEDI'], - height: 1.5, - mass: 49, - starships: [], - }, - { - id: '1004', - name: 'Wilhuff Tarkin', - friends: ['1001'], - appearsIn: ['NEWHOPE'], - height: 1.8, - mass: null, - starships: [], - }, -]; - -const humanData = {}; -humans.forEach(ship => { - humanData[ship.id] = ship; -}); - -const droids = [ - { - id: '2000', - name: 'C-3PO', - friends: ['1000', '1002', '1003', '2001'], - appearsIn: ['NEWHOPE', 'EMPIRE', 'JEDI'], - primaryFunction: 'Protocol', - }, - { - id: '2001', - name: 'R2-D2', - friends: ['1000', '1002', '1003'], - appearsIn: ['NEWHOPE', 'EMPIRE', 'JEDI'], - primaryFunction: 'Astromech', - }, -]; - -const droidData = {}; -droids.forEach(ship => { - droidData[ship.id] = ship; -}); - -const starships = [ - { - id: '3000', - name: 'Millenium Falcon', - length: 34.37, - }, - { - id: '3001', - name: 'X-Wing', - length: 12.5, - }, - { - id: '3002', - name: 'TIE Advanced x1', - length: 9.2, - }, - { - id: '3003', - name: 'Imperial shuttle', - length: 20, - }, -]; - -const starshipData = {}; -starships.forEach(ship => { - starshipData[ship.id] = ship; -}); - -/** - * Helper function to get a character by ID. - */ -function getCharacter(id) { - // Returning a promise just to illustrate GraphQL.js's support. - return Promise.resolve(humanData[id] || droidData[id]); -} - -/** - * Allows us to fetch the undisputed hero of the Star Wars trilogy, R2-D2. - */ -function getHero(episode) { - if (episode === 'EMPIRE') { - // Luke is the hero of Episode V. - return humanData['1000']; - } - // Artoo is the hero otherwise. - return droidData['2001']; -} - -/** - * Allows us to query for the human with the given id. - */ -function getHuman(id) { - return humanData[id]; -} - -/** - * Allows us to query for the droid with the given id. - */ -function getDroid(id) { - return droidData[id]; -} - -function getStarship(id) { - return starshipData[id]; -} - -function toCursor(str) { - return Buffer('cursor' + str).toString('base64'); -} - -function fromCursor(str) { - return Buffer.from(str, 'base64') - .toString() - .slice(6); -} - -const resolvers = { - Query: { - hero: (root, { episode }) => getHero(episode), - character: (root, { id }) => getCharacter(id), - human: (root, { id }) => getHuman(id), - droid: (root, { id }) => getDroid(id), - starship: (root, { id }) => getStarship(id), - reviews: () => null, - search: (root, { text }) => { - const re = new RegExp(text, 'i'); - - const allData = [...humans, ...droids, ...starships]; - - return allData.filter(obj => re.test(obj.name)); - }, - }, - Mutation: { - createReview: (root, { episode, review }) => review, - }, - Character: { - __resolveType(data, context, info) { - if (humanData[data.id]) { - return info.schema.getType('Human'); - } - if (droidData[data.id]) { - return info.schema.getType('Droid'); - } - return null; - }, - }, - Human: { - height: ({ height }, { unit }) => { - if (unit === 'FOOT') { - return height * 3.28084; - } - - return height; - }, - friends: ({ friends }) => friends.map(getCharacter), - friendsConnection: ({ friends }, { first, after }) => { - first = first || friends.length; - after = after ? parseInt(fromCursor(after), 10) : 0; - const edges = friends - .map((friend, i) => ({ - cursor: toCursor(i + 1), - node: getCharacter(friend), - })) - .slice(after, first + after); - const slicedFriends = edges.map(({ node }) => node); - return { - edges, - friends: slicedFriends, - pageInfo: { - startCursor: edges.length > 0 ? edges[0].cursor : null, - hasNextPage: first + after < friends.length, - endCursor: edges.length > 0 ? edges[edges.length - 1].cursor : null, - }, - totalCount: friends.length, - }; - }, - starships: ({ starships }) => starships.map(getStarship), - appearsIn: ({ appearsIn }) => appearsIn, - }, - Droid: { - friends: ({ friends }) => friends.map(getCharacter), - friendsConnection: ({ friends }, { first, after }) => { - first = first || friends.length; - after = after ? parseInt(fromCursor(after), 10) : 0; - const edges = friends - .map((friend, i) => ({ - cursor: toCursor(i + 1), - node: getCharacter(friend), - })) - .slice(after, first + after); - const slicedFriends = edges.map(({ node }) => node); - return { - edges, - friends: slicedFriends, - pageInfo: { - startCursor: edges.length > 0 ? edges[0].cursor : null, - hasNextPage: first + after < friends.length, - endCursor: edges.length > 0 ? edges[edges.length - 1].cursor : null, - }, - totalCount: friends.length, - }; - }, - appearsIn: ({ appearsIn }) => appearsIn, - }, - FriendsConnection: { - edges: ({ edges }) => edges, - friends: ({ friends }) => friends, - pageInfo: ({ pageInfo }) => pageInfo, - totalCount: ({ totalCount }) => totalCount, - }, - FriendsEdge: { - node: ({ node }) => node, - cursor: ({ cursor }) => cursor, - }, - Starship: { - length: ({ length }, { unit }) => { - if (unit === 'FOOT') { - return length * 3.28084; - } - - return length; - }, - }, - SearchResult: { - __resolveType(data, context, info) { - if (humanData[data.id]) { - return info.schema.getType('Human'); - } - if (droidData[data.id]) { - return info.schema.getType('Droid'); - } - if (starshipData[data.id]) { - return info.schema.getType('Starship'); - } - return null; - }, - }, -}; - -export { schemaString as typeDefs, resolvers }; - -/* -License from https://github.com/graphql/graphql.github.io/blob/source/LICENSE - -LICENSE AGREEMENT For graphql.org software - -Facebook, Inc. (“Facebook”) owns all right, title and interest, including all -intellectual property and other proprietary rights, in and to the graphql.org -software. Subject to your compliance with these terms, you are hereby granted a -non-exclusive, worldwide, royalty-free copyright license to (1) use and copy the -graphql.org software; and (2) reproduce and distribute the graphql.org software -as part of your own software (“Your Software”). Facebook reserves all rights not -expressly granted to you in this license agreement. - -THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS OR -IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF -MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED. IN NO -EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICES, DIRECTORS OR EMPLOYEES BE -LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR -CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE -GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) -HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT -LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF -THE USE OF THE SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. - -You will include in Your Software (e.g., in the file(s), documentation or other -materials accompanying your software): (1) the disclaimer set forth above; (2) -this sentence; and (3) the following copyright notice: - -Copyright (c) 2015, Facebook, Inc. All rights reserved. -*/ +// This is the Star Wars schema used in all of the interactive GraphiQL +// examples on GraphQL.org. License reproduced at the bottom. + +/** + * Copyright (c) 2015, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { makeExecutableSchema } from 'graphql-tools'; + +const schemaString = ` +schema { + query: Query + mutation: Mutation +} +# The query type, represents all of the entry points into our object graph +type Query { + hero(episode: Episode): Character + reviews(episode: Episode!): [Review] + search(text: String): [SearchResult] + character(id: ID!): Character + droid(id: ID!): Droid + human(id: ID!): Human + starship(id: ID!): Starship +} +# The mutation type, represents all updates we can make to our data +type Mutation { + createReview(episode: Episode, review: ReviewInput!): Review +} +# The episodes in the Star Wars trilogy +enum Episode { + # Star Wars Episode IV: A New Hope, released in 1977. + NEWHOPE + # Star Wars Episode V: The Empire Strikes Back, released in 1980. + EMPIRE + # Star Wars Episode VI: Return of the Jedi, released in 1983. + JEDI +} +# A character from the Star Wars universe +interface Character { + # The ID of the character + id: ID! + # The name of the character + name: String! + # The friends of the character, or an empty list if they have none + friends: [Character] + # The friends of the character exposed as a connection with edges + friendsConnection(first: Int, after: ID): FriendsConnection! + # The movies this character appears in + appearsIn: [Episode]! +} +# Units of height +enum LengthUnit { + # The standard unit around the world + METER + # Primarily used in the United States + FOOT +} +# A humanoid creature from the Star Wars universe +type Human implements Character { + # The ID of the human + id: ID! + # What this human calls themselves + name: String! + # Height in the preferred unit, default is meters + height(unit: LengthUnit = METER): Float + # Mass in kilograms, or null if unknown + mass: Float + # This human's friends, or an empty list if they have none + friends: [Character] + # The friends of the human exposed as a connection with edges + friendsConnection(first: Int, after: ID): FriendsConnection! + # The movies this human appears in + appearsIn: [Episode]! + # A list of starships this person has piloted, or an empty list if none + starships: [Starship] +} +# An autonomous mechanical character in the Star Wars universe +type Droid implements Character { + # The ID of the droid + id: ID! + # What others call this droid + name: String! + # This droid's friends, or an empty list if they have none + friends: [Character] + # The friends of the droid exposed as a connection with edges + friendsConnection(first: Int, after: ID): FriendsConnection! + # The movies this droid appears in + appearsIn: [Episode]! + # This droid's primary function + primaryFunction: String +} +# A connection object for a character's friends +type FriendsConnection { + # The total number of friends + totalCount: Int + # The edges for each of the character's friends. + edges: [FriendsEdge] + # A list of the friends, as a convenience when edges are not needed. + friends: [Character] + # Information for paginating this connection + pageInfo: PageInfo! +} +# An edge object for a character's friends +type FriendsEdge { + # A cursor used for pagination + cursor: ID! + # The character represented by this friendship edge + node: Character +} +# Information for paginating this connection +type PageInfo { + startCursor: ID + endCursor: ID + hasNextPage: Boolean! +} +# Represents a review for a movie +type Review { + # The number of stars this review gave, 1-5 + stars: Int! + # Comment about the movie + commentary: String +} +# The input object sent when someone is creating a new review +input ReviewInput { + # 0-5 stars + stars: Int! + # Comment about the movie, optional + commentary: String +} +type Starship { + # The ID of the starship + id: ID! + # The name of the starship + name: String! + # Length of the starship, along the longest axis + length(unit: LengthUnit = METER): Float +} +union SearchResult = Human | Droid | Starship +`; + +/** + * This defines a basic set of data for our Star Wars Schema. + * + * This data is hard coded for the sake of the demo, but you could imagine + * fetching this data from a backend service rather than from hardcoded + * JSON objects in a more complex demo. + */ + +const humans = [ + { + id: '1000', + name: 'Luke Skywalker', + friends: ['1002', '1003', '2000', '2001'], + appearsIn: ['NEWHOPE', 'EMPIRE', 'JEDI'], + height: 1.72, + mass: 77, + starships: ['3001', '3003'], + }, + { + id: '1001', + name: 'Darth Vader', + friends: ['1004'], + appearsIn: ['NEWHOPE', 'EMPIRE', 'JEDI'], + height: 2.02, + mass: 136, + starships: ['3002'], + }, + { + id: '1002', + name: 'Han Solo', + friends: ['1000', '1003', '2001'], + appearsIn: ['NEWHOPE', 'EMPIRE', 'JEDI'], + height: 1.8, + mass: 80, + starships: ['3000', '3003'], + }, + { + id: '1003', + name: 'Leia Organa', + friends: ['1000', '1002', '2000', '2001'], + appearsIn: ['NEWHOPE', 'EMPIRE', 'JEDI'], + height: 1.5, + mass: 49, + starships: [], + }, + { + id: '1004', + name: 'Wilhuff Tarkin', + friends: ['1001'], + appearsIn: ['NEWHOPE'], + height: 1.8, + mass: null, + starships: [], + }, +]; + +const humanData = {}; +humans.forEach(ship => { + humanData[ship.id] = ship; +}); + +const droids = [ + { + id: '2000', + name: 'C-3PO', + friends: ['1000', '1002', '1003', '2001'], + appearsIn: ['NEWHOPE', 'EMPIRE', 'JEDI'], + primaryFunction: 'Protocol', + }, + { + id: '2001', + name: 'R2-D2', + friends: ['1000', '1002', '1003'], + appearsIn: ['NEWHOPE', 'EMPIRE', 'JEDI'], + primaryFunction: 'Astromech', + }, +]; + +const droidData = {}; +droids.forEach(ship => { + droidData[ship.id] = ship; +}); + +const starships = [ + { + id: '3000', + name: 'Millenium Falcon', + length: 34.37, + }, + { + id: '3001', + name: 'X-Wing', + length: 12.5, + }, + { + id: '3002', + name: 'TIE Advanced x1', + length: 9.2, + }, + { + id: '3003', + name: 'Imperial shuttle', + length: 20, + }, +]; + +const starshipData = {}; +starships.forEach(ship => { + starshipData[ship.id] = ship; +}); + +/** + * Helper function to get a character by ID. + */ +function getCharacter(id) { + // Returning a promise just to illustrate GraphQL.js's support. + return Promise.resolve(humanData[id] || droidData[id]); +} + +/** + * Allows us to fetch the undisputed hero of the Star Wars trilogy, R2-D2. + */ +function getHero(episode) { + if (episode === 'EMPIRE') { + // Luke is the hero of Episode V. + return humanData['1000']; + } + // Artoo is the hero otherwise. + return droidData['2001']; +} + +/** + * Allows us to query for the human with the given id. + */ +function getHuman(id) { + return humanData[id]; +} + +/** + * Allows us to query for the droid with the given id. + */ +function getDroid(id) { + return droidData[id]; +} + +function getStarship(id) { + return starshipData[id]; +} + +function toCursor(str) { + return Buffer('cursor' + str).toString('base64'); +} + +function fromCursor(str) { + return Buffer.from(str, 'base64') + .toString() + .slice(6); +} + +const resolvers = { + Query: { + hero: (root, { episode }) => getHero(episode), + character: (root, { id }) => getCharacter(id), + human: (root, { id }) => getHuman(id), + droid: (root, { id }) => getDroid(id), + starship: (root, { id }) => getStarship(id), + reviews: () => null, + search: (root, { text }) => { + const re = new RegExp(text, 'i'); + + const allData = [...humans, ...droids, ...starships]; + + return allData.filter(obj => re.test(obj.name)); + }, + }, + Mutation: { + createReview: (root, { episode, review }) => review, + }, + Character: { + __resolveType(data, context, info) { + if (humanData[data.id]) { + return info.schema.getType('Human'); + } + if (droidData[data.id]) { + return info.schema.getType('Droid'); + } + return null; + }, + }, + Human: { + height: ({ height }, { unit }) => { + if (unit === 'FOOT') { + return height * 3.28084; + } + + return height; + }, + friends: ({ friends }) => friends.map(getCharacter), + friendsConnection: ({ friends }, { first, after }) => { + first = first || friends.length; + after = after ? parseInt(fromCursor(after), 10) : 0; + const edges = friends + .map((friend, i) => ({ + cursor: toCursor(i + 1), + node: getCharacter(friend), + })) + .slice(after, first + after); + const slicedFriends = edges.map(({ node }) => node); + return { + edges, + friends: slicedFriends, + pageInfo: { + startCursor: edges.length > 0 ? edges[0].cursor : null, + hasNextPage: first + after < friends.length, + endCursor: edges.length > 0 ? edges[edges.length - 1].cursor : null, + }, + totalCount: friends.length, + }; + }, + starships: ({ starships }) => starships.map(getStarship), + appearsIn: ({ appearsIn }) => appearsIn, + }, + Droid: { + friends: ({ friends }) => friends.map(getCharacter), + friendsConnection: ({ friends }, { first, after }) => { + first = first || friends.length; + after = after ? parseInt(fromCursor(after), 10) : 0; + const edges = friends + .map((friend, i) => ({ + cursor: toCursor(i + 1), + node: getCharacter(friend), + })) + .slice(after, first + after); + const slicedFriends = edges.map(({ node }) => node); + return { + edges, + friends: slicedFriends, + pageInfo: { + startCursor: edges.length > 0 ? edges[0].cursor : null, + hasNextPage: first + after < friends.length, + endCursor: edges.length > 0 ? edges[edges.length - 1].cursor : null, + }, + totalCount: friends.length, + }; + }, + appearsIn: ({ appearsIn }) => appearsIn, + }, + FriendsConnection: { + edges: ({ edges }) => edges, + friends: ({ friends }) => friends, + pageInfo: ({ pageInfo }) => pageInfo, + totalCount: ({ totalCount }) => totalCount, + }, + FriendsEdge: { + node: ({ node }) => node, + cursor: ({ cursor }) => cursor, + }, + Starship: { + length: ({ length }, { unit }) => { + if (unit === 'FOOT') { + return length * 3.28084; + } + + return length; + }, + }, + SearchResult: { + __resolveType(data, context, info) { + if (humanData[data.id]) { + return info.schema.getType('Human'); + } + if (droidData[data.id]) { + return info.schema.getType('Droid'); + } + if (starshipData[data.id]) { + return info.schema.getType('Starship'); + } + return null; + }, + }, +}; + +export { schemaString as typeDefs, resolvers }; + +/* +License from https://github.com/graphql/graphql.github.io/blob/source/LICENSE + +LICENSE AGREEMENT For graphql.org software + +Facebook, Inc. (“Facebook”) owns all right, title and interest, including all +intellectual property and other proprietary rights, in and to the graphql.org +software. Subject to your compliance with these terms, you are hereby granted a +non-exclusive, worldwide, royalty-free copyright license to (1) use and copy the +graphql.org software; and (2) reproduce and distribute the graphql.org software +as part of your own software (“Your Software”). Facebook reserves all rights not +expressly granted to you in this license agreement. + +THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS OR +IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF +MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED. IN NO +EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICES, DIRECTORS OR EMPLOYEES BE +LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR +CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE +GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) +HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT +LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF +THE USE OF THE SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. + +You will include in Your Software (e.g., in the file(s), documentation or other +materials accompanying your software): (1) the disclaimer set forth above; (2) +this sentence; and (3) the following copyright notice: + +Copyright (c) 2015, Facebook, Inc. All rights reserved. +*/ diff --git a/examples/ssr/imports/tests/chromedriver.js b/examples/ssr/hoc/imports/tests/chromedriver.js similarity index 94% rename from examples/ssr/imports/tests/chromedriver.js rename to examples/ssr/hoc/imports/tests/chromedriver.js index 3bf15e0242..0262e567d3 100644 --- a/examples/ssr/imports/tests/chromedriver.js +++ b/examples/ssr/hoc/imports/tests/chromedriver.js @@ -1,18 +1,18 @@ -var chromedriver = require('chromedriver'); - -console.log('here'); -module.exports = { - before: function(done) { - console.log('before'); - try { - chromedriver.start(); - } catch (e) { - console.log(e); - } - done(); - }, - after: function(done) { - chromedriver.stop(); - done(); - }, -}; +var chromedriver = require('chromedriver'); + +console.log('here'); +module.exports = { + before: function(done) { + console.log('before'); + try { + chromedriver.start(); + } catch (e) { + console.log(e); + } + done(); + }, + after: function(done) { + chromedriver.stop(); + done(); + }, +}; diff --git a/examples/ssr/nightwatch.json b/examples/ssr/hoc/nightwatch.json similarity index 95% rename from examples/ssr/nightwatch.json rename to examples/ssr/hoc/nightwatch.json index b7e520191f..256c73cf3e 100644 --- a/examples/ssr/nightwatch.json +++ b/examples/ssr/hoc/nightwatch.json @@ -1,33 +1,33 @@ -{ - "src_folders": ["tests"], - "globals_path": "./imports/tests/chromedriver.js", - "output_folder": ".reports", - "selenium": { - "start_process": false - }, - "test_settings": { - "default": { - "launch_url": "http://localhost:3000", - "selenium_port": 9515, - "selenium_host": "localhost", - "default_path_prefix": "", - "desiredCapabilities": { - "browserName": "chrome", - "chromeOptions": { - "args": ["--no-sandbox"] - }, - "acceptSslCerts": true - }, - "silent": true, - "screenshots": { - "enabled": false, - "path": "" - } - }, - "chrome": { - "desiredCapabilities": { - "browserName": "chrome" - } - } - } -} +{ + "src_folders": ["tests"], + "globals_path": "./imports/tests/chromedriver.js", + "output_folder": ".reports", + "selenium": { + "start_process": false + }, + "test_settings": { + "default": { + "launch_url": "http://localhost:3000", + "selenium_port": 9515, + "selenium_host": "localhost", + "default_path_prefix": "", + "desiredCapabilities": { + "browserName": "chrome", + "chromeOptions": { + "args": ["--no-sandbox"] + }, + "acceptSslCerts": true + }, + "silent": true, + "screenshots": { + "enabled": false, + "path": "" + } + }, + "chrome": { + "desiredCapabilities": { + "browserName": "chrome" + } + } + } +} diff --git a/examples/ssr/hoc/package.json b/examples/ssr/hoc/package.json new file mode 100644 index 0000000000..03e9d42f7e --- /dev/null +++ b/examples/ssr/hoc/package.json @@ -0,0 +1,36 @@ +{ + "name": "ssr-hoc", + "private": true, + "scripts": { + "start": "meteor run", + "test": "nightwatch", + "visualize": "meteor --production --extra-packages bundle-visualizer" + }, + "dependencies": { + "@apollo/react-hoc": "beta", + "@babel/runtime": "^7.4.5", + "apollo-cache-inmemory": "^1.6.0", + "apollo-client": "^2.6.0", + "apollo-link-http": "^1.5.14", + "apollo-server": "^2.5.0", + "apollo-server-express": "^2.5.0", + "babel-runtime": "^6.26.0", + "body-parser": "^1.19.0", + "graphql": "^14.3.1", + "graphql-tag": "^2.10.1", + "graphql-tools": "^4.0.4", + "meteor-node-stubs": "^0.4.1", + "node-fetch": "^2.6.0", + "react": "../../../node_modules/react", + "react-dom": "../../../node_modules/react-dom" + }, + "devDependencies": { + "assert": "2.0.0", + "babel-plugin-transform-react-require": "1.0.1", + "babel-preset-react": "6.24.1", + "cheerio": "1.0.0-rc.3", + "chromedriver": "73.0.0", + "nightwatch": "0.9.21", + "selenium-webdriver": "4.0.0-alpha.1" + } +} diff --git a/examples/ssr/server/main.js b/examples/ssr/hoc/server/main.js similarity index 85% rename from examples/ssr/server/main.js rename to examples/ssr/hoc/server/main.js index 433f8c63a2..708823940a 100644 --- a/examples/ssr/server/main.js +++ b/examples/ssr/hoc/server/main.js @@ -1,7 +1,7 @@ import { renderToString } from 'react-dom/server'; import { onPageLoad } from 'meteor/server-render'; import { ApolloClient } from 'apollo-client'; -import { getMarkupFromTree, ApolloProvider } from 'react-apollo'; +import { getMarkupFromTree, ApolloProvider } from '@apollo/react-hoc'; import { InMemoryCache } from 'apollo-cache-inmemory'; import { HttpLink } from 'apollo-link-http'; import { WebApp } from 'meteor/webapp'; @@ -15,10 +15,10 @@ export const render = async sink => { const client = new ApolloClient({ link: new HttpLink({ uri: 'http://localhost:3000/graphql', - fetch, + fetch }), cache: new InMemoryCache(), - ssrMode: true, + ssrMode: true }); const WrappedApp = ( @@ -31,9 +31,9 @@ export const render = async sink => { // Load all data from local server const markup = await getMarkupFromTree({ tree: WrappedApp, - renderFunction: renderToString, + renderFunction: renderToString }); - console.log("server rendering took", Date.now() - start, "ms"); + console.log('server rendering took', Date.now() - start, 'ms'); sink.renderIntoElementById('app', markup); sink.appendToBody(` + `); +}; + +// Handle SSR +onPageLoad(render); + +// Expose graphql endpoint +const server = new ApolloServer({ typeDefs, resolvers }); +server.applyMiddleware({ + app: WebApp.connectHandlers, + path: '/graphql' +}); diff --git a/examples/ssr/hooks/tests/ssr.js b/examples/ssr/hooks/tests/ssr.js new file mode 100644 index 0000000000..d389bfaf7b --- /dev/null +++ b/examples/ssr/hooks/tests/ssr.js @@ -0,0 +1,65 @@ +const cheerio = require('cheerio'); +const assert = require('assert'); + +/* + * + * This is a smoke test for SSR with react apollo + * It uses Meteor to create a client and server environment + * and uses nightwatch to test against it. + * By using source, we can get access to the SSR markup + * and by using .execute / find / etc we can get the client + * built markup after the app has started up + * + * we check three things below + * 1. __APOLLO_STATE__ matches and is created on the server + * 2. The app markup doesn't change from SSR to boot + * 3. A simple test to verify the h3 is rendered and maintained + * +*/ + +module.exports = { + 'Initial State': function(browser) { + let initialState; + let SSRMarkup; + browser + .url(browser.launchUrl) + .source(function(result) { + const $ = cheerio.load(result.value); + + // verify Initial state + const initial = $('script')[0].children[0].data; + const window = {}; + + // parse SSR data + eval(initial); + initialState = window.__APOLLO_STATE__; + + // save generated markup for comparision + SSRMarkup = $('#app').html(); + + // assert SSR markup with quick check of data + assert.equal($('h3').text(), 'R2-D2'); + }) + // ensure the parsed state matches the server state + .execute( + function() { + return window.__APOLLO_STATE__; + }, + function(result) { + assert.deepEqual(result.value, initialState); + }, + ) + // ensure the markup doesn't change once the app starts up + .execute( + function() { + return document.getElementById('app').innerHTML; + }, + function(result) { + assert.equal(result.value, SSRMarkup); + }, + ) + // ensure h3 value didn't change + .expect.element('h3') + .text.to.equal('R2-D2'); + }, +}; diff --git a/examples/ssr/package.json b/examples/ssr/package.json deleted file mode 100644 index 81c94bc9d9..0000000000 --- a/examples/ssr/package.json +++ /dev/null @@ -1,36 +0,0 @@ -{ - "name": "ssr", - "private": true, - "scripts": { - "start": "meteor run", - "test": "nightwatch", - "visualize": "meteor --production --extra-packages bundle-visualizer" - }, - "dependencies": { - "@babel/runtime": "^7.1.2", - "apollo-cache-inmemory": "^1.3.7", - "apollo-client": "^2.4.4", - "apollo-link-http": "^1.5.5", - "apollo-server": "^2.1.0", - "apollo-server-express": "^2.1.0", - "babel-runtime": "^6.26.0", - "body-parser": "^1.18.3", - "graphql": "^14.0.2", - "graphql-tag": "^2.9.2", - "graphql-tools": "^4.0.0", - "meteor-node-stubs": "^0.4.1", - "node-fetch": "^2.2.0", - "react": "^16.5.2", - "react-apollo": "^2.5.0-beta.0", - "react-dom": "^16.5.2" - }, - "devDependencies": { - "assert": "1.5.0", - "babel-plugin-transform-react-require": "1.0.1", - "babel-preset-react": "6.24.1", - "cheerio": "1.0.0-rc.3", - "chromedriver": "73.0.0", - "nightwatch": "0.9.21", - "selenium-webdriver": "4.0.0-alpha.1" - } -} diff --git a/examples/typescript/README.md b/examples/typescript/README.md index ae628cdc97..12669f39ae 100644 --- a/examples/typescript/README.md +++ b/examples/typescript/README.md @@ -4,5 +4,3 @@ npm install npm start ``` - -This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app). diff --git a/examples/typescript/package.json b/examples/typescript/package.json index 6c22c18871..57a1c3f0e4 100644 --- a/examples/typescript/package.json +++ b/examples/typescript/package.json @@ -3,20 +3,20 @@ "version": "0.1.0", "private": true, "dependencies": { + "@apollo/react-components": "beta", "apollo-cache-inmemory": "latest", "apollo-client": "latest", "apollo-link-http": "latest", - "graphql-tag": "^2.6.1", - "react": "^16.2.0", - "react-apollo": "file:../..", - "react-dom": "^16.2.0" + "graphql-tag": "^2.10.1", + "react": "../../node_modules/react", + "react-dom": "../../node_modules/react-dom" }, "devDependencies": { "@types/graphql": "14.2.0", "@types/jest": "24.0.14", - "@types/node": "11.13.14", + "@types/node": "12.0.2", "@types/prop-types": "15.7.1", - "@types/react": "16.8.12", + "@types/react": "16.8.18", "@types/react-dom": "16.8.4", "@types/react-test-renderer": "16.8.2", "apollo-codegen": "0.20.2", diff --git a/examples/typescript/public/favicon.ico b/examples/typescript/public/favicon.ico deleted file mode 100644 index 5c125de5d8..0000000000 Binary files a/examples/typescript/public/favicon.ico and /dev/null differ diff --git a/examples/typescript/public/index.html b/examples/typescript/public/index.html index 7bee027101..f93133dc78 100644 --- a/examples/typescript/public/index.html +++ b/examples/typescript/public/index.html @@ -1,24 +1,12 @@ - + - - - - - - - + + +Loading
;
if (error) return ERROR
; @@ -29,9 +36,11 @@ export const Character: React.SFC{friend.name}:{' '} - {friend.appearsIn.map(x => x && x.toLowerCase()).join(', ')} + {friend.appearsIn + .map(x => x && x.toLowerCase()) + .join(', ')}
- ), + ) )} )} diff --git a/examples/typescript/src/__generated__/types.ts b/examples/typescript/src/__generated__/types.ts index ee598b8490..40420169c9 100644 --- a/examples/typescript/src/__generated__/types.ts +++ b/examples/typescript/src/__generated__/types.ts @@ -5,7 +5,7 @@ export enum Episode { NEWHOPE = 'NEWHOPE', // Star Wars Episode IV: A New Hope, released in 1977. EMPIRE = 'EMPIRE', // Star Wars Episode V: The Empire Strikes Back, released in 1980. - JEDI = 'JEDI', // Star Wars Episode VI: Return of the Jedi, released in 1983. + JEDI = 'JEDI' // Star Wars Episode VI: Return of the Jedi, released in 1983. } export interface GetCharacterQueryVariables { diff --git a/examples/typescript/src/index.tsx b/examples/typescript/src/index.tsx index 46be04ad44..8a6d7e7fe0 100644 --- a/examples/typescript/src/index.tsx +++ b/examples/typescript/src/index.tsx @@ -1,19 +1,19 @@ -import * as React from 'react'; +import React from 'react'; import { render } from 'react-dom'; import { ApolloClient } from 'apollo-client'; import { createHttpLink } from 'apollo-link-http'; import { InMemoryCache } from 'apollo-cache-inmemory'; -import { ApolloProvider } from 'react-apollo'; +import { ApolloProvider } from '@apollo/react-components'; import { App } from './App'; const httpLink = createHttpLink({ - uri: 'https://ojo6385vn6.sse.codesandbox.io', + uri: 'https://ojo6385vn6.sse.codesandbox.io' }); const client = new ApolloClient({ cache: new InMemoryCache(), - link: httpLink, + link: httpLink }); const WrappedApp = ( diff --git a/examples/typescript/tsconfig.json b/examples/typescript/tsconfig.json index b7ec128e6b..91e3467d12 100644 --- a/examples/typescript/tsconfig.json +++ b/examples/typescript/tsconfig.json @@ -15,7 +15,8 @@ "noImplicitAny": true, "strictNullChecks": true, "suppressImplicitAnyIndexErrors": true, - "noUnusedLocals": true + "noUnusedLocals": true, + "esModuleInterop": true }, "exclude": [ "node_modules", diff --git a/examples/typescript/tslint.json b/examples/typescript/tslint.json index 7bc08c7a6b..0967ef424b 100644 --- a/examples/typescript/tslint.json +++ b/examples/typescript/tslint.json @@ -1,38 +1 @@ -{ - "rules": { - "ban": false, - "class-name": true, - "interface-name": [true, "never-prefix"], - "jsdoc-format": true, - "label-position": true, - "member-ordering": [ - true, - "public-before-private", - "static-before-instance", - "variables-before-functions" - ], - "no-any": true, - "no-arg": true, - "no-bitwise": true, - "no-construct": true, - "no-debugger": true, - "no-duplicate-variable": true, - "no-empty": true, - "no-eval": true, - "no-shadowed-variable": true, - "no-switch-case-fall-through": true, - "no-unused-expression": true, - "no-use-before-declare": true, - "radix": true, - "switch-default": true, - "triple-equals": [true, "allow-null-check"], - "typedef": [true, "parameter", "property-declaration"], - "variable-name": [ - true, - "ban-keywords", - "check-format", - "allow-leading-underscore", - "allow-pascal-case" - ] - } -} +{} diff --git a/jest.cjs.config.js b/jest.cjs.config.js deleted file mode 100644 index 0ca648de81..0000000000 --- a/jest.cjs.config.js +++ /dev/null @@ -1,14 +0,0 @@ -const { jest } = require('./package.json'); - -jest.moduleNameMapper = { - '\\.\\./src$': '
+
+## React Apollo - Common
+
+[](https://badge.fury.io/js/%40apollo%2Freact-common)
+[](https://circleci.com/gh/apollographql/react-apollo)
+[](https://spectrum.chat/apollo)
+
+React Apollo common types and helper utilities.
diff --git a/packages/common/config/rollup.config.js b/packages/common/config/rollup.config.js
new file mode 100644
index 0000000000..bc9b44bd97
--- /dev/null
+++ b/packages/common/config/rollup.config.js
@@ -0,0 +1,5 @@
+import { rollup } from '../../../config/rollup.config';
+
+export default rollup({
+ name: 'common'
+});
diff --git a/packages/common/config/tsconfig.json b/packages/common/config/tsconfig.json
new file mode 100644
index 0000000000..fc21045590
--- /dev/null
+++ b/packages/common/config/tsconfig.json
@@ -0,0 +1,8 @@
+{
+ "extends": "../../../config/tsconfig.base.json",
+ "compilerOptions": {
+ "outDir": "../lib"
+ },
+ "include": ["../src/**/*"],
+ "exclude": ["../src/**/__tests__/**/*", "../src/**/__mocks__/**/*"]
+}
diff --git a/packages/common/package.json b/packages/common/package.json
new file mode 100644
index 0000000000..554b3f9758
--- /dev/null
+++ b/packages/common/package.json
@@ -0,0 +1,56 @@
+{
+ "name": "@apollo/react-common",
+ "description": "React Apollo common utilities.",
+ "version": "0.1.0-beta.6",
+ "author": "opensource@apollographql.com",
+ "keywords": [
+ "apollo",
+ "graphql",
+ "react"
+ ],
+ "license": "MIT",
+ "main": "./lib/react-common.cjs.js",
+ "module": "./lib/react-common.esm.js",
+ "typings": "./lib/index.d.ts",
+ "repository": {
+ "type": "git",
+ "url": "apollographql/react-apollo"
+ },
+ "sideEffects": false,
+ "scripts": {
+ "clean": "rm -Rf ./lib/* ./meta/bundlesize/* ./meta/coverage/*",
+ "prepare": "npm run build",
+ "prebuild": "npm run clean",
+ "build": "npx tsc -p ./config",
+ "postbuild": "npx rollup -c ./config/rollup.config.js",
+ "watch": "npx tsc-watch --onSuccess \"npm run postbuild\" -p ./config",
+ "predeploy": "npm run build",
+ "deploy": "npm publish --tag beta",
+ "test": "npx jest --config ../../config/jest.config.js --testPathPattern packages/common",
+ "test:watch": "npx jest --config ../../config/jest.config.js --testPathPattern packages/common --watch",
+ "test:cjs": "npm run build && npx jest --config ../../config/jest.cjs.config.js --testPathPattern packages/common",
+ "test:umd": "npm run build && npx jest --config ../../config/jest.umd.config.js --testPathPattern packages/common"
+ },
+ "peerDependencies": {
+ "apollo-client": "^2.6.2",
+ "apollo-utilities": "^1.3.2",
+ "graphql": "^14.3.1",
+ "react": "^16.8.0"
+ },
+ "dependencies": {
+ "ts-invariant": "^0.4.4",
+ "tslib": "^1.10.0"
+ },
+ "files": [
+ "lib"
+ ],
+ "publishConfig": {
+ "access": "public"
+ },
+ "devDependencies": {
+ "jest": "^24.8.0",
+ "rollup": "^1.15.5",
+ "tsc-watch": "^2.2.1",
+ "typescript": "^3.5.2"
+ }
+}
diff --git a/packages/common/src/context/ApolloConsumer.tsx b/packages/common/src/context/ApolloConsumer.tsx
new file mode 100644
index 0000000000..f6840b2bfd
--- /dev/null
+++ b/packages/common/src/context/ApolloConsumer.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import ApolloClient from 'apollo-client';
+import { invariant } from 'ts-invariant';
+
+import { getApolloContext } from './ApolloContext';
+
+export interface ApolloConsumerProps {
+ children: (client: ApolloClient{this.context.text}
;
+ }
+ }
+
+ return getDataFromTree(oyez
');
+ });
+ });
+
+ it('should run through all of the queries (also defined via Query component) that want SSR', () => {
+ const query = gql`
+ {
+ currentUser {
+ firstName
+ }
+ }
+ `;
+ const data1 = { currentUser: { firstName: 'James' } };
+ const link = mockSingleLink({
+ request: { query },
+ result: { data: data1 },
+ delay: 50
+ });
+ const apolloClient = new ApolloClient({
+ link,
+ cache: new Cache({ addTypename: false })
+ });
+
+ interface Data {
+ currentUser?: {
+ firstName: string;
+ };
+ }
+
+ const WrappedElement = () => (
+
+ {loading || !data ? 'loading' : data.currentUser!.firstName}
+
+ )}
+
+
+## React Apollo - HOC
+
+[](https://badge.fury.io/js/%40apollo%2Freact-hoc)
+[](https://circleci.com/gh/apollographql/react-apollo)
+[](https://spectrum.chat/apollo)
+
+React Apollo `graphql` higher-order component.
diff --git a/packages/hoc/config/rollup.config.js b/packages/hoc/config/rollup.config.js
new file mode 100644
index 0000000000..553377dbe5
--- /dev/null
+++ b/packages/hoc/config/rollup.config.js
@@ -0,0 +1,8 @@
+import { rollup } from '../../../config/rollup.config';
+
+export default rollup({
+ name: 'hoc',
+ extraGlobals: {
+ '@apollo/react-components': 'apolloReactComponents'
+ }
+});
diff --git a/packages/hoc/config/tsconfig.json b/packages/hoc/config/tsconfig.json
new file mode 100644
index 0000000000..fc21045590
--- /dev/null
+++ b/packages/hoc/config/tsconfig.json
@@ -0,0 +1,8 @@
+{
+ "extends": "../../../config/tsconfig.base.json",
+ "compilerOptions": {
+ "outDir": "../lib"
+ },
+ "include": ["../src/**/*"],
+ "exclude": ["../src/**/__tests__/**/*", "../src/**/__mocks__/**/*"]
+}
diff --git a/packages/hoc/package.json b/packages/hoc/package.json
new file mode 100644
index 0000000000..228e5a7bc3
--- /dev/null
+++ b/packages/hoc/package.json
@@ -0,0 +1,61 @@
+{
+ "name": "@apollo/react-hoc",
+ "description": "React Apollo `graphql` higher-order component.",
+ "version": "0.1.0-beta.5",
+ "author": "opensource@apollographql.com",
+ "keywords": [
+ "apollo",
+ "graphql",
+ "react",
+ "hoc"
+ ],
+ "license": "MIT",
+ "main": "./lib/react-hoc.cjs.js",
+ "module": "./lib/react-hoc.esm.js",
+ "react-native": {
+ "react-dom/server": false
+ },
+ "typings": "./lib/index.d.ts",
+ "repository": {
+ "type": "git",
+ "url": "apollographql/react-apollo"
+ },
+ "sideEffects": false,
+ "scripts": {
+ "clean": "rm -Rf ./lib/* ./meta/bundlesize/* ./meta/coverage/*",
+ "prepare": "npm run build",
+ "prebuild": "npm run clean",
+ "build": "npx tsc -p ./config",
+ "postbuild": "npx rollup -c ./config/rollup.config.js",
+ "watch": "npx tsc-watch --onSuccess \"npm run postbuild\" -p ./config",
+ "predeploy": "npm run build",
+ "deploy": "npm publish --tag beta",
+ "test": "npx jest --config ../../config/jest.config.js --testPathPattern packages/hoc",
+ "test:watch": "npx jest --config ../../config/jest.config.js --testPathPattern packages/hoc --watch",
+ "test:cjs": "npm run build && npx jest --config ../../config/jest.cjs.config.js --testPathPattern packages/hoc",
+ "test:umd": "npm run build && npx jest --config ../../config/jest.umd.config.js --testPathPattern packages/hoc"
+ },
+ "peerDependencies": {
+ "apollo-client": "^2.6.2",
+ "graphql": "^14.3.1",
+ "react": "^16.8.0"
+ },
+ "dependencies": {
+ "@apollo/react-common": "file:../common",
+ "@apollo/react-components": "file:../components",
+ "ts-invariant": "^0.4.4",
+ "tslib": "^1.10.0"
+ },
+ "files": [
+ "lib"
+ ],
+ "publishConfig": {
+ "access": "public"
+ },
+ "devDependencies": {
+ "jest": "^24.8.0",
+ "rollup": "^1.15.5",
+ "tsc-watch": "^2.2.1",
+ "typescript": "^3.5.2"
+ }
+}
diff --git a/packages/hoc/src/__tests__/MockedProvider.test.tsx b/packages/hoc/src/__tests__/MockedProvider.test.tsx
new file mode 100644
index 0000000000..09b10a76b6
--- /dev/null
+++ b/packages/hoc/src/__tests__/MockedProvider.test.tsx
@@ -0,0 +1,730 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import { InMemoryCache } from 'apollo-cache-inmemory';
+import gql from 'graphql-tag';
+import { MockedProvider, MockedResponse } from '@apollo/react-testing';
+import { DocumentNode } from 'graphql';
+import { graphql, ChildProps } from '@apollo/react-hoc';
+
+const variables = {
+ username: 'mock_username'
+};
+
+const userWithoutTypeName = {
+ id: 'user_id'
+};
+
+const user = {
+ __typename: 'User',
+ ...userWithoutTypeName
+};
+
+const query: DocumentNode = gql`
+ query GetUser($username: String!) {
+ user(username: $username) {
+ id
+ }
+ }
+`;
+const queryWithTypename: DocumentNode = gql`
+ query GetUser($username: String!) {
+ user(username: $username) {
+ id
+ __typename
+ }
+ }
+`;
+
+interface Data {
+ user: {
+ id: string;
+ };
+}
+
+interface Variables {
+ username: string;
+}
+
+const withUser = graphql- stub -
+
+
`;
diff --git a/test/client/graphql/queries/api.test.tsx b/packages/hoc/src/__tests__/queries/api.test.tsx
similarity index 74%
rename from test/client/graphql/queries/api.test.tsx
rename to packages/hoc/src/__tests__/queries/api.test.tsx
index a527684763..c41011d895 100644
--- a/test/client/graphql/queries/api.test.tsx
+++ b/packages/hoc/src/__tests__/queries/api.test.tsx
@@ -1,16 +1,16 @@
-import * as React from 'react';
-import * as renderer from 'react-test-renderer';
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
import gql from 'graphql-tag';
import ApolloClient from 'apollo-client';
import { InMemoryCache as Cache } from 'apollo-cache-inmemory';
-import { mockSingleLink } from '../../../../src/test-utils';
-import { ApolloProvider, ChildProps, graphql } from '../../../../src';
-
-import wrap from '../../../test-utils/wrap';
-import stripSymbols from '../../../test-utils/stripSymbols';
+import { mockSingleLink, stripSymbols } from '@apollo/react-testing';
import { DocumentNode } from 'graphql';
+import { ApolloProvider } from '@apollo/react-common';
+import { graphql, ChildProps } from '@apollo/react-hoc';
describe('[queries] api', () => {
+ afterEach(cleanup);
+
// api
it('exposes refetch as part of the props api', done => {
const query: DocumentNode = gql`
@@ -27,11 +27,11 @@ describe('[queries] api', () => {
const link = mockSingleLink(
{ request: { query, variables }, result: { data: data1 } },
{ request: { query, variables }, result: { data: data1 } },
- { request: { query, variables: { first: 2 } }, result: { data: data1 } },
+ { request: { query, variables: { first: 2 } }, result: { data: data1 } }
);
const client = new ApolloClient({
link,
- cache: new Cache({ addTypename: false }),
+ cache: new Cache({ addTypename: false })
});
let hasRefetched = false,
@@ -46,11 +46,8 @@ describe('[queries] api', () => {
const Container = graphql+ stub +
+{this.props.first}
;
}
- },
+ }
);
- renderer.create(
+ render(
{this.props.children}
;
}
- },
+ }
);
class ContextContainer extends React.Component<{}, { color: string }> {
@@ -541,7 +558,7 @@ describe('queries', () => {
}
(ContextContainer as any).childContextTypes = {
- color: PropTypes.string,
+ color: PropTypes.string
};
let count = 0;
@@ -560,17 +577,17 @@ describe('queries', () => {
}
(ChildContextContainer as any).contextTypes = {
- color: PropTypes.string,
+ color: PropTypes.string
};
- renderer.create(
+ render(
loading
;
}
if (error) {
@@ -733,7 +809,7 @@ describe('[queries] lifecycle', () => {
//data you get is fresh, so one would wait for an interaction
setTimeout(() => {
refetch()
- .then(refetchResult => {
+ .then((refetchResult: any) => {
expect(refetchResult.data.books[0].name).toEqual('first');
done();
})
@@ -753,6 +829,6 @@ describe('[queries] lifecycle', () => {
);
//render
- expect(create(ApolloApp).toJSON()).toMatchSnapshot();
+ expect(render(ApolloApp).container).toMatchSnapshot();
});
});
diff --git a/test/client/graphql/queries/loading.test.tsx b/packages/hoc/src/__tests__/queries/loading.test.tsx
similarity index 59%
rename from test/client/graphql/queries/loading.test.tsx
rename to packages/hoc/src/__tests__/queries/loading.test.tsx
index 18b047f68e..f52bb1a22f 100644
--- a/test/client/graphql/queries/loading.test.tsx
+++ b/packages/hoc/src/__tests__/queries/loading.test.tsx
@@ -1,17 +1,16 @@
-import * as React from 'react';
-import * as renderer from 'react-test-renderer';
-import * as ReactDOM from 'react-dom';
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
import gql from 'graphql-tag';
import ApolloClient from 'apollo-client';
-import { mount, ReactWrapper } from 'enzyme';
import { InMemoryCache as Cache } from 'apollo-cache-inmemory';
-import { mockSingleLink } from '../../../../src/test-utils';
-import { ApolloProvider, graphql, ChildProps } from '../../../../src';
-
-import stripSymbols from '../../../test-utils/stripSymbols';
+import { mockSingleLink, stripSymbols } from '@apollo/react-testing';
+import { ApolloProvider } from '@apollo/react-common';
import { DocumentNode } from 'graphql';
+import { graphql, ChildProps } from '@apollo/react-hoc';
describe('[queries] loading', () => {
+ afterEach(cleanup);
+
// networkStatus / loading
it('exposes networkStatus as a part of the props api', done => {
const query: DocumentNode = gql`
@@ -25,31 +24,32 @@ describe('[queries] loading', () => {
`;
const link = mockSingleLink({
request: { query },
- result: { data: { allPeople: { people: [{ name: 'Luke Skywalker' }] } } },
+ result: { data: { allPeople: { people: [{ name: 'Luke Skywalker' }] } } }
});
const client = new ApolloClient({
link,
- cache: new Cache({ addTypename: false }),
+ cache: new Cache({ addTypename: false })
});
const Container = graphql(query, {
- options: { notifyOnNetworkStatusChange: true },
+ options: { notifyOnNetworkStatusChange: true }
})(
class extends React.Component
-
-
-
-