Open w3bdesign opened 1 year ago
Sure! Here's an updated guide that uses the composition API with <script setup>
syntax:
You can install these libraries using npm or yarn.
plugins
directory of your Nuxt project called apollo.js
. In this file, you can create a new instance of Apollo Client and set up the necessary links and cache. Here's an example:import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client/core';
export default function (context) {
const httpLink = new HttpLink({
uri: 'https://yourwordpresssite.com/graphql',
});
const cache = new InMemoryCache();
const apolloClient = new ApolloClient({
link: httpLink,
cache,
});
context.app.apolloProvider = apolloClient;
}
Replace https://yourwordpresssite.com/graphql
with the URL of your WordPress site's GraphQL endpoint.
graphql
directory of your Nuxt project called login.gql
and add the following code:mutation Login($username: String!, $password: String!) {
login(
input: {
clientMutationId: "someId"
username: $username
password: $password
}
) {
customer {
jwtAuthToken # JWT User Authentication token
sessionToken # WooCommerce Session token
}
}
}
This mutation takes in a username
and password
variable and returns the JWT authentication token and WooCommerce session token.
pages
directory of your Nuxt project called orders.vue
and add the following code:<template>
<div>
<h1>Orders</h1>
<ul>
<li v-for="order in orders" :key="order.id">
{{ order.number }} - {{ order.date_created }}
</li>
</ul>
</div>
</template>
<script setup>
import { useQuery } from '@vue/apollo-composable';
import { ref } from 'vue';
import ORDERS_QUERY from '~/graphql/orders.gql';
const orders = ref([]);
const { result } = useQuery(ORDERS_QUERY);
orders.value = result.value?.data?.customer?.orders?.edges?.map((edge) => edge?.node);
</script>
This page uses the useQuery
composable function from @vue/apollo-composable
to fetch the customer's orders using the orders.gql
query. The orders
variable is a reactive reference that stores the fetched orders.
graphql
directory of your Nuxt project called orders.gql
and add the following code:query Orders {
customer {
orders {
edges {
node {
id
number
date_created
}
}
}
}
}
This query fetches the id
, number
, and date_created
fields for each of the customer's orders.
That's it! You can now navigate to the orders
page in your Nuxt app to see the customer's orders.
Certainly! Here's an updated guide that includes the JWT Authentication plugin:
Install and activate the WPGraphQL plugin and the WPGraphQL-JWT-Authentication plugin.
Define a secret key for JWT Authentication. This key will be used to encode and decode JSON Web Tokens. You can define the key in your
wp-config.php
file like this:Replace
your-secret-key
with a unique, randomly generated string of characters. You can use a tool like the WordPress Salt generator (https://api.wordpress.org/secret-key/1.1/salt/) to generate a random string.Alternatively, you can use the
graphql_jwt_auth_secret_key
filter to define the key in a custom function:Ensure that your server is passing the
HTTP_AUTHORIZATION
header to WordPress. In some cases, this header may not be passed due to server configurations. You can enable the header in your server configuration file, such as.htaccess
file for Apache, or by following instructions specific to your server.Use the
login
mutation to authenticate a user and retrieve a JWT token. Thelogin
mutation takes aLoginUserInput
input type and returns anauthToken
anduser
object withid
andname
fields. You can store theauthToken
in local storage (or similar) and use it in subsequent requests as an HTTP Authorization header to authenticate the user.Here's an example query for the
login
mutation:Replace
your_login
andyour_password
with the user's login credentials. You can use a tool like GraphiQL or Insomnia to send the query to your WordPress site and retrieve the token.Use the
authToken
retrieved from thelogin
mutation as an HTTP Authorization header in subsequent requests to authenticate the user. The header should be in the formatAuthorization: Bearer {authToken}
.The method for setting the Authorization header varies depending on your HTTP client library. For example, you can set the header in Apollo Client like this:
Use the
registerUser
mutation to create a new user with a JWT token. TheregisterUser
mutation takes aRegisterUserInput
input type and returns auser
object withjwtAuthToken
andjwtRefreshToken
fields.Here's an example query for the
registerUser
mutation:Replace
your_username
,your_password
, andyour_email
with the desired values for the new user.Use the
refreshJwtAuthToken
mutation to refresh an expired JWT token. The `refreshJwtAuthToken