Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore(ES-331): enhance sdk docs #7083

Closed
wants to merge 1 commit into from
Closed

chore(ES-331): enhance sdk docs #7083

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
34 changes: 33 additions & 1 deletion docs/content/4.sdk/2.getting-started/1.index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,15 @@ Let's break down the code above:

- The `middlewareUrl` is the URL of the middleware instance.

- The `getRequestHeaders` function is used to retrieve the Cookie header with cookie values.
- The `getRequestHeaders` function is used to provide the incoming headers within your requests. You can use `getRequestHeaders` to access and proxy the initial cookie headers to SDK requests during SSR. Initial headers could be provided by the [`getSdk`](#getsdk) method.
Check out examples there:
- Next Pages Router [link](https://github.com/vuestorefront/vue-storefront/tree/main/packages/storefront/packages/next/__tests__/apps/pages-router)
- Next App Router [link](https://github.com/vuestorefront/vue-storefront/tree/main/packages/storefront/packages/next/__tests__/apps/app-router)
- Nuxt app [link](https://github.com/vuestorefront/vue-storefront/tree/main/packages/storefront/packages/nuxt/__tests__/app)

::info
In the browser, `getRequestHeaders` will return an empty object.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In unified, we have
image

One of the questions I've seen come up is: "How do I use getRequestHeaders with useSdk?
Can you please address this? Is it possible? Is it recommended? I see the comment now that says "In the browser, getRequestHeaders will return an empty object." Can we take this one step further and explain usage with useSdk, or if it's not recommended, why and what to do instead if a dev feels it's needed. 🙂 Thanks in advance

::

- The `createSdk` function returns
- the `getSdk` function, which is used to create the new SDK instance,
Expand Down Expand Up @@ -100,6 +108,30 @@ import { getSdk } from "../sdk.config";
const sdk = getSdk();
```

You can proxy server side headers to the SDK requests using `getSdk` method.

```ts
import { type GetServerSideProps } from "next";
import { getSdk } from "../sdk.config";

export const getServerSideProps: GetServerSideProps = async ({ req }) => {
const sdk = getSdk({
getRequestHeaders: () => req.headers,
});

return {
props: {
result: await sdk.example.getSuccess(),
},
};
};
```

Check out more examples there:
- Next Pages Router [link](https://github.com/vuestorefront/vue-storefront/tree/main/packages/storefront/packages/next/__tests__/apps/pages-router)
- Next App Router [link](https://github.com/vuestorefront/vue-storefront/tree/main/packages/storefront/packages/next/__tests__/apps/app-router)
- Nuxt app [link](https://github.com/vuestorefront/vue-storefront/tree/main/packages/storefront/packages/nuxt/__tests__/app)

### createSdkContext

For client-side rendering, you can use `createSdkContext`. In order to use it, you'll need to create a new file in your application, for example `hooks/sdk.ts`:
Expand Down