specifying useShow endpoint

dual-salmon · 2023-07-08T12:18:01.908Z

How can I specify the useShow resource/endpoint?

K

kapa.ai•7/8/23, 12:18 PM

Hi @.chasel. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•7/8/23, 12:18 PM

----------------------
In refine, you can specify the resource for the

Show

Show

and

ShowButton

ShowButton

components using the

resource

resource

prop. This prop defines the redirection endpoint for the

ShowButton

ShowButton

and the resource information for the

Show

Show

component.

For the

Show

Show

component, you can specify the resource like this:

import { Show } from "@refinedev/chakra-ui";  
  
const CustomPage: React.FC = () => {  
 return (  
 <Show resource="categories">  
 <p>Rest of your page here</p>  
 </Show>  
 );  
};

import { Show } from "@refinedev/chakra-ui";  
  
const CustomPage: React.FC = () => {  
 return (  
 <Show resource="categories">  
 <p>Rest of your page here</p>  
 </Show>  
 );  
};

import { Show } from "@refinedev/chakra-ui";  
  
const CustomPage: React.FC = () => {  
 return (  
 <Show resource="categories">  
 <p>Rest of your page here</p>  
 </Show>  
 );  
};

import { Show } from "@refinedev/chakra-ui";  
  
const CustomPage: React.FC = () => {  
 return (  
 <Show resource="categories">  
 <p>Rest of your page here</p>  
 </Show>  
 );  
};

In this example, the

Show

Show

component reads the

resource

resource

information from the

categories

categories

categories

categories resource.

For the

ShowButton

ShowButton

component, you can specify the resource like this:

import { ShowButton } from "@refinedev/mantine";  
  
const MyShowComponent = () => {  
 return <ShowButton resource="categories" recordItemId="2" />;  
};

import { ShowButton } from "@refinedev/mantine";  
  
const MyShowComponent = () => {  
 return <ShowButton resource="categories" recordItemId="2" />;  
};

import { ShowButton } from "@refinedev/mantine";  
  
const MyShowComponent = () => {  
 return <ShowButton resource="categories" recordItemId="2" />;  
};

import { ShowButton } from "@refinedev/mantine";  
  
const MyShowComponent = () => {  
 return <ShowButton resource="categories" recordItemId="2" />;  
};

In this example, clicking the button will trigger the

show

show

show

show method of

useNavigation

useNavigation

useNavigation

useNavigation and then redirect the app to the

show

show

show

show action path of the

categories

categories

categories

categories resource, filling the necessary parameters in the route.

Please note that the

resourceNameOrRouteName

resourceNameOrRouteName

resourceNameOrRouteName

resourceNameOrRouteName prop is deprecated and you should use the

resource

resource

prop instead.

