为什么第一次登录后没有数据？

Question

尊敬的 vue 和 apollo 用户；

我正在处理第一次安装的问题。

当我第一次启动应用程序时，我没有得到结果。

我正在使用来自 "apollo-boost"

的 ApolloClient、InMemoryCache、HttpLink

我将我的用户 ID 和 JWT 存储在 ApplicationSettings（本地存储）中

如何动态设置token？

Vue.use(VueApollo);
const httpLink = new HttpLink({
    uri: "https://sebapi.com/graphql"
});
const authLink = setContext((_, { headers }) => {
    // get the authentication token from ApplicationSettings if it exists
    var tokenInAppSettings = ApplicationSettings.getString("token");
    // return the headers to the context so HTTP link can read them
    return {
        headers: {
            ...headers,
            authorization: tokenInAppSettings
                ? `Bearer ${tokenInAppSettings}`
                : null
        }
    };
});
export const apolloClient = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache()
});

const apolloProvider = new VueApollo({
    defaultClient: apolloClient
});

我创建了a GitHub repo reproducing problem

和一个youtube video of the problem

登录时没有错误，但在第一次导航到列表页面后出现以下错误...

JS: [Vue warn]: Invalid prop: type check failed for prop "items". Expected Array, Object, got Undefined

JS: Error sending the query 'birds' ServerError: Response not successful: Received status code 400

在第一次查询时，APOLLO 似乎没有 userID。

注意：您可以使用yarn cl脚本

轻松清除用户数据

# debug app without HMR
yarn devn
# clear user data of app
yarn cl

Answer 1

使用 vuex 的解决方案回购：

https://github.com/kaanguru/data-firstlogin/tree/user-in-vuex

将 userID 移动到 vue 实例中

+welcome.vue+

//const userId = ApplicationSettings.getNumber("userID");
// I have moved userID into vue.

export default {
  data() {
    return {
      birds:[],
      bird:{
        id: null,
        isim: "",
        bilezik: ""
      },
      userId: ApplicationSettings.getNumber("userID")
    };
  },

  apollo: {
    birds: {
      query: gql`
        query myBirds($userId: ID!) {
          birds(where: { user: $userId }) {
            id
            isim
            bilezik
          }
        }
      `,
      variables() {
        return {
          userId: this.userId,
        };
      },
    },
  },
};