Minor examples improvements (#9148)

Author: beerose

examples/react/graphql-request/.gitignore renamed to examples/react/http-executor/.gitignore

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { node: process.versions.node.split('.')[0] } }],
+    '@babel/preset-typescript',
+  ],
+};

examples/react/graphql-request/README.md renamed to examples/react/http-executor/README.md

@@ -0,0 +1,4 @@
+module.exports = {
+  transform: { '^.+\\.ts': 'babel-jest' },
+  testPathIgnorePatterns: ['/node_modules/', '/dist/'],
+};

examples/react/graphql-request/codegen.ts renamed to examples/react/http-executor/codegen.ts

@@ -4,7 +4,9 @@
   "private": true,
   "devDependencies": {
     "@graphql-codegen/cli": "3.2.2",
-    "@graphql-codegen/gql-tag-operations-preset": "2.1.0"
+    "@graphql-codegen/gql-tag-operations-preset": "2.1.0",
+    "babel-jest": "28.1.3",
+    "jest": "28.1.3"
   },
   "dependencies": {
     "graphql": "16.6.0",
@@ -15,7 +17,7 @@
     "codegen": "graphql-codegen --config codegen.ts",
     "build": "tsc",
     "dev": "ts-node src/main.ts",
-    "test:end2end": "node dist/main.js"
+    "test:end2end": "yarn jest"
   },
   "type": "commonjs",
   "bob": false

examples/react/graphql-request/cypress.config.ts renamed to examples/react/http-executor/cypress.config.ts

@@ -0,0 +1,13 @@
+import { getPeople } from './main';
+
+describe('TypeScript GraphQL Request tests', () => {
+  it('works without variables', async () => {
+    const result = await getPeople();
+    expect(result?.map(o => o?.node?.name)).toContain('Luke Skywalker');
+  });
+
+  it('returns first 3 entries', async () => {
+    const result = await getPeople(3);
+    expect(result).toHaveLength(3);
+  });
+});

examples/react/graphql-request/cypress/e2e/end2end.cy.ts renamed to examples/react/http-executor/cypress/e2e/end2end.cy.ts

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import { GraphQLClient } from 'graphql-request';
 import { graphql } from './gql';
+import { AllPeopleQueryQuery } from './gql/graphql';
 
 const AllPeopleQueryDocument = graphql(/* GraphQL */ `
   query AllPeopleQuery {
@@ -36,10 +37,15 @@ const apiUrl = 'https://swapi-graphql.netlify.app/.netlify/functions/index';
 
 const client = new GraphQLClient(apiUrl);
 
-client.request(AllPeopleQueryDocument).then(res => {
-  console.log(res?.allPeople?.edges);
-});
+export const getPeople = async (first?: number) => {
+  let res: AllPeopleQueryQuery;
+  if (first) {
+    res = await client.request(AllPeopleWithVariablesQueryDocument, { first });
+  } else {
+    res = await client.request(AllPeopleQueryDocument);
+  }
+  return res?.allPeople?.edges;
+};
 
-client.request(AllPeopleWithVariablesQueryDocument, { first: 10 }).then(res => {
-  console.log(res?.allPeople?.edges);
-});
+getPeople().then(res => console.log(res));
+getPeople(10).then(res => console.log(res));