For more information, you can refer to the refine documentation (https://refine.dev/docs).

Sources:

Show Component (https://refine.dev/docs/api-reference/chakra-ui/components/basic-views/show)
ShowButton Component (https://refine.dev/docs/api-reference/mantine/components/buttons/show-button)
----------------------
```
Note: you can ask me a follow up question by @ mentioning me again
```
```
Note: you can ask me a follow up question by @ mentioning me again
```
----------------------

K

kapa.ai•7/8/23, 12:18 PM

@196423433930670080 kapa.ai is still learning and improving, please let us how it did by reacting below

D

dual-salmonOP•7/8/23, 12:19 PM

@kapa.ai I am asking about the useShow hook that retrieves the query result. I would like to specify the endpoint

K

kapa.ai•7/8/23, 12:19 PM

Let me check the knowledge base for you. One moment!

K

kapa.ai•7/8/23, 12:19 PM

----------------------
In the

useShow

useShow

useShow

useShow hook, you can specify the resource (which is usually used as an API endpoint path) by passing it as a parameter. Here's an example:

useShow({  
 resource: "categories",  
});

useShow({  
 resource: "categories",  
});

useShow({  
 resource: "categories",  
});

useShow({  
 resource: "categories",  
});

In this example, the

useShow

useShow

useShow

useShow hook will fetch data from the "categories" resource.

If you want to specify both the

resource

resource

and

id

id

, you can do it like this:

import { useShow, useParsed } from "@refinedev/core";  
  
const { id } = useParsed();  
  
useShow({  
 resource: "custom-resource",  
 id,  
});

import { useShow, useParsed } from "@refinedev/core";  
  
const { id } = useParsed();  
  
useShow({  
 resource: "custom-resource",  
 id,  
});

import { useShow, useParsed } from "@refinedev/core";  
  
const { id } = useParsed();  
  
useShow({  
 resource: "custom-resource",  
 id,  
});

import { useShow, useParsed } from "@refinedev/core";  
  
const { id } = useParsed();  
  
useShow({  
 resource: "custom-resource",  
 id,  
});

In this example, the

useShow

useShow

useShow

useShow hook will fetch data from the "custom-resource" resource with the specified

id

id

.

You can also use the

setShowId

setShowId

setShowId

setShowId function to set the

id

id

value:

import { useShow } from "@refinedev/core";  
  
const { setShowId } = useShow({  
 resource: "custom-resource",  
});  
  
setShowId("123");

import { useShow } from "@refinedev/core";  
  
const { setShowId } = useShow({  
 resource: "custom-resource",  
});  
  
setShowId("123");

import { useShow } from "@refinedev/core";  
  
const { setShowId } = useShow({  
 resource: "custom-resource",  
});  
  
setShowId("123");

import { useShow } from "@refinedev/core";  
  
const { setShowId } = useShow({  
 resource: "custom-resource",  
});  
  
setShowId("123");

In this example, the

useShow

useShow

useShow

useShow hook will fetch data from the "custom-resource" resource with the

id

id

set to "123".

For more information, you can refer to the useShow documentation (https://refine.dev/docs/api-reference/core/hooks/show/useShow).

Sources:

useShow Hook (https://refine.dev/docs/api-reference/core/hooks/show/useShow)
----------------------

Note: you can ask me a follow up question by @ mentioning me again

Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•7/8/23, 12:19 PM

@196423433930670080 kapa.ai is still learning and improving, please let us how it did by reacting below

D

dual-salmonOP•7/8/23, 1:14 PM

@kapa.ai how to inject environment variables at build time that can be accessed via process.env

K

kapa.ai•7/8/23, 1:14 PM

Let me check the knowledge base for you. One moment!

K

kapa.ai•7/8/23, 1:15 PM

----------------------
In Next.js, environment variables can be added into your application through a

.env.local

.env.local

file. This file should be placed in your project root directory. The variables in this file will be loaded into the Node.js process and can be accessed via

process.env

process.env

.

Here's an example of a

.env.local

.env.local

file:

API_URL='<https://dev.to/api/api/articles/{id}/unpublish'>  
API_KEY='your_secret_api_key_here'

API_URL='<https://dev.to/api/api/articles/{id}/unpublish'>  
API_KEY='your_secret_api_key_here'

API_URL='<https://dev.to/api/api/articles/{id}/unpublish'>  
API_KEY='your_secret_api_key_here'

API_URL='<https://dev.to/api/api/articles/{id}/unpublish'>  
API_KEY='your_secret_api_key_here'

These variables can then be accessed in your application like so:

process.env.API_URL
process.env.API_KEY

process.env.API_URL
process.env.API_KEY

process.env.API_URL
process.env.API_KEY

process.env.API_URL
process.env.API_KEY

If you want to expose these variables to the browser, you can add a

NEXT_PUBLIC_

NEXT_PUBLIC_

NEXT_PUBLIC_

NEXT_PUBLIC_ prefix to the variable name in the

.env.local

.env.local

file. For example:

NEXT_PUBLIC_GOOGLE_ANALYTICS_ID='your_google_analytics_id_here'

NEXT_PUBLIC_GOOGLE_ANALYTICS_ID='your_google_analytics_id_here'

NEXT_PUBLIC_GOOGLE_ANALYTICS_ID='your_google_analytics_id_here'

NEXT_PUBLIC_GOOGLE_ANALYTICS_ID='your_google_analytics_id_here'

This variable can then be accessed in your application like so:

process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID

process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID

process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID

process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID

Remember to restart your server after adding new environment variables so that they can take effect.

Sources:

Next.js Environment Variables (https://refine.dev/blog/next-js-environment-variables)
----------------------

Note: you can ask me a follow up question by @ mentioning me again

Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•7/8/23, 1:15 PM

@196423433930670080 kapa.ai is still learning and improving, please let us how it did by reacting below

D

dual-salmonOP•7/8/23, 1:16 PM

@kapa.ai I am using a pure react with react router, not nextjs. Also I would like this to be done during production, not development so I wont be using a .env file. I will be using docker-compose

K

kapa.ai•7/8/23, 1:16 PM

Let me check the knowledge base for you. One moment!

K

kapa.ai•7/8/23, 1:16 PM

----------------------
In a Docker environment, you can pass environment variables at build time using the

args

args

args

args directive in your

docker-compose.yml

docker-compose.yml

file. Here's an example:

version: '3'
services:
  web:
    build:
      context: .
      args:
        - API_URL
        - API_KEY

version: '3'
services:
  web:
    build:
      context: .
      args:
        - API_URL
        - API_KEY

version: '3'
services:
  web:
    build:
      context: .
      args:
        - API_URL
        - API_KEY

version: '3'
services:
  web:
    build:
      context: .
      args:
        - API_URL
        - API_KEY

In this example,

API_URL

API_URL

API_URL

API_URL and

API_KEY

API_KEY

API_KEY

API_KEY are environment variables that will be passed to the Docker build process. These variables can be accessed in your Dockerfile using the

ARG

ARG

ARG

ARG instruction:

FROM node:14
WORKDIR /usr/src/app
ARG API_URL
ARG API_KEY
ENV REACT_APP_API_URL=$API_URL
ENV REACT_APP_API_KEY=$API_KEY
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM node:14
WORKDIR /usr/src/app
ARG API_URL
ARG API_KEY
ENV REACT_APP_API_URL=$API_URL
ENV REACT_APP_API_KEY=$API_KEY
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM node:14
WORKDIR /usr/src/app
ARG API_URL
ARG API_KEY
ENV REACT_APP_API_URL=$API_URL
ENV REACT_APP_API_KEY=$API_KEY
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM node:14
WORKDIR /usr/src/app
ARG API_URL
ARG API_KEY
ENV REACT_APP_API_URL=$API_URL
ENV REACT_APP_API_KEY=$API_KEY
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

In this Dockerfile,

API_URL

API_URL

API_URL

API_URL and

API_KEY

API_KEY

API_KEY

API_KEY are build-time variables that are passed to the

npm run build

npm run build

command. The

ENV

ENV

ENV

ENV instruction is used to set these variables as environment variables in the Docker container.

In your React application, you can access these variables using

process.env

process.env

:

console.log(process.env.REACT_APP_API_URL);
console.log(process.env.REACT_APP_API_KEY);

console.log(process.env.REACT_APP_API_URL);
console.log(process.env.REACT_APP_API_KEY);

console.log(process.env.REACT_APP_API_URL);
console.log(process.env.REACT_APP_API_KEY);

console.log(process.env.REACT_APP_API_URL);
console.log(process.env.REACT_APP_API_KEY);

Remember to prefix your environment variables with

REACT_APP_

REACT_APP_

REACT_APP_

REACT_APP_ to ensure they are embedded into the build.

Please note that this method requires you to have these environment variables (

API_URL

API_URL

API_URL

API_URL and

API_KEY

API_KEY

API_KEY

API_KEY) set in the shell environment where you run

docker-compose up

docker-compose up

docker-compose up

docker-compose up.

Sources:

Docker Build Args and Environment Variables (https://refine.dev/blog/docker-build-args-and-env-vars)
----------------------
```
Note: you can ask me a follow up question by @ mentioning me again
```
```
Note: you can ask me a follow up question by @ mentioning me again
```
----------------------

K

kapa.ai•7/8/23, 1:16 PM

@196423433930670080 kapa.ai is still learning and improving, please let us how it did by reacting below

D

dual-salmonOP•7/8/23, 1:30 PM

@kapa.ai does react refine or serve allow you to start the server with new environment variables?

K

kapa.ai•7/8/23, 1:30 PM

Let me check the knowledge base for you. One moment!

K

kapa.ai•7/8/23, 1:31 PM

----------------------
Yes, you can pass environment variables when starting the server with refine. You can do this by prefixing your command with the environment variables you want to set. Here's an example:

API_URL=<https://myapi.com> API_KEY=123456 npm run refine dev

API_URL=<https://myapi.com> API_KEY=123456 npm run refine dev

API_URL=<https://myapi.com> API_KEY=123456 npm run refine dev

API_URL=<https://myapi.com> API_KEY=123456 npm run refine dev

In this example,

API_URL

API_URL

API_URL

API_URL and

API_KEY

API_KEY

API_KEY

API_KEY are environment variables that will be available in your application and can be accessed via

process.env

process.env

.

You can also pass options that are available in the framework. For example, you can run

npm run refine dev --port 3001

npm run refine dev --port 3001

npm run refine dev --port 3001

npm run refine dev --port 3001 to run the app on port

3001

3001.

Sources:

Refine CLI Commands (https://refine.dev/docs/packages/documentation/cli)
----------------------

Note: you can ask me a follow up question by @ mentioning me again

Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•7/8/23, 1:31 PM

@196423433930670080 kapa.ai is still learning and improving, please let us how it did by reacting below

D

dual-salmonOP•7/8/23, 1:31 PM

@kapa.ai no after I have ran "npm run build" can I still set the app's environment variables?

K

kapa.ai•7/8/23, 1:31 PM

Let me check the knowledge base for you. One moment!

K

kapa.ai•7/8/23, 1:31 PM

@.chasel That's a great question, but unfortunately I am only capable of responding to a maximum of three questions per thread. Don't hesitate to create a new thread for any further questions you have though. I'm here to help!