server return error 500
POST https://2761-197-22-170-231.ngrok.io/graphql 500
app.js
importateur React à partir de 'react' ;
importateur ReactDOM depuis 'react -dom' ;
importateur { Redirect } depuis "@shopify/app-bridge/actions" ;
importateur { AuthenticatedFetch } de "@ Shopify / app-bridge-utils"
importateur { ApolloClient , HttpLink , InMemoryCache } de '@ apollo / client' ;
importateur { ApolloProvider } depuis '@apollo/client/react' ;
importateur { AppProvider } de "@shopify/polaris" ; importer
les traductions de "@shopify/polaris/locales/en.json" ;
importateur '@shopify/polaris/dist/styles.css' ;
importateur PageLayout à partir de "./components/PageLayout" ;
importateur ProductsPage de "./components/ProductsPage" ; importer
ExamplePage de "./components/ExamplePage" ;
import { Fournisseur , useAppBridge } depuis '@shopify/app-bridge-react' ;
{ NavigateurRouter ,, Switch } de "react-router-dom" ;
importateur ClientRouter depuis "./components/ClientRouter" ;
importateur AppNavigation depuis "./components/AppNavigation" ;
function userLoggedInFetch ( app ) {
const fetchFunction = authenticatedFetch ( app ) ;
retour async ( uri , les options ) = > {
constréponse = await fetchFunction ( uri , restaurants ) ;
if ( réponse . headers . get ( " X-Shopify-API-Request-Failure-Reauthorize " ) === " 1 " ) {
const authUrlHeader = réponse . en - têtes . get ( "X-Shopify-API-Request-Failure-Reauthorize-Url" ) ;
const redirect = Rediriger . créer ( candidature ) ;
rediriger . dispatch ( Redirect . Action . APP , authUrlHeader ) ;
renvoyer nul ;
}
retourner la réponse ;
} ;
}
function AppBridgeApolloProvider ( { enfants } ) {
const app = useAppBridge ( ) ;
client const = new ApolloClient ( {
lien : nouveau HttpLink ( {
informations d ' identification : ' same - origin' ,
fetch : userLoggedInFetch ( app ) ,
uri : '/graphql' ,
méthode : 'GET' ,
} ) ,
cache : nouveau InMemoryCache ( )
} ) ;
return (
< client ApolloProvider = { client } >
{ enfants }
< / Fournisseur Apollo >
) ;
}
function App ( { boutique , hôte , apiKey } ) {
const config = { apiKey : apiKey , shopOrigin : boutique , hôte : hôte , forceRedirect : true } ;
return (
< BrowserRouter >
< Provider config = { config } >
< ClientRouter / >
< AppProvider i18n = { traductions } >
< AppBridgeApolloProvider >
< AppNavigation / >
< PageLayout >
< Switch >
< Route path = "/example" component = { ExamplePage } / >
<Route path = "/" component = { ProductsPage } / >
< / Commutateur >
< / PageLayout >
< / AppBridgeApolloProvider >
< / AppProvider >
< / Provider >
< / BrowserRouter >
) ;
}
exportateur l'application par défaut ;
let appElement = document . getElementById ( 'application' ) ;
if ( appElement ) {
ReactDOM . render ( < App { . . . ( appElement . dataset ) } / > , appElement ) ;
}
import { gql , useQuery } depuis '@apollo/client' ;
importer React à partir de 'react' ;
const PRODUCTS_QUERY = gql `
{
products(first: 10) {
edge {
node {
id,
title,
}
}
}
}
` ;
function ProduitsPage ( ) {
const { données , chargement , erreur ,networkStatus } = useQuery ( PRODUCTS_QUERY ) ;
console . log ( 'networkStatus' , networkStatus ) ;
console . log ( 'chargement' , chargement ) ;
console . log ( ' erreur' , erreur ) ;
console . log ( 'données' , données ) ;
retour (
< p > test{ données } < / p >
) ;
}
exporter la page Produits par défaut ;
web.php
<?php
use App \ Models \ Session ;
utiliser Illuminate \ Http \ Request ;
utilisez Illuminate \ Http \ Response ;
utilisez Illuminate \ Support \ Façades \ Log ;
utilisez Illuminate \ Support \ Façades \ Route ;
utilisez Shopify \ Auth \ OAuth ;
utiliser Shopify \ Auth\ Session en tant qu'AuthSession ;
utilisez Shopify \ Clients \ HttpHeaders ;
utilisez Shopify \ Clients \ Rest ;
utilisez Shopify \ Contexte ;
utilisez Shopify \ Utils ;
utilisez Shopify \ Webhooks \ Registry ;
utilisez Shopify \ Webhooks \ Topics ;
/*
|------------------------------------------------------------ ---------------------------
| Routes Web
|------------------------------------------------- -------------------------
|
| C'est ici que vous pouvez enregistrer des itinéraires Web pour votre application. Ces
| les routes sont chargées par le RouteServiceProvider au sein d'un groupe qui
| contient le groupe middleware "web". Maintenant, créez quelque chose de génial !
|
* /
Route : : fallback ( fonction ( demande $ request ) {
$ boutique = Utils : : sanitizeShopDomain ( $ demande - > requête ( 'shop' ) ) ;
$ host = $request - > query ( 'hôte' ) ;
$appInstalled = Session : : where ( 'boutique' , $boutique ) - > existe ( ) ;
if ( $appInstalled ) {
return view ( 'react' , [
'shop' = > $shop ,
'host' = > $host ,
'apiKey' = > Context : :$API_KEY
] ) ;
}
return redirect ( "/login?shop=$shop" ) ;
} ) ;
Route : : get ( '/ login / toplevel' , fonction ( demande $ request , réponse $ response ) {
$ boutique = Utils : : sanitizeShopDomain ( $ demande - > requête ( 'shop' ) ) ;
$ response = nouvelle réponse( view ( 'top_level' , [
'apiKey' = > Contexte : : $API_KEY ,
'shop' = > $shop ,
'hostName' = > Contexte : : $HOST_NAME ,
] ) ) ;
$response - > withCookie ( cookie ( ) - > forever ( 'shopify_top_level_oauth' , '' , null , null , true, true , false , 'strict' ) ) ;
renvoie $réponse ;
} ) ;
Route : : get ( '/login' , function ( Request $request ) {
$shop = Utils : : sanitizeShopDomain ( $request - > query ( 'shop' ) ) ;
if ( ! $request - > hasCookie ('shopify_top_level_oauth' ) ) {
return redirect ( "/login/toplevel?shop=$shop" ) ;
}
$installUrl = OAuth : : begin (
$shop ,
'/auth/callback' ,
true ,
[ 'App\Lib\CookieHandler' , 'saveShopifyCookie' ] ,
) ;
return redirect ( $installUrl ) ;
} ) ;
Route : : get ( '/auth/callback' , fonction ( demande $ request ) {
$ la session = OAuth : : rappel (
$ demande - > biscuit ( ) ,
$ demande - > requête ( ) ,
[ 'App \ Lib \ CookieHandler' , 'saveShopifyCookie' ] ,
) ;
$host = $request - > query ( 'host' ) ;
$shop = Utilitaires : :sanitizeShopDomain ( $request - > query ( 'boutique' ) ) ;
$response = Registry : : register ( '/webhooks' , Sujets : : APP_UNINSTALLED , $shop , $session - > getAccessToken ( ) ) ;
if ( $response - > isSuccess ( ) ) {
Log : : debug ("Webhook APP_UNINSTALLED enregistré pour la boutique $shop" ) ;
} Autre {
Log : : erreur (
"Impossible d'enregistrer APP_UNINSTALLED webhook shop shop $ avec le corps de réponse:" .
Print_r ( $ réponse - > getBody ( ) , vrai )
) ;
}
return redirect ( " ?" . http_build_query ( [ 'host' = > $host , 'shop' = > $shop ]) ) ;
} ) ;
Route : : POST ( '/ graphql' , fonction ( demande $ request ) {
$ response = Utils : : graphqlProxy ( $ demande - > en- tête ( ) , $ demande - > biscuit ( ) , $ demande - > getContent ( ) ) ;
dd ( $réponse ) ;
$xHeaders = array_filter (
$response - > getHeaders ( ) ,
function ( $key ) {
return str_starts_with ( $key , 'X' ) || str_starts_with ( $key , 'x' ) ;
} ,
ARRAY_FILTER_USE_KEY
) ;
retourner la réponse ( $response - > getDecodedBody ( ) , $response - >getStatusCode ( ) ) - > withHeaders ( $xHeaders ) ;
} ) - > middleware ( 'shopify.auth:online' ) ;
Route : : post ( '/webhooks' , function ( Request $request ) {
try {
$topic = $request - > header ( HttpHeaders : : X_SHOPIFY_TOPIC , '' ) ;
$response = Registry : : process ( $request - > header ( ) , $request - > getContent ( ) ) ;
if ( ! $response - > isSuccess ( ) ) {
Log : : error ( "Impossible de traiter le webhook '$topic' : {$response->getErrorMessage()}" ) ;
réponse de retour ( ) - > json ([ 'message' = > "Impossible de traiter le webhook '$topic'" ] , 500 ) ;
}
} catch ( \ Exception $e ) {
Log : : error ( "Vous avez obtenu une exception lors de la gestion du webhook '$topic' : {$e->getMessage()}" ) ;
return response ( ) - > json ( [ 'message' = > "Vous avez une exception lors de la gestion du webhook '$topic'" ] , 500 ) ;
}
} ) ;
Shopify Discussion
Partners and Developers