added apollo-client 2 examples with react-apollo

Author: dotansimha

examples/apollo-client-2/codegen.yml

@@ -0,0 +1,8 @@
+schema: schema.graphql
+documents: query.graphql
+generates:
+  ./typed-document-nodes.ts:
+    plugins:
+      - typescript
+      - typescript-operations
+      - typed-document-node

examples/apollo-client-2/component.tsx

@@ -0,0 +1,18 @@
+/* eslint-disable */
+import * as React from 'react';
+import { RatesDocument } from './typed-document-nodes';
+import { Query } from 'react-apollo';
+
+const MyComponent: React.FC = () => {
+  return (
+    <div>
+      <Query query={RatesDocument}>
+        {
+          ({ data }) => {
+            return data?.rates[0].rate;
+          }
+        }
+      </Query>
+    </div>
+  )
+}

examples/apollo-client-2/index.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+import { RatesDocument } from './typed-document-nodes';
+import { ApolloClient } from 'apollo-client';
+import { InMemoryCache } from 'apollo-cache-inmemory'
+
+const client = new ApolloClient({
+  cache: new InMemoryCache(),
+});
+
+async function main() {
+  // We now have types support and auto complete for the
+  // result type, just by passing `RatesDocument` as `query` to apollo client.
+  const result = await client.query({
+    query: RatesDocument,
+    variables: {
+      currency: "USD",
+    },
+  });
+
+  const rates = result.data.rates;
+  const currency = rates[0].rate;
+}

examples/apollo-client-2/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "apollo-client-example",
+  "private": true,
+  "version": "3.0.0",
+  "scripts": {
+    "postinstall": "patch-typed-document-node && yarn generate",
+    "generate": "graphql-codegen",
+    "precompile": "yarn generate",
+    "compile": "tsc"
+  },
+  "dependencies": {
+    "@graphql-codegen/cli": "1.17.8",
+    "@graphql-codegen/typed-document-node": "1.17.9",
+    "@graphql-codegen/typescript": "1.17.8",
+    "@graphql-codegen/typescript-operations": "1.17.8",
+    "@graphql-typed-document-node/core": "^3.1.0",
+    "@graphql-typed-document-node/patch-cli": "^3.0.3",
+    "@types/node": "14.0.27",
+    "@types/react": "^16.9.46",
+    "apollo-cache": "^1.3.5",
+    "apollo-cache-inmemory": "^1.6.6",
+    "apollo-cache-persist": "^0.1.1",
+    "apollo-client": "^2.6.10",
+    "apollo-link": "^1.2.14",
+    "apollo-link-schema": "^1.2.5",
+    "graphql": "15.3.0",
+    "react": "^16.13.1",
+    "react-apollo": "^3.1.5",
+    "typescript": "3.9.7"
+  }
+}

examples/apollo-client-2/query.graphql

@@ -0,0 +1,6 @@
+query rates($currency: String!) {
+  rates(currency: $currency) {
+    currency
+    rate
+  }
+}

examples/apollo-client-2/sandbox.config.json

@@ -0,0 +1,5 @@
+{
+  "infiniteLoopProtection": true,
+  "hardReloadOnChange": false,
+  "template": "node"
+}

examples/apollo-client-2/schema.graphql

@@ -0,0 +1,9 @@
+type ExchangeRate {
+  currency: String
+  rate: String
+  name: String
+}
+
+type Query {
+  rates(currency: String!): [ExchangeRate]
+}

examples/apollo-client-2/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "incremental": true,
+    "baseUrl": ".",
+    "jsx": "react",
+    "outDir": "dist",
+    "rootDir": "./",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "importHelpers": true,
+    "experimentalDecorators": true,
+    "module": "esnext",
+    "target": "es2018",
+    "lib": ["es6", "esnext", "es2015", "dom"],
+    "suppressImplicitAnyIndexErrors": true,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "sourceMap": true,
+    "declaration": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "noImplicitReturns": true,
+    "noUnusedLocals": false,
+    "resolveJsonModule": true
+  },
+  "include": ["./"],
+  "exclude": [
+    "**/dist",
+    "**/temp"
+  ]
+}

examples/apollo-client-2/typed-document-nodes.ts

@@ -0,0 +1,44 @@
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+export type Maybe<T> = T | null;
+export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
+/** All built-in and custom scalars, mapped to their actual values */
+export type Scalars = {
+  ID: string;
+  String: string;
+  Boolean: boolean;
+  Int: number;
+  Float: number;
+};
+
+export type ExchangeRate = {
+  __typename?: 'ExchangeRate';
+  currency?: Maybe<Scalars['String']>;
+  rate?: Maybe<Scalars['String']>;
+  name?: Maybe<Scalars['String']>;
+};
+
+export type Query = {
+  __typename?: 'Query';
+  rates?: Maybe<Array<Maybe<ExchangeRate>>>;
+};
+
+
+export type QueryRatesArgs = {
+  currency: Scalars['String'];
+};
+
+export type RatesQueryVariables = Exact<{
+  currency: Scalars['String'];
+}>;
+
+
+export type RatesQuery = (
+  { __typename?: 'Query' }
+  & { rates?: Maybe<Array<Maybe<(
+    { __typename?: 'ExchangeRate' }
+    & Pick<ExchangeRate, 'currency' | 'rate'>
+  )>>> }
+);
+
+
+export const RatesDocument: DocumentNode<RatesQuery, RatesQueryVariables> = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"rates"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"currency"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},"directives":[]}],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"rates"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"currency"},"value":{"kind":"Variable","name":{"kind":"Name","value":"currency"}}}],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"rate"},"arguments":[],"directives":[]}]}}]}}]};