-
Notifications
You must be signed in to change notification settings - Fork 63
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
10 additions
and
197 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,115 +1,3 @@ | ||
# @faststore/api | ||
|
||
The only API you need for building your next ecommerce. | ||
|
||
This package defines a front-end first, GraphQL API inspired by clean architecture and schema.org. | ||
|
||
GraphQL types defined in this repo extends and simplifies schema.org. This makes it easier to make your frontend search friendly. | ||
Also, by using the clean architecture, all types defined on this schema are not platform specific, but created to resolve an specific business case on your frontend, like rendering listprices, sellers etc. | ||
|
||
Alongside the GraphQL type definitions, we provide standard implementations for common ecommerce platforms. Currently we support: | ||
1. VTEX | ||
2. Maybe add yours? | ||
|
||
With the typedefs and resolvers, you can create an executable schema and deploy anywhere you want. For instance, one use case would be: | ||
1. Create an Apollo Server instane on Heroku | ||
2. Run the executable schema in a function on Next.JS | ||
3. Run the executable schema during a Gatsby build. | ||
|
||
## Install | ||
|
||
```bash | ||
yarn add @faststore/api | ||
``` | ||
|
||
## Usage | ||
GraphQL is very versatile and can run in many places. To setup the schema in an apollo server, just: | ||
```ts | ||
import { getSchema } from '@faststore/api' | ||
import { ApolloServer } from 'apollo-server' | ||
|
||
// Get the Store schema | ||
const schema = await getSchema({ platform: 'vtex', account: 'my-account', environment: 'vtexcommercestable' }) | ||
|
||
// Setup Apollo Server | ||
const server = new ApolloServer({ schema }); | ||
|
||
// The `listen` method launches a web server. | ||
server.listen().then(({ url }) => { | ||
console.log(`🚀 Server ready at ${url}`); | ||
}); | ||
``` | ||
|
||
## Extending the schema | ||
GraphQL is a very versatile language. By using the exported `getSchema` function, you can not only extend the base schema but also redefine the whole resolvers implementation. | ||
|
||
To extend the schema, one can: | ||
```ts | ||
import { getSchema } from '@faststore/api' | ||
import { makeExecutableSchema, mergeSchemas } from '@graphql-tools/schema' | ||
import { ApolloServer } from 'apollo-server' | ||
|
||
// Setup type extensions | ||
const typeDefs = ` | ||
extend type Product { | ||
customField: String! | ||
} | ||
` | ||
|
||
// Setup custom resolvers | ||
const resolvers = { | ||
Product: { | ||
customField: async () => { | ||
... | ||
// Your code goes here | ||
... | ||
} | ||
} | ||
} | ||
|
||
// Create custom schema | ||
const customSchema = makeExecutableSchema({ resolvers, typeDefs }) | ||
const storeApiSchema = await getSchema({ platform: 'vtex', ...}) | ||
|
||
// Merge schemas into a final schema | ||
const finalSchema = mergeSchemas(schemas: [ | ||
storeApiSchema, | ||
customSchema | ||
]) | ||
|
||
// Setup Apollo Server | ||
const server = new ApolloServer({ schema }); | ||
|
||
// The `listen` method launches a web server. | ||
server.listen().then(({ url }) => { | ||
console.log(`🚀 Server ready at ${url}`); | ||
}); | ||
``` | ||
|
||
## Inline platform | ||
If your ecommerce platform is not supported you have two options. | ||
1. Make a contribution | ||
2. Create inline resolvers for your platform | ||
|
||
Inline resolves means you are going to write all resolvers for the api schema in your project or in an external library. This is recommended if you are supporting a niche platform and want to have full control over how each field is processed. | ||
|
||
To create your own resolvers, you can: | ||
```ts | ||
import { getTypeDefs } from '@faststore/api' | ||
import { ApolloServer } from 'apollo-server' | ||
import { makeExecutableSchema } from '@graphql-tools/schema' | ||
|
||
// Get the Store API TypeDefs | ||
const typeDefs = getTypeDefs() | ||
|
||
const resolvers = { | ||
... | ||
// add your resolvers | ||
... | ||
} | ||
|
||
// Create a runnable schema | ||
const schema = makeExecutableSchema({ resolvers, typeDefs }) | ||
|
||
// You now have a runnable GraphQL schema, you can create a server or run queries locally. | ||
``` | ||
Docs moved to: https://faststore.dev/reference/api/overview |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,34 +1,3 @@ | ||
# @faststore/sdk | ||
|
||
A simple, framework agnostic implementation of Commerce APIs to help you create you next React-based store with world class performance in record time | ||
|
||
[![NPM](https://img.shields.io/npm/v/@faststore/sdk.svg)](https://www.npmjs.com/package/@faststore/sdk) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) | ||
|
||
## Install | ||
|
||
```bash | ||
yarn add @faststore/sdk | ||
``` | ||
|
||
## Usage | ||
|
||
```tsx | ||
import React from 'react' | ||
import type { FC } from 'react' | ||
|
||
import { useHook } from '@faststore/sdk' | ||
|
||
const MyStoreComponent: FC = () => { | ||
const props = useHook() | ||
|
||
return <MyComponent props>Hello Commerce</MyComponent> | ||
} | ||
``` | ||
|
||
## Analytics | ||
|
||
The analytics data layer is based on [the official GA4 specification](https://developers.google.com/gtagjs/reference/ga4-events). | ||
|
||
## License | ||
|
||
MIT © [VTEX](https://github.com/vtex/faststore) | ||
Docs moved to https://faststore.dev/reference/sdk/overview |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,46 +1,3 @@ | ||
# @faststore/ui | ||
|
||
> Next store component library | ||
[![NPM](https://img.shields.io/npm/v/@faststore/ui.svg)](https://www.npmjs.com/package/@faststore/ui) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) | ||
|
||
## Installation | ||
|
||
From the command line in your project directory, run npm install `@faststore/ui` or yarn add `@faststore/ui`. | ||
|
||
```cmd | ||
npm install @faststore/ui | ||
# or | ||
yarn add @faststore/ui | ||
``` | ||
|
||
For style, you can use our default theme. To install: | ||
|
||
```cmd | ||
npm install @vtex/theme-b2c-tailwind | ||
# or | ||
yarn add @vtex/theme-b2c-tailwind | ||
``` | ||
|
||
## Usage | ||
|
||
```tsx | ||
import { Button } from '@faststore/ui' | ||
import '@vtex/theme-b2c-tailwind/dist/index.css' | ||
``` | ||
|
||
```tsx | ||
import React, { Component } from 'react' | ||
|
||
import MyComponent from '@faststore/ui' | ||
|
||
class Example extends Component { | ||
render() { | ||
return <MyComponent /> | ||
} | ||
} | ||
``` | ||
|
||
## License | ||
|
||
MIT © [emersonlaurentino](https://github.com/emersonlaurentino) | ||
Docs moved to https://faststore.dev/reference/ui/overview |