Nuxt: выборка данных только на стороне сервера - PullRequest
Новая
       12

Nuxt: выборка данных только на стороне сервера

1 голос
/ 22 апреля 2020

Я использую API Github для получения списка моих закрепленных репозиториев, и я помещаю вызов в метод AsyncData, чтобы у меня был список при первом рендеринге. Но я только что узнал, что AsyncData вызывается один раз на ServerSide, а затем каждый раз, когда страница загружается на клиент. Это означает, что у клиента больше нет токена для выполнения вызовов API, и в любом случае я не позволю своему токену Github в клиенте.

И когда я переключаю страницу (с другой страницы на страницу с список) данных там нет У меня просто есть пустой массив по умолчанию

Я не могу понять, как лучше всего быть уверенным, что мои данные всегда загружаются на стороне сервера? 

export default defineComponent({
  name: 'Index',
  components: { GithubProject, Socials },
  asyncData(context: Context) {
    return context.$axios.$post<Query<UserPinnedRepositoriesQuery>>('https://api.github.com/graphql', {
      query,
    }, {
      headers: {
        // Token is defined on the server, but not on the client
        Authorization: `bearer ${process.env.GITHUB_TOKEN}`,
      },
    })
      .then((data) => ({ projects: data.data.user.pinnedItems.nodes }))
      .catch(() => {});
  },
  setup() {
    const projects = ref<Repository[]>([]);

    return {
      projects,
    };
  },
});

Ответы [ 2 ]

1 голос
/ 22 апреля 2020

Вы должны использовать Vuex с nuxtServerInit.

nuxtServerInit всегда будет запускаться при загрузке первой страницы, независимо от того, на какой странице вы находитесь. Поэтому вам следует сначала перейти к store/index.js.

. После этого вы создаете состояние: 

export const state = () => ({
  data: []
})

Теперь вы создаете действие, которое всегда выполняется при каждом обновлении sh страницы. , Nuxt имеет доступ к хранилищу, даже если он находится на стороне сервера.

Теперь вам нужно получить данные из хранилища в вашем компоненте: 

export const actions = {
  async nuxtServerInit ({ state }, { req }) {
    let response = await axios.get("some/path/...");
    state.data = response.data;
  }
}

Вы можете хранить свой токен в готовить ie. Файлы cookie находятся на стороне клиента, но у nuxtServerInit есть второй аргумент. Запрос req. С этим вы можете получить доступ к заголовкам и ваш повар ie также.

let cookie = req.headers.cookie;

1 голос
/ 22 апреля 2020

Оберните ваш запрос в if(process.server) в методе asyncData на странице.

Если вам абсолютно необходим вызов на стороне сервера и вы не можете сделать это со стороны клиента, тогда вы можете просто манипулировать location.href для полной загрузки страницы.

...