Apollo's Library is built for developers who are using Apollo, GraphQL, and React.
We currently have two books in our library:
1) mockQuery -> Which is a function that provides mock data for front end developers when the backend is not set up.2) create-schema -> Which is a command line tool that will generate a mock schema using a provided query. NOTE: create-schema requires Apollo GraphQL to be installed.
To begin, fork this repo and then use the following code where you can access it in your project's file.
$ git clone https://github.com/oslabs-beta/apollos_library.git
It has some dependencies, so be sure to go to the file and enter:
$ npm install
Following that, enter:
$ npm install -g
WARNING: Do not add the global flag during the inital npm install, this will cause an error when attempting to use create-schema.
mockQuery is a temporary useQuery replacement, that provides mock data for front end development especially when the backend and/or schema have not been created. The mockQuery method will provide you data so that you can visualize your front end code. The idea is that while the backend is under construction, you would replace useQuery with mockQuery(), so that when your database is set up, you can swap them back and already know how everything will render on the page.
In every page that you are running a GraphQL search and using the useQuery method, import Apollo's Library at the top of the page import al from '[your file path]/Apollos_Library'
Wherever you are using the useQuery method, replace it like we do in the following code:
original code
const { data } =
useQuery(gqlSearch)
... do something with your data
replaced code
const { data } = al.mockQuery(gqlSearch, Arg2, Arg3, Arg4)
... do something with your data
If you have a query that uses variables, then you would do the following to your code
original code:
const { loading, error, data } =
useQuery(GET_TRACK, {variables: { variableGoesHere }}, [optional additional arguements here])
...do something with your data
replaced code:
const { loading, error, data } = al.mockQuery(GET_TRACK, {variables: { trackId }})
...do something with your data
Entering only 1 parameter will return mock/dummy data in string format. If you're looking for different data types then see the functionality from the flag parameter.
*The remaining arguments are optional and can be entered in any order or left out.*
2) Enter an integer for the number of times you want your data duplicated. You will receive an array with 1 object if you don't specifiy. *please note that if you enter 1 or 0 then your data will return to you as an object. If you enter anything greater than 1, your data will be returned to you as objects in an array.
3) The object is for variables that you want to pass into your GraphQL query. See this link for more info on using it with useQuery: https://www.apollographql.com/docs/react/data/queries/#caching-query-results.
4) The flag can be either: -
'error' - This will return an error so that you can test how your site will render with an error.
-
'loading'- This will return 'loading' so that you can test how your site will render while loading. -
'insert'- (for personalization) A pop up window will appear with input boxes so that you can either enter the exact data you want to be displayed or you can choose a data type by placing a tilsde in front of specific words.
Using the "insert" flag will cause a popup window to appear where you can personalize the data. If you don't want to come up with your own data, then we supply some key words that you can use in order to populate your page with specific data:
Data Type Key Words: - to enter an
int type:
- ~int
- To enter a <code>float</code> type:
- <code>~float</code>
- To enter a block of text then enter the <code>~text</code> followed by how many characters you want. The following example will return text with 15 characters, 75 characters, and 345 characters
- <code>~text15</code>
- <code>~text75</code>
- <code>~text345</code>
- To enter an address type:
- ~address
- To enter a phone number type:
- ~phone
- To enter a photo url then type:
- ~photo
create-schema is a command line based tool that provides a mock schema based off of a provided query, making it extremely easy to start using GraphQL with very little setup.
Currently, in order to use create-schema, you must have a file that only contains one gql query. We're currently working on adding suport for multiple queries!
const { gql } = require('apollo-graphql');
const dndChar = gql`
query class {
__class {
____name
____hit_die
____spellcasting {
______spellcasting_ability {
________name
______}
____}
__}
}
`;
NOTE: _ is acting as a stand in for a space in the above example.
After the file is created, the only information you need, to start using create-schema is the relative path of your file.
Once you have that information, type the following command into your terminal:
create-schema
After the command is run, follow the provided prompts to create your mock schema!
create-schema
->
Where is your query stored? -> ./yourDir/yourQueryFile
->
Please declare the path where you would like your schema stored: -> ./yourDir/yourSchemaFile
NOTE: If the provided path leads to a file that doesn't exist, the file will be created for you. If the path leads to a file that already exists, the mock schema will be placed under any data already present in the file.
After all prompts have been followed, the created mock schema will be displayed in the terminal. Currently, the default value is a string. We're working on adding support for more types, but at the moment any value other than a string will have to be manually added after the creation of the mock schema.
We are hoping to deploy our product on npmjs as an installable package in the near future. This is our immediate next step. After that we want to ensure that we can implement the ability to return an array of objects that are deeply nested in a given query in regards to our first feature. For our second feature we are hoping to integrate more prompts for the user to dictate other data types they want to populate in their mock schema. Currently, it can only populate strings and it needs to be manually updated in the new file to account for any other possible data types.
We are also interested in working on a third feature that addresses the issue of query handling in the Gateway with Apollo Federation. This isn't a fully-fleshed out idea, currently, however from what we could deduce there were some issues in regard to how node queries were specifically being handled by the Gateway when working with React Relay.
Apollo’s Library is currently a team of four software engineers, excited about the possibilities of Apollo GraphQL. Here is our team:
Jacob Jurado:
- github: https://github.com/jakejurado
- linkedin: https://www.linkedin.com/in/jacob-jurado/
Autumn Wallen:
- github: https://github.com/Autumn-Wallen
- linkedin: https://www.linkedin.com/in/autumn-wallen/
Ziquan “ZQ” Deng:
- github: https://github.com/ZQland
- linkedin: https://www.linkedin.com/in/ziquan-deng/
Jamie Clignett:
- github: https://github.com/jamie-clignett
- linkedin: https://www.linkedin.com/in/jamie-clignett/
Thank you!
We appreciate you taking the time to read our article. If you find this product useful or if you are curious to know more, feel free to visit our github repository, and our splash page! Soon we will be launching this on npmjs, so that you can directly install our package from there.
Special thanks to Katherine Kim for mentoring and giving us guidance.
We would also like to thank Natalie Klein, Mike Masatsugu and Alexander Holden for supporting us in our creation of Apollo’s Library.