Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alpacatravel/react-graphql-acessing-place-hours-example
https://github.com/alpacatravel/react-graphql-acessing-place-hours-example
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/alpacatravel/react-graphql-acessing-place-hours-example
- Owner: AlpacaTravel
- License: mit
- Created: 2021-03-25T00:50:21.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-03-26T02:24:35.000Z (over 3 years ago)
- Last Synced: 2023-02-28T21:56:46.609Z (almost 2 years ago)
- Language: TypeScript
- Size: 321 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Example: Accessing GraphQL Opening Hours
The example React application calls upon the GraphQL service for information
about opening hours for a place using the
[Alpaca Travel GraphQL service](https://github.com/AlpacaTravel/graphql-docs).
- [Demo](https://codesandbox.io/s/alpaca-travel-graphql-opening-hours-cggl9?file=/src/opening-hours/opening-hours.tsx)
- [Documentation](https://github.com/AlpacaTravel/graphql-docs/tree/develop/topics/places/Accessing%20Hours)
This is provided to demonstrate some of the considerations that you can have in
regards to opening hours for places, such as:
- Determining the current status (Open/Closed)
- Upcoming change of status (Closing/Opening soon)
- Reviewing the upcoming week (or future dates) openning hours
- Comments or public holidays affecting the hours
- Time zones and date formatting
Some goals of the GraphQL API included the ability to provide direct access
to ISO-8601 dates, or provide the basis of formatting dates or relative times
without requiring moment.js or date-fns libraries which can increase the total
size of the client.
## Getting Started
### Installation
```
git clone https://github.com/AlpacaTravel/react-graphql-acessing-place-hours-example
cd react-graphql-acessing-place-hours-example
yarn install
```
### Create your environment variable
Create a `.env.local` in the root of the project with your API Key
```
REACT_APP_GRAPHQL_ACCESS_TOKEN=pk...
```
### Start the Application
```
yarn start
```
### Modifying the GraphQL
This project uses GraphQL Codegen to produce types and hooks from the graphql
files. Use the following to regenerate out your types.
```
yarn graphql-codegen
```