Apollo

1file:///Users/[my name]/Repositories/[project]/node_modules/@apollo/client/utilities/globals/fix-graphql.js:1
2import { remove } from "ts-invariant/process/index.js";
3         ^^^^^^
4SyntaxError: Named export 'remove' not found. The requested module 'ts-invariant/process/index.js' is a CommonJS module, which may not support all module.exports as named exports.
5CommonJS modules can always be imported via the default export, for example using:
6
7import pkg from 'ts-invariant/process/index.js';
8const { remove } = pkg;
9
10    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
11    at async ModuleJob.run (node:internal/modules/esm/module_job:181:5)
12    at async Promise.all (index 0)
13    at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
14    at async __instantiateModule__ (file:///Users/[my name]/Repositories/[project]/.nuxt/dist/server/server.mjs:4550:3)
15[vite dev] Error loading external "/Users/[my name]/Repositories/[project]/node_modules/@apollo/client/core/index.js".
16  at file://./.nuxt/dist/server/server.mjs:3170:289  
17  at async __instantiateModule__ (file://./.nuxt/dist/server/server.mjs:4550:3)
18

1file:///Users/[my name]/Repositories/[project]/node_modules/@apollo/client/utilities/globals/fix-graphql.js:1
2import { remove } from "ts-invariant/process/index.js";
3         ^^^^^^
4SyntaxError: Named export 'remove' not found. The requested module 'ts-invariant/process/index.js' is a CommonJS module, which may not support all module.exports as named exports.
5CommonJS modules can always be imported via the default export, for example using:
6
7import pkg from 'ts-invariant/process/index.js';
8const { remove } = pkg;
9
10    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
11    at async ModuleJob.run (node:internal/modules/esm/module_job:181:5)
12    at async Promise.all (index 0)
13    at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
14    at async __instantiateModule__ (file:///Users/[my name]/Repositories/[project]/.nuxt/dist/server/server.mjs:4550:3)
15[vite dev] Error loading external "/Users/[my name]/Repositories/[project]/node_modules/@apollo/client/core/index.js".
16  at file://./.nuxt/dist/server/server.mjs:3170:289  
17  at async __instantiateModule__ (file://./.nuxt/dist/server/server.mjs:4550:3)
18import { defineNuxtPlugin } from "#app"
19import { ApolloClient, InMemoryCache } from "@apollo/client/core"
20import { DefaultApolloClient } from "@vue/apollo-composable"
21
22export default defineNuxtPlugin((nuxtApp) => {
23  const config = useRuntimeConfig()
24  const apolloClient = new ApolloClient({
25    uri: config.PUBLIC_API_ENDPOINT,
26    cache: new InMemoryCache(),
27  })
28  nuxtApp.vueApp.provide(DefaultApolloClient, apolloClient)
29})
30

1import {
2  ApolloClient,
3  ApolloProvider,
4  InMemoryCache,
5  HttpLink,
6  gql,
7  useQuery,
8} from "@apollo/client";
9
10const client = new ApolloClient({
11  link: new HttpLink({
12    uri: "http://localhost:8080/v1/graphql",
13  }),
14  cache: new InMemoryCache(),
15});
16
17function App() {
18  return (
19    <div className="App">
20      <ApolloProvider client={client}>
21        <ProductList />
22      </ApolloProvider>
23    </div>
24  );
25}
26
27const ProductList = () => {
28  const GET_PRODUCTS = gql`
29    query get_products {
30      product {
31        id
32        name
33        __typename
34      }
35    }
36  `;
37
38  const { loading, error, data } = useQuery(GET_PRODUCTS);
39  if (loading) return <p>Loading ...</p>;
40  if (error) return <p> {error.message}</p>;
41  return (
42    <>
43      <h1>ProductList</h1>
44      <ul>
45        {data?.product.map((product: any) => {
46          return <li key={product.id}>{product.name}</li>;
47        })}
48      </ul>
49    </>
50  );
51};
52
53export default App;
54

1node_modules/@apollo/federation/dist/composition/utils.d.ts:43:316 - error TS2503: Cannot find namespace 'Kind'.
2

1    "@nestjs/core": "^8.0.6",
2    "@nestjs/graphql": "^9.0.4",
3    "@nestjs/platform-express": "^8.0.6",
4    "graphql": "^15.5.3",
5    "graphql-tools": "^8.2.0",
6    "apollo-server-express": "^3.3.0",
7

1    "@nestjs/core": "^8.0.6",
2    "@nestjs/graphql": "^9.0.4",
3    "@nestjs/platform-express": "^8.0.6",
4    "graphql": "^15.5.3",
5    "graphql-tools": "^8.2.0",
6    "apollo-server-express": "^3.3.0",
7    GraphQLModule.forRoot({
8      autoSchemaFile: true,
9      sortSchema: true,
10      playground: true,
11      installSubscriptionHandlers: true,
12      subscriptions: {
13        'graphql-ws': true
14      },
15    }),
16

1    "@nestjs/core": "^8.0.6",
2    "@nestjs/graphql": "^9.0.4",
3    "@nestjs/platform-express": "^8.0.6",
4    "graphql": "^15.5.3",
5    "graphql-tools": "^8.2.0",
6    "apollo-server-express": "^3.3.0",
7    GraphQLModule.forRoot({
8      autoSchemaFile: true,
9      sortSchema: true,
10      playground: true,
11      installSubscriptionHandlers: true,
12      subscriptions: {
13        'graphql-ws': true
14      },
15    }),
16{
17  "error": "Could not connect to websocket endpoint ws://localhost:8880/graphql. Please check if the endpoint url is correct."
18}
19

1    "@nestjs/core": "^8.0.6",
2    "@nestjs/graphql": "^9.0.4",
3    "@nestjs/platform-express": "^8.0.6",
4    "graphql": "^15.5.3",
5    "graphql-tools": "^8.2.0",
6    "apollo-server-express": "^3.3.0",
7    GraphQLModule.forRoot({
8      autoSchemaFile: true,
9      sortSchema: true,
10      playground: true,
11      installSubscriptionHandlers: true,
12      subscriptions: {
13        'graphql-ws': true
14      },
15    }),
16{
17  "error": "Could not connect to websocket endpoint ws://localhost:8880/graphql. Please check if the endpoint url is correct."
18}
19WebSocket protocol error occured. It was most likely caused due to an unsupported subprotocol "graphql-ws" requested by the client. graphql-ws implements exclusively the "graphql-transport-ws" subprotocol, please make sure that the client implements it too.
20

1import { gql } from 'apollo-server-lambda';
2
3const typeDefs = gql`
4  enum Genre {
5    adventure
6    drama
7    scifi
8  }
9
10  enum Authors {
11    AUTHOR
12  }
13
14  # Root Query - all the queries supported by the schema
15
16  type Query {
17    """
18    All Authors query
19    """
20    authors(author: Authors): [Author]
21    books(book: String): [Book]
22  }
23
24  # Root Mutation - all the mutations supported by the schema
25  type Mutation {
26    createBook(input: CreateBook!): Book
27  }
28
29  """
30  One Author can have many books
31  """
32  type Author {
33    id: ID!
34    authorName: String
35    book: [Book]!
36  }
37
38  """
39  Book Schema
40  """
41  type Book {
42    id: ID!
43    name: String
44    price: String
45    publishingYear: String
46    publisher: String
47    author: [Author]
48    description: String
49    page: Int
50    genre: [Genre]
51  }
52
53  input CreateBook {
54    name: String
55    price: String
56    publishingYear: String
57    publisher: String
58    author: [CreateAuthor]
59    description: String
60    page: Int
61    genre: [Genre]
62  }
63
64  input CreateAuthor {
65    authorName: String!
66  }
67`;
68export default typeDefs;

1import { gql } from 'apollo-server-lambda';
2
3const typeDefs = gql`
4  enum Genre {
5    adventure
6    drama
7    scifi
8  }
9
10  enum Authors {
11    AUTHOR
12  }
13
14  # Root Query - all the queries supported by the schema
15
16  type Query {
17    """
18    All Authors query
19    """
20    authors(author: Authors): [Author]
21    books(book: String): [Book]
22  }
23
24  # Root Mutation - all the mutations supported by the schema
25  type Mutation {
26    createBook(input: CreateBook!): Book
27  }
28
29  """
30  One Author can have many books
31  """
32  type Author {
33    id: ID!
34    authorName: String
35    book: [Book]!
36  }
37
38  """
39  Book Schema
40  """
41  type Book {
42    id: ID!
43    name: String
44    price: String
45    publishingYear: String
46    publisher: String
47    author: [Author]
48    description: String
49    page: Int
50    genre: [Genre]
51  }
52
53  input CreateBook {
54    name: String
55    price: String
56    publishingYear: String
57    publisher: String
58    author: [CreateAuthor]
59    description: String
60    page: Int
61    genre: [Genre]
62  }
63
64  input CreateAuthor {
65    authorName: String!
66  }
67`;
68export default typeDefs;import AWS from 'aws-sdk';
69import { v4 } from 'uuid';
70import { CreateBook } from '../../generated/schema';
71
72async function createBook(_: unknown, { input }: { input: CreateBook }) {
73  const dynamoDb = new AWS.DynamoDB.DocumentClient();
74  const id = v4();
75
76  const authorsName = 
77    input.author &&
78    input.author.map(function (item) {
79      return item['authorName'];
80    });
81
82  const params = {
83    TableName: process.env.ITEM_TABLE ? process.env.ITEM_TABLE : '',
84    Item: {
85      PK: `AUTHOR`,
86      SK: `AUTHORS#${id}`,
87      GSI1PK: `BOOKS`,
88      GSI1SK: `BOOK#${input.name}`,
89      name: input.name,
90      author: authorsName,
91      price: input.price,
92      publishingYear: input.publishingYear,
93      publisher: input.publisher,
94      page: input.page,
95      description: input.description,
96      genre: input.genre,
97    },
98  };
99
100  await dynamoDb.put(params).promise();
101
102  return {
103    ...input,
104    id,
105  };
106}
107
108export default createBook;

1import { gql } from 'apollo-server-lambda';
2
3const typeDefs = gql`
4  enum Genre {
5    adventure
6    drama
7    scifi
8  }
9
10  enum Authors {
11    AUTHOR
12  }
13
14  # Root Query - all the queries supported by the schema
15
16  type Query {
17    """
18    All Authors query
19    """
20    authors(author: Authors): [Author]
21    books(book: String): [Book]
22  }
23
24  # Root Mutation - all the mutations supported by the schema
25  type Mutation {
26    createBook(input: CreateBook!): Book
27  }
28
29  """
30  One Author can have many books
31  """
32  type Author {
33    id: ID!
34    authorName: String
35    book: [Book]!
36  }
37
38  """
39  Book Schema
40  """
41  type Book {
42    id: ID!
43    name: String
44    price: String
45    publishingYear: String
46    publisher: String
47    author: [Author]
48    description: String
49    page: Int
50    genre: [Genre]
51  }
52
53  input CreateBook {
54    name: String
55    price: String
56    publishingYear: String
57    publisher: String
58    author: [CreateAuthor]
59    description: String
60    page: Int
61    genre: [Genre]
62  }
63
64  input CreateAuthor {
65    authorName: String!
66  }
67`;
68export default typeDefs;import AWS from 'aws-sdk';
69import { v4 } from 'uuid';
70import { CreateBook } from '../../generated/schema';
71
72async function createBook(_: unknown, { input }: { input: CreateBook }) {
73  const dynamoDb = new AWS.DynamoDB.DocumentClient();
74  const id = v4();
75
76  const authorsName = 
77    input.author &&
78    input.author.map(function (item) {
79      return item['authorName'];
80    });
81
82  const params = {
83    TableName: process.env.ITEM_TABLE ? process.env.ITEM_TABLE : '',
84    Item: {
85      PK: `AUTHOR`,
86      SK: `AUTHORS#${id}`,
87      GSI1PK: `BOOKS`,
88      GSI1SK: `BOOK#${input.name}`,
89      name: input.name,
90      author: authorsName,
91      price: input.price,
92      publishingYear: input.publishingYear,
93      publisher: input.publisher,
94      page: input.page,
95      description: input.description,
96      genre: input.genre,
97    },
98  };
99
100  await dynamoDb.put(params).promise();
101
102  return {
103    ...input,
104    id,
105  };
106}
107
108export default createBook;import AWS from 'aws-sdk';
109
110async function books(_: unknown, input: { book: string }) {
111  const dynamoDb = new AWS.DynamoDB.DocumentClient();
112
113  const params = {
114    TableName: process.env.ITEM_TABLE ? process.env.ITEM_TABLE : '',
115    IndexName: 'GSI1',
116    KeyConditionExpression: 'GSI1PK = :hkey',
117    ExpressionAttributeValues: {
118      ':hkey': `${input.book}`,
119    },
120  };
121
122  const { Items } = await dynamoDb.query(params).promise();
123
124  const allBooks =  // NEED TO MAP THE FUNcTION THEN RETURN THE DATA BASED ON GRAPHQL //QUERIES.
125    Items &&
126    Items.map((i) => {
127      const genre = i.genre.filter((i) => i);
128      return {
129        name: i.name,
130        author: i.author,
131        genre,
132      };
133    });
134
135  return allBooks;
136}
137
138export default books;

1import { gql } from 'apollo-server-lambda';
2
3const typeDefs = gql`
4  enum Genre {
5    adventure
6    drama
7    scifi
8  }
9
10  enum Authors {
11    AUTHOR
12  }
13
14  # Root Query - all the queries supported by the schema
15
16  type Query {
17    """
18    All Authors query
19    """
20    authors(author: Authors): [Author]
21    books(book: String): [Book]
22  }
23
24  # Root Mutation - all the mutations supported by the schema
25  type Mutation {
26    createBook(input: CreateBook!): Book
27  }
28
29  """
30  One Author can have many books
31  """
32  type Author {
33    id: ID!
34    authorName: String
35    book: [Book]!
36  }
37
38  """
39  Book Schema
40  """
41  type Book {
42    id: ID!
43    name: String
44    price: String
45    publishingYear: String
46    publisher: String
47    author: [Author]
48    description: String
49    page: Int
50    genre: [Genre]
51  }
52
53  input CreateBook {
54    name: String
55    price: String
56    publishingYear: String
57    publisher: String
58    author: [CreateAuthor]
59    description: String
60    page: Int
61    genre: [Genre]
62  }
63
64  input CreateAuthor {
65    authorName: String!
66  }
67`;
68export default typeDefs;import AWS from 'aws-sdk';
69import { v4 } from 'uuid';
70import { CreateBook } from '../../generated/schema';
71
72async function createBook(_: unknown, { input }: { input: CreateBook }) {
73  const dynamoDb = new AWS.DynamoDB.DocumentClient();
74  const id = v4();
75
76  const authorsName = 
77    input.author &&
78    input.author.map(function (item) {
79      return item['authorName'];
80    });
81
82  const params = {
83    TableName: process.env.ITEM_TABLE ? process.env.ITEM_TABLE : '',
84    Item: {
85      PK: `AUTHOR`,
86      SK: `AUTHORS#${id}`,
87      GSI1PK: `BOOKS`,
88      GSI1SK: `BOOK#${input.name}`,
89      name: input.name,
90      author: authorsName,
91      price: input.price,
92      publishingYear: input.publishingYear,
93      publisher: input.publisher,
94      page: input.page,
95      description: input.description,
96      genre: input.genre,
97    },
98  };
99
100  await dynamoDb.put(params).promise();
101
102  return {
103    ...input,
104    id,
105  };
106}
107
108export default createBook;import AWS from 'aws-sdk';
109
110async function books(_: unknown, input: { book: string }) {
111  const dynamoDb = new AWS.DynamoDB.DocumentClient();
112
113  const params = {
114    TableName: process.env.ITEM_TABLE ? process.env.ITEM_TABLE : '',
115    IndexName: 'GSI1',
116    KeyConditionExpression: 'GSI1PK = :hkey',
117    ExpressionAttributeValues: {
118      ':hkey': `${input.book}`,
119    },
120  };
121
122  const { Items } = await dynamoDb.query(params).promise();
123
124  const allBooks =  // NEED TO MAP THE FUNcTION THEN RETURN THE DATA BASED ON GRAPHQL //QUERIES.
125    Items &&
126    Items.map((i) => {
127      const genre = i.genre.filter((i) => i);
128      return {
129        name: i.name,
130        author: i.author,
131        genre,
132      };
133    });
134
135  return allBooks;
136}
137
138export default books;import AWS from 'aws-sdk';
139import { Author, Authors } from '../../generated/schema';
140
141async function authors(
142  _: unknown,
143  input: { author: Authors }
144): Promise<Author> {
145  const dynamoDb = new AWS.DynamoDB.DocumentClient();
146
147  const params = {
148    TableName: process.env.ITEM_TABLE ? process.env.ITEM_TABLE : '',
149    KeyConditionExpression: 'PK = :hkey',
150    ExpressionAttributeValues: {
151      ':hkey': `${input.author}`,
152    },
153  };
154
155  const { Items } = await dynamoDb.query(params).promise();
156
157  console.log({ Items }); // I can see the data but don't know how to returns the data like this below type without using map function
158
159  // type Author {
160  //   id: ID!
161  //   authorName: String
162  //   book: [Book]!
163  // }
164
165  return Items; // return null in Graphql play ground. 
166}
167
168export default authors;

1import { gql } from 'apollo-server-lambda';
2
3const typeDefs = gql`
4  enum Genre {
5    adventure
6    drama
7    scifi
8  }
9
10  enum Authors {
11    AUTHOR
12  }
13
14  # Root Query - all the queries supported by the schema
15
16  type Query {
17    """
18    All Authors query
19    """
20    authors(author: Authors): [Author]
21    books(book: String): [Book]
22  }
23
24  # Root Mutation - all the mutations supported by the schema
25  type Mutation {
26    createBook(input: CreateBook!): Book
27  }
28
29  """
30  One Author can have many books
31  """
32  type Author {
33    id: ID!
34    authorName: String
35    book: [Book]!
36  }
37
38  """
39  Book Schema
40  """
41  type Book {
42    id: ID!
43    name: String
44    price: String
45    publishingYear: String
46    publisher: String
47    author: [Author]
48    description: String
49    page: Int
50    genre: [Genre]
51  }
52
53  input CreateBook {
54    name: String
55    price: String
56    publishingYear: String
57    publisher: String
58    author: [CreateAuthor]
59    description: String
60    page: Int
61    genre: [Genre]
62  }
63
64  input CreateAuthor {
65    authorName: String!
66  }
67`;
68export default typeDefs;import AWS from 'aws-sdk';
69import { v4 } from 'uuid';
70import { CreateBook } from '../../generated/schema';
71
72async function createBook(_: unknown, { input }: { input: CreateBook }) {
73  const dynamoDb = new AWS.DynamoDB.DocumentClient();
74  const id = v4();
75
76  const authorsName = 
77    input.author &&
78    input.author.map(function (item) {
79      return item['authorName'];
80    });
81
82  const params = {
83    TableName: process.env.ITEM_TABLE ? process.env.ITEM_TABLE : '',
84    Item: {
85      PK: `AUTHOR`,
86      SK: `AUTHORS#${id}`,
87      GSI1PK: `BOOKS`,
88      GSI1SK: `BOOK#${input.name}`,
89      name: input.name,
90      author: authorsName,
91      price: input.price,
92      publishingYear: input.publishingYear,
93      publisher: input.publisher,
94      page: input.page,
95      description: input.description,
96      genre: input.genre,
97    },
98  };
99
100  await dynamoDb.put(params).promise();
101
102  return {
103    ...input,
104    id,
105  };
106}
107
108export default createBook;import AWS from 'aws-sdk';
109
110async function books(_: unknown, input: { book: string }) {
111  const dynamoDb = new AWS.DynamoDB.DocumentClient();
112
113  const params = {
114    TableName: process.env.ITEM_TABLE ? process.env.ITEM_TABLE : '',
115    IndexName: 'GSI1',
116    KeyConditionExpression: 'GSI1PK = :hkey',
117    ExpressionAttributeValues: {
118      ':hkey': `${input.book}`,
119    },
120  };
121
122  const { Items } = await dynamoDb.query(params).promise();
123
124  const allBooks =  // NEED TO MAP THE FUNcTION THEN RETURN THE DATA BASED ON GRAPHQL //QUERIES.
125    Items &&
126    Items.map((i) => {
127      const genre = i.genre.filter((i) => i);
128      return {
129        name: i.name,
130        author: i.author,
131        genre,
132      };
133    });
134
135  return allBooks;
136}
137
138export default books;import AWS from 'aws-sdk';
139import { Author, Authors } from '../../generated/schema';
140
141async function authors(
142  _: unknown,
143  input: { author: Authors }
144): Promise<Author> {
145  const dynamoDb = new AWS.DynamoDB.DocumentClient();
146
147  const params = {
148    TableName: process.env.ITEM_TABLE ? process.env.ITEM_TABLE : '',
149    KeyConditionExpression: 'PK = :hkey',
150    ExpressionAttributeValues: {
151      ':hkey': `${input.author}`,
152    },
153  };
154
155  const { Items } = await dynamoDb.query(params).promise();
156
157  console.log({ Items }); // I can see the data but don't know how to returns the data like this below type without using map function
158
159  // type Author {
160  //   id: ID!
161  //   authorName: String
162  //   book: [Book]!
163  // }
164
165  return Items; // return null in Graphql play ground. 
166}
167
168export default authors;// resolver map - src/resolvers/index.ts
169const resolvers = {
170  Query: {
171    books,
172    authors,
173    author,
174    book,
175  },
176  Mutation: {
177    createBook,
178  },
179};
180

1import gql from "graphql-tag";
2
3export const ALL_PRODUCTS_QUERY = gql`
4    query ProductData{
5        allProducts{
6            id
7            price
8            description
9            name
10        }
11    }
12`
13

1import gql from "graphql-tag";
2
3export const ALL_PRODUCTS_QUERY = gql`
4    query ProductData{
5        allProducts{
6            id
7            price
8            description
9            name
10        }
11    }
12`
13export interface ProductData_allProducts {
14  __typename: "Product";
15  id: string;
16  price: number | null;
17  description: string | null;
18  name: string | null;
19}
20
21export interface ProductData {
22  /**
23   *  Search for all Product items which match the where clause. 
24   */
25  allProducts: (ProductData_allProducts | null)[] | null;
26}
27

1import gql from "graphql-tag";
2
3export const ALL_PRODUCTS_QUERY = gql`
4    query ProductData{
5        allProducts{
6            id
7            price
8            description
9            name
10        }
11    }
12`
13export interface ProductData_allProducts {
14  __typename: "Product";
15  id: string;
16  price: number | null;
17  description: string | null;
18  name: string | null;
19}
20
21export interface ProductData {
22  /**
23   *  Search for all Product items which match the where clause. 
24   */
25  allProducts: (ProductData_allProducts | null)[] | null;
26}
27import { useQuery } from "@apollo/client";
28import {ALL_PRODUCTS_QUERY} from '../queries/index'
29import { ProductData } from "../generated/ProductData";
30
31const Products = () => {
32
33    const {data, error, loading} = useQuery<ProductData>(ALL_PRODUCTS_QUERY)
34    if(loading) return <p>Loading</p>
35    if(error) return <p>Error: {error.message}</p> 
36
37    return (
38        <div>
39            <div>
40                {data?.allProducts?.map(product => (
41                    <div>{product?.name}</div>
42                ))}
43            </div>
44        </div>
45    );
46};
47
48export default Products;
49

1import gql from "graphql-tag";
2
3export const ALL_PRODUCTS_QUERY = gql`
4    query ProductData{
5        allProducts{
6            id
7            price
8            description
9            name
10        }
11    }
12`
13export interface ProductData_allProducts {
14  __typename: "Product";
15  id: string;
16  price: number | null;
17  description: string | null;
18  name: string | null;
19}
20
21export interface ProductData {
22  /**
23   *  Search for all Product items which match the where clause. 
24   */
25  allProducts: (ProductData_allProducts | null)[] | null;
26}
27import { useQuery } from "@apollo/client";
28import {ALL_PRODUCTS_QUERY} from '../queries/index'
29import { ProductData } from "../generated/ProductData";
30
31const Products = () => {
32
33    const {data, error, loading} = useQuery<ProductData>(ALL_PRODUCTS_QUERY)
34    if(loading) return <p>Loading</p>
35    if(error) return <p>Error: {error.message}</p> 
36
37    return (
38        <div>
39            <div>
40                {data?.allProducts?.map(product => (
41                    <div>{product?.name}</div>
42                ))}
43            </div>
44        </div>
45    );
46};
47
48export default Products;
49import React from 'react';
50import { ProductData, ProductData_allProducts } from '../generated/ProductData';
51
52const Product = ({product}:ProductData_allProducts) => {
53    return (
54        <p>{product.name}</p>
55    );
56};
57
58export default Product; 
59

1import gql from "graphql-tag";
2
3export const ALL_PRODUCTS_QUERY = gql`
4    query ProductData{
5        allProducts{
6            id
7            price
8            description
9            name
10        }
11    }
12`
13export interface ProductData_allProducts {
14  __typename: "Product";
15  id: string;
16  price: number | null;
17  description: string | null;
18  name: string | null;
19}
20
21export interface ProductData {
22  /**
23   *  Search for all Product items which match the where clause. 
24   */
25  allProducts: (ProductData_allProducts | null)[] | null;
26}
27import { useQuery } from "@apollo/client";
28import {ALL_PRODUCTS_QUERY} from '../queries/index'
29import { ProductData } from "../generated/ProductData";
30
31const Products = () => {
32
33    const {data, error, loading} = useQuery<ProductData>(ALL_PRODUCTS_QUERY)
34    if(loading) return <p>Loading</p>
35    if(error) return <p>Error: {error.message}</p> 
36
37    return (
38        <div>
39            <div>
40                {data?.allProducts?.map(product => (
41                    <div>{product?.name}</div>
42                ))}
43            </div>
44        </div>
45    );
46};
47
48export default Products;
49import React from 'react';
50import { ProductData, ProductData_allProducts } from '../generated/ProductData';
51
52const Product = ({product}:ProductData_allProducts) => {
53    return (
54        <p>{product.name}</p>
55    );
56};
57
58export default Product; 
59Property 'product' does not exist on type 'ProductData_allProducts'.    
60

1import gql from "graphql-tag";
2
3export const ALL_PRODUCTS_QUERY = gql`
4    query ProductData{
5        allProducts{
6            id
7            price
8            description
9            name
10        }
11    }
12`
13export interface ProductData_allProducts {
14  __typename: "Product";
15  id: string;
16  price: number | null;
17  description: string | null;
18  name: string | null;
19}
20
21export interface ProductData {
22  /**
23   *  Search for all Product items which match the where clause. 
24   */
25  allProducts: (ProductData_allProducts | null)[] | null;
26}
27import { useQuery } from "@apollo/client";
28import {ALL_PRODUCTS_QUERY} from '../queries/index'
29import { ProductData } from "../generated/ProductData";
30
31const Products = () => {
32
33    const {data, error, loading} = useQuery<ProductData>(ALL_PRODUCTS_QUERY)
34    if(loading) return <p>Loading</p>
35    if(error) return <p>Error: {error.message}</p> 
36
37    return (
38        <div>
39            <div>
40                {data?.allProducts?.map(product => (
41                    <div>{product?.name}</div>
42                ))}
43            </div>
44        </div>
45    );
46};
47
48export default Products;
49import React from 'react';
50import { ProductData, ProductData_allProducts } from '../generated/ProductData';
51
52const Product = ({product}:ProductData_allProducts) => {
53    return (
54        <p>{product.name}</p>
55    );
56};
57
58export default Product; 
59Property 'product' does not exist on type 'ProductData_allProducts'.    
60import { useQuery } from "@apollo/client";
61import {ALL_PRODUCTS_QUERY} from '../queries/index'
62import { ProductData } from "../generated/ProductData";
63import Product from "./Product";
64
65
66const Products = () => {
67
68    const {data, error, loading} = useQuery<ProductData>(ALL_PRODUCTS_QUERY)
69    if(loading) return <p>Loading</p>
70    if(error) return <p>Error: {error.message}</p> 
71
72    return (
73        <div>
74            <div>
75                {data?.allProducts?.map(product => (
76                    <Product product={product} />
77                ))}
78            </div>
79        </div>
80    );
81};
82
83export default Products;    
84

1import gql from "graphql-tag";
2
3export const ALL_PRODUCTS_QUERY = gql`
4    query ProductData{
5        allProducts{
6            id
7            price
8            description
9            name
10        }
11    }
12`
13export interface ProductData_allProducts {
14  __typename: "Product";
15  id: string;
16  price: number | null;
17  description: string | null;
18  name: string | null;
19}
20
21export interface ProductData {
22  /**
23   *  Search for all Product items which match the where clause. 
24   */
25  allProducts: (ProductData_allProducts | null)[] | null;
26}
27import { useQuery } from "@apollo/client";
28import {ALL_PRODUCTS_QUERY} from '../queries/index'
29import { ProductData } from "../generated/ProductData";
30
31const Products = () => {
32
33    const {data, error, loading} = useQuery<ProductData>(ALL_PRODUCTS_QUERY)
34    if(loading) return <p>Loading</p>
35    if(error) return <p>Error: {error.message}</p> 
36
37    return (
38        <div>
39            <div>
40                {data?.allProducts?.map(product => (
41                    <div>{product?.name}</div>
42                ))}
43            </div>
44        </div>
45    );
46};
47
48export default Products;
49import React from 'react';
50import { ProductData, ProductData_allProducts } from '../generated/ProductData';
51
52const Product = ({product}:ProductData_allProducts) => {
53    return (
54        <p>{product.name}</p>
55    );
56};
57
58export default Product; 
59Property 'product' does not exist on type 'ProductData_allProducts'.    
60import { useQuery } from "@apollo/client";
61import {ALL_PRODUCTS_QUERY} from '../queries/index'
62import { ProductData } from "../generated/ProductData";
63import Product from "./Product";
64
65
66const Products = () => {
67
68    const {data, error, loading} = useQuery<ProductData>(ALL_PRODUCTS_QUERY)
69    if(loading) return <p>Loading</p>
70    if(error) return <p>Error: {error.message}</p> 
71
72    return (
73        <div>
74            <div>
75                {data?.allProducts?.map(product => (
76                    <Product product={product} />
77                ))}
78            </div>
79        </div>
80    );
81};
82
83export default Products;    
84Type '{ product: ProductData_allProducts | null; }' is not assignable to type 'IntrinsicAttributes & ProductData_allProducts'.
85  Property 'product' does not exist on type 'IntrinsicAttributes & ProductData_allProducts'.    
86

1const AllTheProviders = ({children, initialRoutes}) => {
2    return (
3        <ApolloProvider client={client}>
4            <Provider store={store}>
5                <MemoryRouter>
6                    {children}
7                </MemoryRouter>
8            </Provider>
9        </ApolloProvider>
10    );
11}
12const customRender = (ui, options) => render(ui, {wrapper: AllTheProviders, ...options})
13
14
15beforeEach(() => {
16    window.history.pushState({}, 'Test page',"/details/url-param-the-component-needs")
17    customRender(<App/>);
18});
19

1Unhandled Runtime Error
2Error: GraphQL error: Field 'metafieldsSet' doesn't exist on type 'Mutation'
3GraphQL error: Variable $metafields is declared by metafieldsSet but not used
4

1Unhandled Runtime Error
2Error: GraphQL error: Field 'metafieldsSet' doesn't exist on type 'Mutation'
3GraphQL error: Variable $metafields is declared by metafieldsSet but not used
4import React, { useState } from 'react';
5import gql from 'graphql-tag';
6import { Mutation } from 'react-apollo';
7import { Layout, Button, Banner, Toast, Stack, Frame } from '@shopify/polaris';
8import { Context } from '@shopify/app-bridge-react';
9// GraphQL mutation that updates the prices of products
10const UPDATE_TEXT = gql`mutation metafieldsSet($metafields: [MetafieldsSetInput!]!) {
11    metafieldsSet(metafields: $metafields) {
12      metafields {
13        value
14        id
15        key
16        ownerType
17     
18      }
19      userErrors {
20        field
21        message
22      }
23    }
24  }
25`;
26class UpdateTheText extends React.Component{
27    static contextType = Context;
28    render(){
29        return(
30            <Mutation mutation={UPDATE_TEXT}>
31            {(handleSubmit, {error, data}) => {
32              const [hasResults, setHasResults] = useState(false);
33    
34              const showError = error && (
35                <Banner status="critical">{error.message}</Banner>
36              );
37    
38              const showToast = hasResults && (
39                <Toast
40                  content="Successfully updated"
41                  onDismiss={() => setHasResults(false)}
42                />
43              );
44    
45              return (
46                <Frame>
47                  {showToast}
48                  <Layout.Section>
49                    {showError}
50                  </Layout.Section>
51    
52                  <Layout.Section>
53                    <Stack distribution={"center"}>
54                      <Button
55                        primary
56                        textAlign={"center"}
57                        onClick={() => {
58                          let promise = new Promise((resolve) => resolve());
59                            const newmetafields = {
60                                  key: "ExtraShopDesc",
61                                  namespace: "ExtraShopDescription",
62                                  ownerId: "gid://shopify/Shop/55595073672",
63                                  type: "single_line_text_field",
64                                  value: "This is an extra shop description twice"
65                              }
66    
67                            promise = promise.then(() => handleSubmit({ variables: { metafields: newmetafields }}));
68                          
69    
70                          if (promise) {
71                            promise.then(() => this.props.onUpdate().then(() => setHasResults(true)));
72                        }}
73                      }
74                      >
75                        Update Text
76                      </Button>
77                    </Stack>
78                  </Layout.Section>
79                </Frame>
80              );
81            }}
82          </Mutation>
83        );
84    }
85
86}
87
88export default UpdateTheText;
89

1C:\projects\my_project\node_modules\apollo-server-core\src\ApolloServer.ts:554
2      throw new Error(
3            ^
4Error: You must `await server.start()` before calling `server.applyMiddleware()`
5    at ApolloServer.assertStarted (C:\projects\my_project\node_modules\apollo-server-core\src\ApolloServer.ts:554:13)
6    at ApolloServer.applyMiddleware (C:\projects\my_project\node_modules\apollo-server-express\src\ApolloServer.ts:60:10)
7    at Object.<anonymous> (C:\projects\my_project\src\index.ts:17:14)
8    at Module._compile (internal/modules/cjs/loader.js:1063:30)
9    at Module.m._compile (C:\projects\my_project\node_modules\ts-node\src\index.ts:1225:23)
10    at Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
11    at Object.require.extensions.<computed> [as .ts] (C:\projects\my_project\node_modules\ts-node\src\index.ts:1228:12)
12    at Module.load (internal/modules/cjs/loader.js:928:32)
13    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
14    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
15[nodemon] app crashed - waiting for file changes before starting...
16