This project aims to serve as a good starting point, to handle user registration and login with Apollo, WPGraphQL and WPGraphQL JWT Authentication.
We gonna use the following libraries for now:
3.0.0-beta.31
- [Docs]It should work now with the latest versions of WPGraphQL. Apollo v3 might change from beta to a stable release.
Install plugins
Download the .zip files and install through the WordPress Admin or if you can run git, just run the following commands inside your ./wp-content/plugins/
folder:
git clone https://github.com/wp-graphql/wp-graphql.git
git clone https://github.com/wp-graphql/wp-graphql-jwt-authentication.git
Check your permalinks
Make sure your graphql endpoint works as expected. See these docs: https://docs.wpgraphql.com/getting-started/install-and-activate/#verify-the-endpoint-works
Define a secret In your wp-config.php deinfe a secret. You can use WordPress Salt generator (https://api.wordpress.org/secret-key/1.1/salt/) to generate a Secret.
define( 'GRAPHQL_JWT_AUTH_SECRET_KEY', 'your-secret-token' );
Install modules
Run yarn to install packages. Also after the modules are installed it should run createPossibleType.js
automatically on postinstall
.
yarn
Check if the file ./apollo/possibleTypes.json
has been created.
Add .env.development
There is an .env.development.example
which you can use and rename. Make sure you have a .env.development
in your root folder.
GRAPHQL_URL=http://your-domain/graphql
If you run yarn run build
you need a .env.production
in you root folder. Or you run it in your CI wit CI-Variables.
Start developing
Navigate into your new site’s directory and start it up.
yarn run develop
or
yarn run cdev
cdev
runs gatsby clean
before running develop
Open the source code and start editing!
Your site is now running at http://localhost:8000
!
Note: You'll also see a second link: http://localhost:8000/___graphql
. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.
Open the my-default-starter
directory in your code editor of choice and edit src/pages/index.js
. Save your changes and the browser will update in real time!